From a9351c58d349dac95e9af1ce876cd2a0245095ec Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Mon, 24 Oct 2022 16:13:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B9=B3=E6=98=8C=E5=85=9A=E5=BB=BA=E5=85=88?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=8C=82=E8=B5=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/model/PartyOrg.js                  |   3 +-
 .../AppOrganizationChange.vue                 |   5 +-
 .../AppOrganizationChange/components/List.vue |   2 +-
 .../components/addChange.vue                  |  14 +-
 .../components/detailPanel.vue                | 190 ++++++++++++++++++
 .../components/history.vue                    |  71 ++++---
 .../components/organizationSetting.vue        |  97 +++++----
 7 files changed, 305 insertions(+), 77 deletions(-)
 create mode 100644 project/pingchang/apps/AppOrganizationChange/components/detailPanel.vue

diff --git a/components/model/PartyOrg.js b/components/model/PartyOrg.js
index c853d293..7b3ee15f 100644
--- a/components/model/PartyOrg.js
+++ b/components/model/PartyOrg.js
@@ -1,4 +1,5 @@
 import http from "dvcp-ui/lib/js/request";
+import Vue from "vue"
 
 export default class PartyOrg {
   constructor(id) {
@@ -9,7 +10,7 @@ export default class PartyOrg {
 
   init() {
     return PartyOrg.getInfo(this.id).then(data => {
-      Object.entries(data).map(([k, v]) => this[k] = v)
+      Object.entries(data).map(([k, v]) => Vue.set(this, k, v))
     })
   }
 
diff --git a/project/pingchang/apps/AppOrganizationChange/AppOrganizationChange.vue b/project/pingchang/apps/AppOrganizationChange/AppOrganizationChange.vue
index 5f104e68..e4eaa79e 100644
--- a/project/pingchang/apps/AppOrganizationChange/AppOrganizationChange.vue
+++ b/project/pingchang/apps/AppOrganizationChange/AppOrganizationChange.vue
@@ -33,9 +33,10 @@ export default {
   computed: {
     ...mapState(['user']),
     currentPage() {
-      if (this.$route.hash == "#add") {
+      const {hash} = this.$route
+      if (["#add","#makeup"].includes(hash)) {
         return addChange
-      } else if (this.$route.hash == "#setting") {
+      } else if (hash == "#setting") {
         return organizationSetting
       } else return List
     }
diff --git a/project/pingchang/apps/AppOrganizationChange/components/List.vue b/project/pingchang/apps/AppOrganizationChange/components/List.vue
index 78f43c61..c0f30387 100644
--- a/project/pingchang/apps/AppOrganizationChange/components/List.vue
+++ b/project/pingchang/apps/AppOrganizationChange/components/List.vue
@@ -70,7 +70,7 @@ export default {
       this.$router.push({hash: "#add", query: {id}})
     },
     toSetting(oid) {
-      this.$router.push({hash: "#setting", query: {oid}})
+      this.$router.push({hash: "#setting", query: {oid, new: 1}})
     }
   },
   created() {
diff --git a/project/pingchang/apps/AppOrganizationChange/components/addChange.vue b/project/pingchang/apps/AppOrganizationChange/components/addChange.vue
index c67d6d17..f330b046 100644
--- a/project/pingchang/apps/AppOrganizationChange/components/addChange.vue
+++ b/project/pingchang/apps/AppOrganizationChange/components/addChange.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="addChange">
     <ai-detail>
-      <ai-title slot="title" title="新增换届" isShowBottomBorder isShowBack @onBackClick="cancel(false)"/>
+      <ai-title slot="title" :title="pageTitle" isShowBottomBorder isShowBack @onBackClick="cancel(false)"/>
       <template #content>
         <ai-card title="基本信息">
           <template #content>
@@ -83,10 +83,13 @@ export default {
     permissions: Function,
     dict: Object,
   },
+  computed: {
+    isMakeUp: v => v.$route.hash == "#makeup",
+    pageTitle: v => v.isMakeUp ? "补录换届" : "新增换届"
+  },
   data() {
     return {
       form: {
-        addOrMakeup: true,
         changeTime: '',
         sessionTime: '',
         serveList: [],   // 任职人员列表
@@ -109,8 +112,8 @@ export default {
     //     }
     //   })
     // },
-    cancel() {
-      this.$router.push({})
+    cancel(refresh) {
+      refresh ? this.$router.push({}) : this.$router.back()
     },
     handleDelete(i, type) {
       this.$confirm("确定要删除该数据?").then(() => {
@@ -124,8 +127,9 @@ export default {
     confirm() {
       this.$refs.form.validate((valid) => {
         if (valid) {
+          const addOrMakeup = !this.isMakeUp
           this.instance.post(`/app/apporganizationgeneralelection/add`, {
-            ...this.form
+            ...this.form, addOrMakeup
           }).then(res => {
             if (res.code == 0) {
               this.$message.success('提交成功')
diff --git a/project/pingchang/apps/AppOrganizationChange/components/detailPanel.vue b/project/pingchang/apps/AppOrganizationChange/components/detailPanel.vue
new file mode 100644
index 00000000..4a8eb6d9
--- /dev/null
+++ b/project/pingchang/apps/AppOrganizationChange/components/detailPanel.vue
@@ -0,0 +1,190 @@
+<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">
+      <el-table-column label="职位" width="180px" prop="position"/>
+      <el-table-column label="姓名" prop="name"/>
+      <el-table-column label="操作" width="120px" align="center">
+        <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)"/>
+        </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">
+      <el-table-column label="职位" width="180px" prop="position"/>
+      <el-table-column label="候选人" prop="name"/>
+      <el-table-column label="操作" width="120px" align="center">
+        <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)"/>
+        </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()">
+      <el-form ref="editListItemForm" size="small" :model="dialog" :rules="rules" label-width="100px"
+               :validate-on-rule-change="false">
+        <el-form-item label="职位：" prop="position">
+          <el-input v-model="dialog.position" placeholder="请输入..."/>
+        </el-form-item>
+        <el-form-item :label="currentList.name+'：'" prop="name">
+          <el-input v-if="dialog.type==0" v-model="dialog.name" placeholder="请输入..."/>
+          <div v-else>
+            <el-input type="textarea" :rows="3" v-model="dialog.name" placeholder="请输入..."/>
+            <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>
+  </section>
+
+</template>
+
+<script>
+  export default {
+    name: "detailPanel",
+    model: {
+      prop: "value",
+      event: "change"
+    },
+    props: {
+      value: Object,
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+      editable: {type: Boolean, default: false}
+    },
+    data() {
+      return {
+        dialog: {
+          visible: false,
+          title: "",
+          name: "",
+          changeTime: ""
+        },
+        serveList: [],
+        candidateList: []
+      }
+    },
+    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"}],
+        }
+      },
+    },
+    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) {
+            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)
+        }
+      })
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .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;
+      }
+
+      &.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>
diff --git a/project/pingchang/apps/AppOrganizationChange/components/history.vue b/project/pingchang/apps/AppOrganizationChange/components/history.vue
index 027f1bc7..847a982b 100644
--- a/project/pingchang/apps/AppOrganizationChange/components/history.vue
+++ b/project/pingchang/apps/AppOrganizationChange/components/history.vue
@@ -3,26 +3,18 @@
 
     <ai-search-bar>
       <template #left>
-        <el-button type="primary" icon="iconfont iconEdit" @click="fillupAdd('')">补录</el-button>
+        <el-button type="primary" icon="iconfont iconEdit" @click="$router.push({hash:'#makeup',query:{}})">补录</el-button>
       </template>
       <template #right>
         <el-input size="small" placeholder="请输入届次" v-model="search.name" clearable
                   v-throttle="() => {page.current = 1, getList()}"/>
-        <el-button icon="iconfont iconResetting" @click="reset('')">重置</el-button>
       </template>
     </ai-search-bar>
-    <ai-table
-        class="detail-table__table"
-        :tableData="tableData"
-        :col-configs="colConfigs"
-        :total="page.total"
-        :current.sync="current"
-        :size.sync="size"
-        @getList="getJobList">
+    <ai-table :tableData="tableData" :col-configs="colConfigs" :isShowPagination="false" @getList="getList">
       <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>
+          <el-button type="text" @click="handleEdit(row.id)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
         </template>
       </el-table-column>
     </ai-table>
@@ -32,41 +24,60 @@
 <script>
 export default {
   name: "history",
-  props: {
-    instance: Function,
-    permissions: Function,
-    dict: Object,
+  inject: {
+    permissions: {},
+    instance: {},
+    dict: {}
   },
   data() {
     return {
       search: {
         name: '',
       },
-      page: {
-        current: 1,
-        size: 10,
-        total: 0
-      }
+      tableData: []
     }
   },
   computed: {
     colConfigs() {
       return [
-        {prop: '', label: '届次', align: 'left'},
-        {prop: '', label: '换届日期', align: 'center'},
-        {prop: '', label: '操作时间', align: 'center'},
-        {prop: '', label: '操作人', align: 'center'},
+        {prop: 'sessionTime', label: '届次', align: 'left'},
+        {prop: 'changeTime', label: '换届日期', align: 'center'},
+        {prop: 'createTime', label: '操作时间', align: 'center'},
+        {prop: 'createUserName', label: '操作人', align: 'center'},
         {slot: 'options'},
       ]
-    }
+    },
+    oid: v => v.$attrs.selected.id
   },
   methods: {
-    fillupAdd() {},
-    reset() {},
-    getList() {}
+    handleEdit(id) {
+      this.$router.push({hash: "#makeup", query: {id}})
+    },
+    handleDelete(id) {
+      this.$confirm("是否要删除该条届次记录?").then(() => {
+        this.instance.post("/app/apporganizationgeneralelection/delete", null, {
+          params: {id}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("删除成功!")
+            this.getList()
+          }
+        })
+      }).catch(() => 0)
+    },
+    getList() {
+      const {oid: organizationId} = this
+      this.instance.post("/app/apporganizationgeneralelection/list", null, {
+        params: {...this.search, organizationId}
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data
+        }
+      })
+    }
   },
   created() {
-
+    this.getList()
   },
 }
 </script>
diff --git a/project/pingchang/apps/AppOrganizationChange/components/organizationSetting.vue b/project/pingchang/apps/AppOrganizationChange/components/organizationSetting.vue
index a90aaf42..6849e716 100644
--- a/project/pingchang/apps/AppOrganizationChange/components/organizationSetting.vue
+++ b/project/pingchang/apps/AppOrganizationChange/components/organizationSetting.vue
@@ -3,33 +3,43 @@
     <ai-detail>
       <ai-title slot="title" title="换届设置" isShowBottomBorder isShowBack @onBackClick="cancel(true)"/>
       <template slot="content">
-        <ai-card title="基本信息">
-          <template #content>
-            <div class="tips">
-              <i class="el-icon-warning"></i>
-              系统将在下次换届时间开始前，对“换届提醒人”进行提醒。提醒方式包括平台消息推送、短信提醒。
-            </div>
-            <div class="add-form">
-              <el-form ref="form" :model="form" :rules="formRules" size="small" label-width="150px">
-                <el-form-item label="组织名称">{{ org.name }}</el-form-item>
-                <el-form-item label="成立时间">{{ $dateFormat(org.createTime) }}</el-form-item>
-                <el-form-item label="换届类型" prop="type">
-                  <el-radio v-model="form.type" label="0">三年换届</el-radio>
-                  <el-radio v-model="form.type" label="1">五年换届</el-radio>
-                </el-form-item>
-                <el-form-item label="换届提醒人" prop="userList">
-                  <ai-person-select :instance="instance" :customClicker="true" :chooseUserList="chooseUserList"
-                                    :url="`/app/appparty/list?partyOrgId=${form.organizationId}`" headerTitle="党员列表"
-                                    :isMultiple="true" dialogTitle="选择抄送人" @selectPerson="selectUser" class="aipersonselect">
-                    <template name="option" v-slot:option="{ item }">
-                      <span class="iconfont iconProlife">{{ item.name }}</span>
-                    </template>
-                  </ai-person-select>
-                </el-form-item>
-              </el-form>
-            </div>
-          </template>
-        </ai-card>
+        <el-form ref="SettingForm" :model="form" :rules="formRules" size="small" label-width="150px">
+          <ai-card title="基本信息">
+            <template #content>
+              <div class="tips">
+                <i class="el-icon-warning"></i>
+                系统将在下次换届时间开始前，对“换届提醒人”进行提醒。提醒方式包括平台消息推送、短信提醒。
+              </div>
+              <el-form-item label="单位名称">{{ org.name }}</el-form-item>
+              <el-form-item label="成立时间">{{ $dateFormat(org.createTime) }}</el-form-item>
+              <el-form-item label="换届类型" prop="type">
+                <el-radio v-model="form.type" label="0">三年换届</el-radio>
+                <el-radio v-model="form.type" label="1">五年换届</el-radio>
+              </el-form-item>
+              <el-form-item label="换届提醒人" prop="userList">
+                <ai-person-select :instance="instance" :customClicker="true" :chooseUserList="chooseUserList"
+                                  :url="`/app/appparty/list?partyOrgId=${org.id}`" headerTitle="党员列表"
+                                  :isMultiple="true" dialogTitle="选择抄送人" @selectPerson="selectUser" class="aipersonselect">
+                  <template name="option" v-slot:option="{ item }">
+                    <span class="iconfont iconProlife">{{ item.name }}</span>
+                  </template>
+                </ai-person-select>
+              </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>
+        </el-form>
       </template>
       <template slot="footer" class="footer">
         <el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
@@ -42,9 +52,11 @@
 
 <script>
 import {mapState} from 'vuex'
+import DetailPanel from "./detailPanel";
 
 export default {
   name: "organizationSetting",
+  components: {DetailPanel},
   inject: ['permissions', 'instance', 'dict'],
   data() {
     let validUser = (rule, value, callback) => {
@@ -56,27 +68,32 @@ export default {
     };
     return {
       form: {
-        addOrMakeup: true,
-        organizationId: '',
-        organizationName: '',
-        type: '0',
+        type: "",
         userList: [],
+        sessionTime: "",
+        changeTime: "",
+        nextChangeTime: ""
+      },
+      lists: {
+        candidateList: [],     //本届候选人
+        serveList: []          //本届任职
       },
       formRules: {
         type: [{required: true, message: "请选择选举方式", trigger: "blur"}],
-        organizationName: [{required: true, message: "请选择党组织", trigger: "blur"}],
         userList: [{required: true, validator: validUser, trigger: "blur"}],
       },
       chooseUserList: [],
+      org: null
     }
   },
   computed: {
     ...mapState(['user']),
-    org: v => new v.MODEL.PartyOrg(v.$route.query.oid)
+    isInit: v => !!v.form.id,
+    isNew: v => v.$route.query.new
   },
   created() {
-    this.form.organizationId = this.$route.query.oid
-    this.getDetail()
+    this.org = new this.MODEL.PartyOrg(this.$route.query.oid)
+    !this.isNew && this.getDetail()
   },
   methods: {
     cancel() {
@@ -89,6 +106,8 @@ export default {
       }).then((res) => {
         if (res?.data) {
           this.form = res.data
+          let {candidateList, serveList} = this.form
+          this.lists = {candidateList, serveList}
         }
       })
     },
@@ -100,10 +119,12 @@ export default {
     },
     confirm() {
       // 换届设置
-      this.$refs.form.validate((valid) => {
-        if (valid) {
+      this.$refs.SettingForm.validate(v => {
+        if (v) {
           const {id: organizationId, name: organizationName} = this.org
-          this.instance.post(`/app/apporganizationchangeconfig/update`, {
+          const action = `/app/apporganizationchangeconfig/${this.isInit ? 'update' : 'add'}`
+          this.instance.post(action, {
+            addOrMakeup: true,
             ...this.form, organizationId, organizationName
           }).then(res => {
             if (res.code == 0) {