组织换届重构完成

project/pingchang/apps/AppOrganizationChange/AppOrganizationChange.vue

@@ -8,7 +8,6 @@
 
 <script>
 import {mapState} from "vuex";
-import addChange from "./components/addChange.vue";
 import List from "./components/List.vue";
 import organizationSetting from "./components/organizationSetting.vue";
 
@@ -27,7 +26,6 @@ export default {
   },
   components: {
     List,
-    addChange,
     organizationSetting,
   },
   computed: {
@@ -35,8 +33,6 @@ export default {
     currentPage() {
       const {hash} = this.$route
       if (["#add","#makeup"].includes(hash)) {
-        return addChange
-      } else if (hash == "#setting") {
         return organizationSetting
       } else return List
     }

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

@@ -1,7 +1,12 @@
 <template>
   <ai-list class="List">
     <template slot="title">
-      <ai-title title="组织换届" isShowBottomBorder/>
+      <ai-title title="组织换届" isShowBottomBorder>
+        <template #rightBtn>
+          <el-button size="small" type="primary" @click="toAdd(selected.id)" v-if="!hasConfig&&permissions('app_apporganizationchangeconfig')">换届设置
+          </el-button>
+        </template>
+      </ai-title>
     </template>
     <template #left>
       <ai-tree-menu title="组织目录" searchPlaceholder="请输入组织名称" @search="onSearch">
@@ -15,14 +20,9 @@
       </ai-tree-menu>
     </template>
     <template slot="content" class="content">
-      <ai-title title="届次信息">
-        <template #rightBtn>
-          <el-button size="small" type="primary" @click="toSetting(selected.id)" v-if="permissions('app_apporganizationchangeconfig')">换届设置</el-button>
-        </template>
-      </ai-title>
       <el-tabs v-model="currIndex">
         <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
-          <component :ref="tab.name" v-if="currIndex==i" :is="tab.comp" lazy :selected="selected" v-on="$listeners"/>
+          <component :ref="tab.name" v-if="currIndex==i" :is="tab.comp" lazy :selected="selected" v-on="$listeners" :hasConfig.sync="hasConfig"/>
         </el-tab-pane>
       </el-tabs>
     </template>
@@ -44,7 +44,8 @@ export default {
         {label: '历史届次', name: 'history', comp: history, permission: ''}
       ],
       currIndex: '0',
-      selected: null
+      selected: null,
+      hasConfig: false
     }
   },
   components: {
@@ -57,7 +58,6 @@ export default {
   methods: {
     onTreeChange(e) {
       this.selected = e
-      this.$refs[this.tabs[Number(this.currIndex)].name][0].getList(e.id)
     },
     onSearch(v) {
       this.$refs.tree?.$refs?.partyTree?.filter(v)
@@ -66,12 +66,9 @@ export default {
       if (!value) return true
       return data.name.indexOf(value) !== -1
     },
-    toAdd(id) {
-      this.$router.push({hash: "#add", query: {id}})
+    toAdd(oid) {
+      this.$router.push({hash: "#add", query: {oid}})
     },
-    toSetting(oid) {
-      this.$router.push({hash: "#setting", query: {oid, new: 1}})
-    }
   },
   created() {
     const {organizationId: id, organizationName: name} = this.user.info

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

@@ -1,150 +0,0 @@
-<template>
-  <section class="addChange">
-    <ai-detail>
-      <ai-title slot="title" :title="pageTitle" isShowBottomBorder isShowBack @onBackClick="cancel(false)"/>
-      <template #content>
-        <ai-card title="基本信息">
-          <template #content>
-            <div class="Form">
-              <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="right" size="small">
-                <el-row type="flex">
-                  <el-form-item class="fill" label="换届时间" prop="changeTime">
-                    <el-date-picker v-model="form.changeTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width:338px">
-                    </el-date-picker>
-                  </el-form-item>
-                  <el-form-item class="fill" label="届次" prop="sessionTime">
-                    <el-input size="small" :maxlength="30" placeholder="请输入届次" v-model="form.sessionTime"></el-input>
-                  </el-form-item>
-                </el-row>
-                <ai-title title="本届任职(必填)">
-                  <template slot="rightBtn">
-                    <el-button size="small" type="text" icon="iconfont iconAdd" @click="form.serveList.push({name:null,position:null,type:0})">添加任职人员
-                    </el-button>
-                  </template>
-                </ai-title>
-                <el-table :data="form.serveList" size="mini" border stripe>
-                  <el-table-column label="职位" align="center">
-                    <template slot-scope="{row}">
-                      <el-input class="tableInput" v-model="row.position" clearable placeholder="请输入职位"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="姓名" align="center">
-                    <template slot-scope="{row}">
-                      <el-input class="tableInput" v-model="row.name" clearable placeholder="请输入姓名"/>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="操作" align="center">
-                    <template slot-scope="{$index}">
-                      <el-button type="text" @click="handleDelete($index, 'serveList')">删除</el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-form>
-              <ai-title class="mar-t8" title="本届候选人">
-                <template slot="rightBtn">
-                  <el-button size="small" type="text" icon="iconfont iconAdd" @click="form.candidateList.push({name:null,position:null,type: 1})">添加候选人
-                  </el-button>
-                </template>
-              </ai-title>
-              <el-table :data="form.candidateList" size="mini" border stripe>
-                <el-table-column label="职位" align="center">
-                  <template slot-scope="{row}">
-                    <el-input class="tableInput" v-model="row.position" clearable placeholder="请输入职位"/>
-                  </template>
-                </el-table-column>
-                <el-table-column label="候选人" align="center">
-                  <template slot-scope="{row}">
-                    <el-input class="tableInput" v-model="row.name" clearable placeholder="请输入姓名"/>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" align="center">
-                  <template slot-scope="{$index}">
-                    <el-button type="text" @click="handleDelete($index, 'candidateList')">删除</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-          </template>
-        </ai-card>
-      </template>
-      <template slot="footer" class="footer">
-        <el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
-        <el-button class="footer-btn" type="primary" @click="confirm()">保存</el-button>
-      </template>
-    </ai-detail>
-  </section>
-</template>
-
-<script>
-export default {
-  name: "addChange",
-  props: {
-    instance: Function,
-    permissions: Function,
-    dict: Object,
-  },
-  computed: {
-    isMakeUp: v => v.$route.hash == "#makeup",
-    pageTitle: v => v.isMakeUp ? "补录换届" : "新增换届"
-  },
-  data() {
-    return {
-      form: {
-        changeTime: '',
-        sessionTime: '',
-        serveList: [],   // 任职人员列表
-        candidateList: [], // 候选人员列表
-      },
-      rules: {
-        changeTime: [{required: true, message: '请选择换届时间', trigger: 'blur'}],
-        sessionTime: [{required: true, message: '请输入届次', trigger: 'blur'}],
-      },
-    }
-  },
-  methods: {
-    // getDetail() {
-    //   const {id: organizationId} = this.$route.query
-    //   organizationId && this.instance.post(`/app/apporganizationgeneralelection/queryDetailByOrganizationId`, null, {
-    //     params: {organizationId}
-    //   }).then(res => {
-    //     if (res?.data) {
-    //       this.form = res.data
-    //     }
-    //   })
-    // },
-    cancel(refresh) {
-      refresh ? this.$router.push({}) : this.$router.back()
-    },
-    handleDelete(i, type) {
-      this.$confirm("确定要删除该数据?").then(() => {
-        if (type == 'candidateList') {
-          this.form.candidateList.splice(i, 1)
-        } else if (type == 'serveList') {
-          this.form.serveList.splice(i, 1)
-        }
-      }).catch(() => 0)
-    },
-    confirm() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          const addOrMakeup = !this.isMakeUp
-          this.instance.post(`/app/apporganizationgeneralelection/add`, {
-            ...this.form, addOrMakeup
-          }).then(res => {
-            if (res.code == 0) {
-              this.$message.success('提交成功')
-              this.cancel(true)
-            }
-          })
-        }
-      })
-    },
-  }
-}
-</script>
-
-<style lang="scss" scope>
-.addChange {
-  height: 100%;
-}
-</style>

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

@@ -1,35 +1,37 @@
 <template>
   <section class="detailPanel">
-    <div class="itemTitle">
-      <b>本届任职{{editable?"（必填）":""}}</b>
-      <span type="text" class="iconfont iconAdd" @click="showDialog({type:0})">添加任职人员</span>
-    </div>
-    <el-table :data="serveList" border header-cell-class-name="table-header" cell-class-name="table-cell">
+    <ai-title :title="`本届任职${!disabled?'（必填）':''}`">
+      <template #rightBtn v-if="!disabled">
+        <el-button type="text" icon="iconfont iconAdd" @click="showDialog({type:0})">添加任职人员</el-button>
+      </template>
+    </ai-title>
+    <el-table :data="serveList" border size="small">
       <el-table-column label="职位" width="180px" prop="position"/>
       <el-table-column label="姓名" prop="name"/>
-      <el-table-column label="操作" width="120px" align="center">
+      <el-table-column label="操作" width="200px" align="center" v-if="!disabled">
         <div slot-scope="{row,$index}" class="table-operation">
-          <span class="iconfont iconEdit" @click="showDialog(row,$index)" title="编辑"/>
-          <span class="iconfont iconDelete" title="删除" @click="deleteItem($index,0)"/>
+          <el-button type="text" @click="showDialog(row,$index)">编辑</el-button>
+          <el-button type="text" @click="deleteItem($index,0)">删除</el-button>
         </div>
       </el-table-column>
     </el-table>
-    <div class="itemTitle">
-      <b>本届候选人</b>
-      <span type="text" class="iconfont iconAdd" @click="showDialog({type:1})">添加候选人</span>
-    </div>
-    <el-table :data="candidateList" border header-cell-class-name="table-header" cell-class-name="table-cell">
+    <ai-title title="本届候选人">
+      <template #rightBtn v-if="!disabled">
+        <el-button type="text" icon="iconfont iconAdd" @click="showDialog({type:1})">添加候选人</el-button>
+      </template>
+    </ai-title>
+    <el-table :data="candidateList" border size="small">
       <el-table-column label="职位" width="180px" prop="position"/>
       <el-table-column label="候选人" prop="name"/>
-      <el-table-column label="操作" width="120px" align="center">
+      <el-table-column label="操作" width="200px" align="center" v-if="!disabled">
         <div slot-scope="{row,$index}" class="table-operation">
-          <span class="iconfont iconEdit" @click="showDialog(row,$index)" title="编辑"/>
-          <span class="iconfont iconDelete" title="删除" @click="deleteItem($index,1)"/>
+          <el-button type="text" @click="showDialog(row,$index)">编辑</el-button>
+          <el-button type="text" @click="deleteItem($index,1)">删除</el-button>
         </div>
       </el-table-column>
     </el-table>
-    <el-dialog :visible.sync="dialog.visible" width="520px" :title="dialog.title" class="editStyle"
-               @close="dialog={visible: false},$refs.editListItemForm.clearValidate()">
+    <ai-dialog :visible.sync="dialog.visible" width="520px" :title="dialog.title" class="editStyle"
+               @closed="dialog={}" @onConfirm="submitAdd">
       <el-form ref="editListItemForm" size="small" :model="dialog" :rules="rules" label-width="100px"
                :validate-on-rule-change="false">
         <el-form-item label="职位：" prop="position">
@@ -42,149 +44,114 @@
             <span style="color:#999;font-size: 12px">输入候选人姓名，用空格隔开</span>
           </div>
         </el-form-item>
-
       </el-form>
-      <div slot="footer" class="footerBtns">
-        <el-button size="small" @click="dialog.visible=false">取消</el-button>
-        <el-button size="small" type="primary" @click="submitAdd">确认</el-button>
-      </div>
-    </el-dialog>
+    </ai-dialog>
   </section>
 
 </template>
 
 <script>
-  export default {
-    name: "detailPanel",
-    model: {
-      prop: "value",
-      event: "change"
+export default {
+  name: "detailPanel",
+  props: {
+    candidateList: {default: () => []},
+    serveList: {default: () => []},
+    disabled: Boolean
+  },
+  data() {
+    return {
+      dialog: {
+        visible: false,
+        title: "",
+        name: "",
+        changeTime: ""
+      }
+    }
+  },
+  computed: {
+    currentList() {
+      let initData = {
+        0: {name: "姓名", dialogTitle: "本届任职人", list: "serveList"},
+        1: {name: "候选人", dialogTitle: "本届候选人", list: "candidateList"}
+      }
+      return initData[this.dialog.type || 0]
     },
-    props: {
-      value: Object,
-      instance: Function,
-      dict: Object,
-      permissions: Function,
-      editable: {type: Boolean, default: false}
-    },
-    data() {
+    rules() {
       return {
-        dialog: {
-          visible: false,
-          title: "",
-          name: "",
-          changeTime: ""
-        },
-        serveList: [],
-        candidateList: []
+        name: [{required: true, message: "请输入" + this.currentList.name, trigger: "change"}],
+        position: [{required: true, message: "请输入职位", trigger: "change"}],
       }
     },
-    computed: {
-      lists() {
-        return {candidateList: this.candidateList, serveList: this.serveList}
-      },
-      currentList() {
-        let initData = {
-          0: {name: "姓名", dialogTitle: "本届任职人", list: "serveList"},
-          1: {name: "候选人", dialogTitle: "本届候选人", list: "candidateList"}
-        }
-        return initData[this.dialog.type || 0]
-      },
-      rules() {
-        return {
-          name: [{required: true, message: "请输入" + this.currentList.name, trigger: "change"}],
-          position: [{required: true, message: "请输入职位", trigger: "change"}],
-        }
-      },
+  },
+  methods: {
+    showDialog(v, rowIndex) {
+      this.dialog = {...this.dialog, ...v, rowIndex}
+      this.dialog.title = (this.dialog.rowIndex == 0 ? "编辑" : "添加") + this.currentList.dialogTitle
+      this.dialog.visible = true
     },
-    watch: {
-      lists: {
-        deep: true,
-        handler() {
-          this.$emit('change', this.lists)
-        }
-      },
-      value: {
-        deep: true,
-        handler(v) {
-          if (v) {
-            v.candidateList && (this.candidateList = v.candidateList)
-            v.serveList && (this.serveList = v.serveList)
-          }
-        }
-      }
-    },
-    methods: {
-      showDialog(v, rowIndex) {
-        this.dialog = {...this.dialog, ...v, rowIndex}
-        this.dialog.title = (this.dialog.rowIndex==0? "编辑" : "添加") + this.currentList.dialogTitle
-        this.dialog.visible = true
-      },
-      submitAdd() {
-        this.$refs.editListItemForm.validate(v => {
-          if (v) {
+    submitAdd() {
+      this.$refs.editListItemForm.validate(v => {
+        if (v) {
+          this.handleData(this.currentList.list, list => {
             if (this.dialog.rowIndex > -1) {
-              this.$data[this.currentList.list].splice(this.dialog.rowIndex, 1, this.dialog)
-            } else this.$data[this.currentList.list].push(this.dialog)
-            this.dialog.visible = false
-            this.dialog.rowIndex==undefined ? this.$emit("refresh",1) : this.$emit("refresh",2);
-          }
-        })
-      },
-      deleteItem(index,type) {
-        this.$confirm(`是否要删除该${type==0?'本届任职人':'本届候选人'}`, {type: "error"}).then(() => {
-          type==0?this.$data["serveList"].splice(index, 1):this.$data["candidateList"].splice(index, 1)
-          this.$emit("refresh",0)
-        }).catch(() => {
-        })
-      }
-    },
-    mounted() {
-      this.$nextTick(() => {
-        if (this.value) {
-          let v = JSON.parse(JSON.stringify(this.value))
-          v.candidateList && (this.candidateList = v.candidateList)
-          v.serveList && (this.serveList = v.serveList)
+              list.splice(this.dialog.rowIndex, 1, this.dialog)
+            } else list.push(this.dialog)
+          })
+          this.dialog.visible = false
         }
       })
+    },
+    handleData(prop, cb) {
+      const list = this.$copy(this.$data[prop]) || []
+      cb(list)
+      this.$emit("update:" + prop, list)
+    },
+    deleteItem(index, type) {
+      this.$confirm(`是否要删除该${type == 0 ? '本届任职人' : '本届候选人'}`, {type: "error"}).then(() => {
+        this.handleData(type == 0 ? "serveList" : "candidateList", list => {
+          list.splice(index, 1)
+        })
+      }).catch(() => {
+      })
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .detailPanel {
-    .itemTitle + .el-table {
-      margin-top: 16px;
+.detailPanel {
+  .itemTitle + .el-table {
+    margin-top: 16px;
+  }
+
+  .el-table + .itemTitle {
+    margin-top: 24px;
+  }
+
+  ::v-deep .table-header {
+    box-sizing: border-box;
+    border-right: 1px solid #d0d4dc !important;
+
+    .cell {
+      padding-left: 32px;
     }
 
-    .el-table + .itemTitle {
-      margin-top: 24px;
-    }
-
-    ::v-deep .table-header {
-      box-sizing: border-box;
-      border-right: 1px solid #d0d4dc !important;
-
-      .cell {
-        padding-left: 32px;
-      }
-
-      &.is-center > .cell {
-        padding-left: 10px !important;
-      }
-    }
-
-    ::v-deep .table-cell {
-      height: 44px;
-      color: #333;
-
-      .cell {
-        padding-left: 32px;
-      }
-
-      &.is-center > .cell {
-        padding-left: 10px !important;
-      }
+    &.is-center > .cell {
+      padding-left: 10px !important;
     }
   }
+
+  ::v-deep .table-cell {
+    height: 44px;
+    color: #333;
+
+    .cell {
+      padding-left: 32px;
+    }
+
+    &.is-center > .cell {
+      padding-left: 10px !important;
+    }
+  }
+}
 </style>

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

@@ -3,7 +3,7 @@
 
     <ai-search-bar>
       <template #left>
-        <el-button type="primary" icon="iconfont iconEdit" @click="$router.push({hash:'#makeup',query:{}})">补录</el-button>
+        <el-button type="primary" icon="iconfont iconEdit" @click="$router.push({hash:'#makeup',query:{oid}})">补录</el-button>
       </template>
       <template #right>
         <el-input size="small" placeholder="请输入届次" v-model="search.name" clearable
@@ -49,6 +49,14 @@ export default {
     },
     oid: v => v.$attrs.selected.id
   },
+  watch: {
+    oid: {
+      immediate: true,
+      handler() {
+        this.getList()
+      }
+    }
+  },
   methods: {
     handleEdit(id) {
       this.$router.push({hash: "#makeup", query: {id}})
@@ -67,7 +75,7 @@ export default {
     },
     getList() {
       const {oid: organizationId} = this
-      this.instance.post("/app/apporganizationgeneralelection/list", null, {
+      organizationId && this.instance.post("/app/apporganizationgeneralelection/list", null, {
         params: {...this.search, organizationId}
       }).then(res => {
         if (res?.data) {
@@ -76,9 +84,6 @@ export default {
       })
     }
   },
-  created() {
-    this.getList()
-  },
 }
 </script>
 

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

@@ -1,90 +1,31 @@
 <template>
   <section class="moment">
     <template v-if="detail.id">
-      <ai-title title="总体概况" class="mar-b8">
-        <template slot="rightBtn">
-          <el-button size="small" type="text" icon="iconfont iconEdit" @click="toEdit(oid)">修改</el-button>
-        </template>
-      </ai-title>
+      <ai-title :title="detail.organizationName||'基本信息'" class="mar-b8"/>
       <ai-wrapper>
         <ai-info-item label="本届换届时间" :value="detail.changeTime"/>
         <ai-info-item label="换届类型" :value="dict.getLabel('organizationChangeType',detail.type)"/>
         <ai-info-item label="下届换届时间" :value="detail.nextChangeTime"/>
         <ai-info-item label="当前届次" :value="detail.sessionTime"/>
       </ai-wrapper>
-      <ai-title title="本届任职" class="mar-b8">
-        <template slot="rightBtn">
-          <el-button size="small" type="text" icon="iconfont iconAdd" @click="dialogJob=true">添加任职人员</el-button>
-        </template>
-      </ai-title>
-      <ai-table
-          class="detail-table__table"
-          :tableData="tableData"
-          :col-configs="colConfigs"
-          :total="totalJob"
-          :current.sync="current"
-          :size.sync="size"
-          @getList="getJobList">
-        <el-table-column slot="options" label="操作" align="center">
-          <template slot-scope="{ row }">
-            <el-button type="text" @click="jobEdit(row.id)">编辑</el-button>
-            <el-button type="text" @click="jobDelete(row.id)">删除</el-button>
-          </template>
-        </el-table-column>
-      </ai-table>
-      <ai-title title="本届候选人" class="mar-b8">
-        <template slot="rightBtn">
-          <el-button size="small" type="text" icon="iconfont iconAdd" @click="dialogCandidate = true">添加候选人</el-button>
-        </template>
-      </ai-title>
-      <ai-table
-          class="detail-table__table"
-          :tableData="tableData"
-          :col-configs="colConfigs"
-          :total="totalJob"
-          :current.sync="current"
-          :size.sync="size"
-          @getList="getJobList">
-        <el-table-column slot="options" label="操作" align="center">
-          <template slot-scope="{ row }">
-            <el-button type="text" @click="jobEdit(row.id)">编辑</el-button>
-            <el-button type="text" @click="jobDelete(row.id)">删除</el-button>
-          </template>
-        </el-table-column>
-      </ai-table>
+      <detail-panel :candidate-list="detail.candidateList" :serve-list="detail.serveList" disabled/>
     </template>
-    <ai-empty>
+    <ai-empty v-else>
       <div>暂无换届信息</div>
       <el-row type="flex" justify="center" class="mar-t8">
-        <ai-highlight content="请点击【@v】完善基础内容后,再进行后续操作" value="换届设置"/>
+        <ai-highlight content="请点击【@v】完善基础内容后,再进行后续操作" value="开始设置"/>
       </el-row>
+      <el-button class="mar-t32" type="primary" @click="$router.push({hash:'#add',query:{oid,new:1}})">开始设置</el-button>
     </ai-empty>
-    <ai-dialog :visible.sync="dialogJob" title="添加本届任职人" width="720px" @closed="jobForm={}" @onConfirm="handleJobForm">
-      <el-form ref="jobForm" size="small" :model="jobForm" :rules="jobRules" label-width="80px">
-        <el-form-item label="职位" prop="job">
-          <el-input v-model="jobForm.job" clearable placeholder="请输入"/>
-        </el-form-item>
-        <el-form-item label="姓名" prop="name">
-          <el-input v-model="jobForm.name" clearable placeholder="请输入"/>
-        </el-form-item>
-      </el-form>
-    </ai-dialog>
-    <ai-dialog :visible.sync="dialogCandidate" title="添加本届候选人" width="720px" @closed="CandFrom={}" @onConfirm="handleCandForm">
-      <el-form ref="CandFrom" size="small" :model="CandFrom" :rules="candRules" label-width="80px">
-        <el-form-item label="职位" prop="job">
-          <el-input v-model="CandFrom.job" clearable placeholder="请输入"/>
-        </el-form-item>
-        <el-form-item label="候选人" prop="name">
-          <el-input type="textarea" rows="5" v-model="CandFrom.name" placeholder="请输入候选人姓名，用逗号隔开"/>
-        </el-form-item>
-      </el-form>
-    </ai-dialog>
   </section>
 </template>
 
 <script>
+import DetailPanel from "./detailPanel";
+
 export default {
   name: "moment",
+  components: {DetailPanel},
   inject: ['permissions', 'instance', 'dict'],
   data() {
     return {
@@ -113,47 +54,31 @@ export default {
         {slot: 'options'},
       ]
     },
-    jobRules() {
-      return {
-        job: [{required: true, message: "请输入职位"}],
-        name: [{required: true, message: "请输入姓名"}],
-      }
-    },
-    candRules() {
-      return {
-        job: [{required: true, message: "请输入职位"}],
-        name: [{required: true, message: "请输入姓名"}],
-      }
-    },
     oid: v => v.$attrs.selected.id
   },
-  created() {
-    this.getList()
+  watch: {
+    oid: {
+      immediate: true,
+      handler() {
+        this.getDetail()
+      }
+    }
   },
   methods: {
-    jobEdit() {
-    },
-    jobDelete() {
-    },
-    getJobList() {
-    },
-    toEdit(id) {
-      this.$router.push({hash: "#add", query: {id}})
-    },
-    getList() {
+    getDetail() {
       const {oid: organizationId} = this
       organizationId && this.instance.post(`/app/apporganizationgeneralelection/queryDetailByOrganizationId`, null, {
         params: {organizationId}
       }).then(res => {
         if (res?.data) {
           this.detail = res.data
+          this.$emit("update:hasConfig")
         }
       })
     },
-    handleJobForm() {
-    },
-    handleCandForm() {
-    },
+  },
+  created() {
+    this.dict.load("organizationChangeType")
   }
 }
 </script>

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 {