组织换届重构完成

project/pingchang/apps/AppOrganizationChange/components/organizationSetting.vue

@@ -1,10 +1,10 @@
 <template>
   <section class="organizationSetting">
     <ai-detail>
-      <ai-title slot="title" title="换届设置" isShowBottomBorder isShowBack @onBackClick="cancel(true)"/>
+      <ai-title slot="title" :title="pageTitle" isShowBottomBorder isShowBack @onBackClick="cancel(true)"/>
       <template slot="content">
         <el-form ref="SettingForm" :model="form" :rules="formRules" size="small" label-width="150px">
-          <ai-card title="基本信息">
+          <ai-card title="基本信息" v-if="!isMakeUp">
             <template #content>
               <div class="tips">
                 <i class="el-icon-warning"></i>
@@ -27,17 +27,21 @@
               </el-form-item>
             </template>
           </ai-card>
-          <ai-card v-if="isInit" title="届次设置">
-            <el-form-item label="本届换届时间：" prop="changeTime">
-              <el-date-picker v-model="form.changeTime"/>
-            </el-form-item>
-            <el-form-item label="下届换届时间：" prop="nextChangeTime">
-              <el-date-picker disabled v-model="form.nextChangeTime"/>
-            </el-form-item>
-            <el-form-item label="届次：" prop="sessionTime">
-              <el-input v-model="form.sessionTime" placeholder="请输入..."/>
-            </el-form-item>
-            <detail-panel :instance="instance" v-model="lists" editable/>
+          <ai-card title="当前届次">
+            <template #content>
+              <div flex>
+                <el-form-item class="fill" label="本届换届时间" prop="changeTime">
+                  <el-date-picker v-model="form.changeTime" @change="getNextChangeTime" value-format="yyyy-MM-dd"/>
+                </el-form-item>
+                <el-form-item class="fill" label="下届换届时间" prop="nextChangeTime">
+                  <el-date-picker disabled v-model="form.nextChangeTime"/>
+                </el-form-item>
+              </div>
+              <el-form-item label="届次" prop="sessionTime">
+                <el-input v-model="form.sessionTime" placeholder="请输入..."/>
+              </el-form-item>
+              <detail-panel :serve-list.sync="form.serveList" :candidate-list.sync="form.candidateList"/>
+            </template>
           </ai-card>
         </el-form>
       </template>
@@ -59,28 +63,22 @@ export default {
   components: {DetailPanel},
   inject: ['permissions', 'instance', 'dict'],
   data() {
-    let validUser = (rule, value, callback) => {
-      if (!value.length) {
-        return callback(new Error('请选择换届提醒人'));
-      } else {
-        callback();
-      }
-    };
     return {
       form: {
         type: "",
         userList: [],
         sessionTime: "",
         changeTime: "",
-        nextChangeTime: ""
-      },
-      lists: {
-        candidateList: [],     //本届候选人
-        serveList: []          //本届任职
+        nextChangeTime: "",
+        serveList: [],
+        candidateList: []
       },
       formRules: {
-        type: [{required: true, message: "请选择选举方式", trigger: "blur"}],
-        userList: [{required: true, validator: validUser, trigger: "blur"}],
+        type: [{required: true, message: "请选择换届类型", trigger: "change"}],
+        sessionTime: [{required: true, message: "请输入届次", trigger: "change"}],
+        userList: [{required: true, message: "请选择换届提醒人", trigger: "change"}],
+        changeTime: [{required: true, message: "请选择本次换届时间", trigger: "change"}],
+        nextChangeTime: [{required: true, message: "请选择下次换届时间", trigger: "change"}]
       },
       chooseUserList: [],
       org: null
@@ -88,26 +86,47 @@ export default {
   },
   computed: {
     ...mapState(['user']),
-    isInit: v => !!v.form.id,
-    isNew: v => v.$route.query.new
+    isMakeUp: v => v.$route.hash == "#makeup",
+    pageTitle: v => v.isMakeUp ? "补录换届" : "换届设置"
+  },
+  watch: {
+    'form.type'() {
+      this.getNextChangeTime()
+    }
   },
   created() {
     this.org = new this.MODEL.PartyOrg(this.$route.query.oid)
-    !this.isNew && this.getDetail()
+    !!this.$route.query.id ? this.getSession() : this.getDetail()
   },
   methods: {
     cancel() {
       this.$router.back()
     },
+    getNextChangeTime() {
+      const {type, changeTime} = this.form, sessionPeriod = {0: 3, 1: 5}[type]
+      this.form.nextChangeTime = type && changeTime ? this.$dateFormat(this.$moment(changeTime).add(sessionPeriod, "years")) : ""
+    },
+    getSession() {
+      //根据id获取对应届次信息
+      const {id} = this.$route.query
+      this.instance.post(`/app/apporganizationchangeconfig/queryDetailById`, null, {
+        pureBack: true,
+        params: {id}
+      }).then((res) => {
+        if (res?.data) {
+          this.form = res.data
+        }
+      })
+    },
     getDetail() {
+      //获取到当前届次信息
       const {oid: organizationId} = this.$route.query
       this.instance.post(`/app/apporganizationchangeconfig/queryDetailByOrganizationId`, null, {
+        pureBack: true,
         params: {organizationId}
       }).then((res) => {
         if (res?.data) {
           this.form = res.data
-          let {candidateList, serveList} = this.form
-          this.lists = {candidateList, serveList}
         }
       })
     },
@@ -122,10 +141,13 @@ export default {
       this.$refs.SettingForm.validate(v => {
         if (v) {
           const {id: organizationId, name: organizationName} = this.org
-          const action = `/app/apporganizationchangeconfig/${this.isInit ? 'update' : 'add'}`
+          if (this.isMakeUp && !this.$route.query.id) {
+            delete this.form.id
+          }
+          const action = `/app/apporganizationchangeconfig/${!!this.form.id ? 'update' : 'add'}`
+          const addOrMakeup = !this.isMakeUp
           this.instance.post(action, {
-            addOrMakeup: true,
-            ...this.form, organizationId, organizationName
+            ...this.form, organizationId, organizationName, addOrMakeup
           }).then(res => {
             if (res.code == 0) {
               this.$message.success('提交成功')
@@ -143,8 +165,8 @@ export default {
 .organizationSetting {
   height: 100%;
 
-  ::v-deep .el-date-editor .el-input {
-    width: 100%;
+  .el-date-editor, .el-input {
+    width: 100% !important;
   }
 
   .tips {