组织换届重构完成

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>