|
|
@@ -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>
|
