备案

src/main/vue/src/router.js

@@ -188,6 +188,14 @@ const router = new Router({
                         title: '备案管理编辑'
                     }
                 },
+                {
+                    path: '/recordAdd',
+                    name: 'RecordAdd',
+                    component: () => import(/* webpackChunkName: "recordAdd" */ '@/views/record/RecordAdd.vue'),
+                    meta: {
+                        title: '备案管理编辑'
+                    }
+                },
                 {
                     path: '/recordOrganizationList',
                     name: 'RecordOrganizationList',

src/main/vue/src/views/record/RecordAdd.vue

@@ -0,0 +1,368 @@
+<template>
+    <div class="edit-view">
+        <el-form
+            :model="formData"
+            :rules="rules"
+            ref="form"
+            label-width="127px"
+            label-position="right"
+            size="small"
+            style="max-width: 700px;"
+        >
+            <el-card shadow="hover" :body-style="{ padding: '20px' }">
+                <el-form-item prop="examinationName" label="考级活动名称">
+                    <el-input class="input1" v-model="formData.examinationName"></el-input>
+                </el-form-item>
+                <el-form-item prop="examinationStartTime" label="考级活动时间">
+                    <el-date-picker
+                        class="input2"
+                        v-model="dateRange"
+                        type="daterange"
+                        value-format="yyyy-MM-dd"
+                        start-placeholder="请选择开始时间"
+                        end-placeholder="请选择结束时间"
+                        range-separator="至"
+                    >
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item prop="examinationAgency" label="考级机构名称">
+                    <el-input class="input1" v-model="formData.examinationAgency"></el-input>
+                </el-form-item>
+                <el-form-item prop="category" label="单位类别">
+                    <el-input class="input1" v-model="formData.category"></el-input>
+                </el-form-item>
+                <el-form-item prop="organizer" label="承办单位名称">
+                    <el-input class="input1" v-model="formData.organizer"></el-input>
+                </el-form-item>
+
+                <el-collapse-transition>
+                    <div v-show="showMore">
+                        <el-form-item prop="uscc" label="统一社会信用代码">
+                            <el-input class="input1" v-model="formData.uscc"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="examinationDistrict" label="考级地点">
+                            <el-select
+                                class="input1"
+                                v-model="formData.district"
+                                style="margin-bottom: 10px;display:block"
+                            >
+                                <el-option
+                                    v-for="item in district"
+                                    :key="item.id"
+                                    :value="item.name"
+                                    :label="item.name"
+                                ></el-option>
+                            </el-select>
+                            <el-input
+                                type="textarea"
+                                class="input2"
+                                :rows="3"
+                                v-model="formData.examinationAddress"
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item prop="examCenterQuantity" label="考场数量">
+                            <el-input-number v-model="formData.examCenterQuantity" class="input1"></el-input-number>
+                        </el-form-item>
+                        <el-form-item prop="examQuantity" label="报考人数">
+                            <el-input-number v-model="formData.examQuantity" class="input1"></el-input-number>
+                        </el-form-item>
+                        <el-form-item prop="examinerQuantity" label="考官人数">
+                            <el-input-number v-model="formData.examinerQuantity" class="input1"></el-input-number>
+                        </el-form-item>
+                        <el-form-item prop="examOwner" label="考点负责人">
+                            <el-input
+                                v-model="formData.examOwner"
+                                suffix-icon="el-icon-user-solid"
+                                class="input1"
+                                placeholder="联系人"
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item prop="examOwnerPhone">
+                            <el-input
+                                v-model="formData.examOwnerPhone"
+                                suffix-icon="el-icon-phone"
+                                class="input1"
+                                placeholder="手机号"
+                            ></el-input>
+                        </el-form-item>
+
+                        <el-form-item prop="securityOwner" label="安全负责人">
+                            <el-input
+                                v-model="formData.securityOwner"
+                                suffix-icon="el-icon-user-solid"
+                                class="input1"
+                                placeholder="联系人"
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item prop="securityOwnerPhone" label="">
+                            <el-input
+                                v-model="formData.securityOwnerPhone"
+                                suffix-icon="el-icon-phone"
+                                class="input1"
+                                placeholder="手机号"
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item prop="recordTime" label="备案时间">
+                            <el-date-picker
+                                class="input1"
+                                v-model="formData.recordTime"
+                                type="date"
+                                value-format="yyyy-MM-dd"
+                                placeholder="选择日期"
+                            >
+                            </el-date-picker>
+                        </el-form-item>
+                    </div>
+                </el-collapse-transition>
+
+                <el-button
+                    class="more"
+                    round
+                    type="primary"
+                    :plain="!showMore"
+                    :icon="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+                    @click="showMore = !showMore"
+                ></el-button>
+            </el-card>
+
+            <el-card shadow="hover" :body-style="{ padding: '20px' }">
+                <el-table
+                    :data="recordSpecialties"
+                    ref="table"
+                    header-row-class-name="table-header-row"
+                    header-cell-class-name="table-header-cell"
+                    row-class-name="table-row"
+                    cell-class-name="table-cell"
+                    @expand-change="load"
+                >
+                    <el-table-column type="expand">
+                        <template slot-scope="props">
+                            <el-card
+                                shadow="hover"
+                                :body-style="{ padding: '20px' }"
+                                v-loading="!experts.has(props.row.id)"
+                            >
+                                <el-table
+                                    :data="experts.has(props.row.id) ? experts.get(props.row.id) : []"
+                                    row-key="id"
+                                    header-row-class-name="table-header-row"
+                                    header-cell-class-name="table-header-cell"
+                                    row-class-name="table-row"
+                                    cell-class-name="table-cell"
+                                >
+                                    <el-table-column prop="name" label="名称" width="100"> </el-table-column>
+                                    <el-table-column prop="sex" label="性别"> </el-table-column>
+                                    <el-table-column prop="idNo" label="证件号码"> </el-table-column>
+                                    <el-table-column prop="external" label="是否外聘">
+                                        <template slot-scope="{ row }">
+                                            <span v-if="row.external">是</span>
+                                            <span v-else>否</span>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column prop="position" label="职称">
+                                        <template slot-scope="{ row }">
+                                            <span v-if="row.position"> {{ row.position }} </span>
+                                            <span v-else>无</span>
+                                        </template>
+                                    </el-table-column>
+                                </el-table>
+                            </el-card>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="name" label="专业名称" width="100"> </el-table-column>
+                    <el-table-column prop="code" label="专业代码"> </el-table-column>
+                    <el-table-column prop="level" label="总级数"> </el-table-column>
+                    <el-table-column prop="numOfExam" label="考场数量"> </el-table-column>
+                    <el-table-column prop="examinerQuantity" label="考官人数"></el-table-column>
+                </el-table>
+                <!-- card body -->
+            </el-card>
+            <el-button @click="onSave" style="margin-top: 10px">保存</el-button>
+            <el-button @click="$router.go(-1)" style="margin-top: 10px">返回</el-button>
+        </el-form>
+    </div>
+</template>
+<script>
+export default {
+    name: 'RecordEdit',
+    created() {
+        if (this.$route.query.rid) {
+            this.$http
+                .get('record/get/' + this.$route.query.rid)
+                .then(res => {
+                    this.formData = res;
+                    this.dateRange = [res.examinationStartTime, res.examinationEndTime];
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.$message.error(e.error);
+                });
+            this.$http
+                .post(
+                    'recordSpecialty/all',
+                    { size: 1000, query: { recordId: Number(this.$route.query.rid) } },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.recordSpecialties = res.content.map(item => {
+                        return {
+                            ...item,
+                            children: []
+                        };
+                    });
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.$message.error(e.error);
+                });
+        }
+        this.$http
+            .get('/district/NJ')
+            .then(res => {
+                this.district = res;
+            })
+            .catch(e => {
+                console.log(e);
+                this.$message.error(e.error);
+            });
+    },
+    data() {
+        return {
+            saving: false,
+            activeName: '1',
+            formData: {},
+            rules: {
+                examOwnerPhone: {
+                    pattern: /^1[3-9]\d{9}$/,
+                    message: '请输入正确的手机号',
+                    trigger: 'blur'
+                },
+                securityOwnerPhone: {
+                    pattern: /^1[3-9]\d{9}$/,
+                    message: '请输入正确的手机号',
+                    trigger: 'blur'
+                }
+            },
+            categoryOptions: [{ label: '承办单位', value: 'ORGANIZER' }],
+            district: [],
+            dateRange: [],
+            recordSpecialties: [],
+            experts: new Map(),
+            showMore: false
+        };
+    },
+    methods: {
+        onSave() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.submit();
+                } else {
+                    return false;
+                }
+            });
+        },
+        submit() {
+            let data = { ...this.formData };
+            data.examinationStartTime = this.dateRange[0];
+            data.examinationEndTime = this.dateRange[1];
+            this.saving = true;
+            this.$http
+                .post('/record/save', data, { body: 'json' })
+                .then(res => {
+                    this.saving = false;
+                    this.$message.success('成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.saving = false;
+                    this.$message.error(e.error);
+                });
+        },
+        onDelete() {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/record/del/${this.formData.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        console.log(e);
+                        this.$message.error((e || {}).error || '删除失败');
+                    }
+                });
+        },
+        load(row) {
+            if (this.experts.has(row.id)) {
+                return;
+            }
+
+            let experts = new Map([...this.experts]);
+            let list = [];
+            this.$http
+                .post('recordExpert/bySpecialtyId', { recordSpecialtyId: row.id })
+                .then(res => {
+                    if (res.length > 0) {
+                        list = res;
+                    }
+                })
+                .catch(() => {})
+                .then(() => {
+                    experts.set(row.id, list);
+                    this.experts = experts;
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.edit-view {
+    background-color: transparent;
+}
+.date-width {
+    width: 100%;
+}
+.info-content {
+    // padding: 39px 25px 25px;
+    // margin: 5px auto;
+    width: 50%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+/deep/ .address {
+    display: flex;
+    width: 100%;
+    .el-form-item__content {
+        flex-grow: 1;
+    }
+}
+/deep/ .el-divider__text,
+.el-link {
+    font-size: 12px;
+}
+.el-card + .el-card {
+    margin-top: 30px;
+}
+/deep/ .el-card__body {
+    position: relative;
+}
+.el-card {
+    overflow: visible;
+}
+.more {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    padding: 9px 9px;
+}
+/deep/.el-input.is-disabled .el-input__inner {
+    background-color: #ffffff;
+    color: #606266;
+}
+</style>

src/main/vue/src/views/record/RecordList.vue

@@ -53,6 +53,7 @@
             >
                 <el-button slot="trigger" size="small" type="primary" class="filter-item">批量上传</el-button>
             </el-upload>
+            <el-button @click="addRow" type="primary" class="filter-item">添加</el-button>
             <el-button
                 @click="download"
                 type="primary"
@@ -194,7 +195,7 @@ export default {
         },
         addRow() {
             this.$router.push({
-                path: '/recordEdit',
+                path: '/recordAdd',
                 query: {
                     ...this.$route.query
                 }