迁移

project/biaopin/AppOrganizationChange/components/detailPanel.vue

@@ -0,0 +1,157 @@
+<template>
+  <section class="detailPanel">
+    <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="200px" align="center" v-if="!disabled">
+        <div slot-scope="{row,$index}" class="table-operation">
+          <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>
+    <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="200px" align="center" v-if="!disabled">
+        <div slot-scope="{row,$index}" class="table-operation">
+          <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>
+    <ai-dialog :visible.sync="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">
+          <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>
+    </ai-dialog>
+  </section>
+
+</template>
+
+<script>
+export default {
+  name: "detailPanel",
+  props: {
+    candidateList: {default: () => []},
+    serveList: {default: () => []},
+    disabled: Boolean
+  },
+  data() {
+    return {
+      visible: false,
+      dialog: {
+        title: "",
+        name: "",
+        changeTime: ""
+      }
+    }
+  },
+  computed: {
+    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.visible = true
+    },
+    submitAdd() {
+      this.$refs.editListItemForm.validate(v => {
+        if (v) {
+          this.handleData(this.currentList.list, list => {
+            if (this.dialog.rowIndex > -1) {
+              list.splice(this.dialog.rowIndex, 1, this.dialog)
+            } else list.push(this.dialog)
+          })
+          this.visible = false
+        }
+      })
+    },
+    handleData(prop, cb) {
+      const list = this.$copy(this.$props[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;
+  }
+
+  .el-table + .itemTitle {
+    margin-top: 24px;
+  }
+
+  :deep( .table-header ){
+    box-sizing: border-box;
+    border-right: 1px solid #d0d4dc !important;
+
+    .cell {
+      padding-left: 32px;
+    }
+
+    &.is-center > .cell {
+      padding-left: 10px !important;
+    }
+  }
+
+  :deep( .table-cell ){
+    height: 44px;
+    color: #333;
+
+    .cell {
+      padding-left: 32px;
+    }
+
+    &.is-center > .cell {
+      padding-left: 10px !important;
+    }
+  }
+}
+</style>