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

<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>