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

<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-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>
    </template>
    <ai-empty>暂无换届信息,请完善基础内容后,再进行后续操作<br/><br/><br/>
      <el-button size="small" type="primary" @click="toEdit(oid)">开始设置</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>
export default {
  name: "moment",
  props: {
    instance: Function,
    permissions: Function,
    dict: Object,
    selected: Object,
  },
  data() {
    return {
      detail: {},
      tableData: [],
      totalJob: 0,
      current: 1,
      size: 10,
      dialogJob: false,
      dialogCandidate: false,
      jobForm: {
        job: '',
        name: '',
      },
      CandFrom: {
        job: '',
        name: '',
      },
    }
  },
  computed: {
    colConfigs() {
      return [
        {prop: 'content', label: '职位'},
        {prop: 'content', label: '姓名'},
        {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.selected.id
  },
  mounted() {
    this.getList(this.selected.id)
  },
  methods: {
    jobEdit() {
    },
    jobDelete() {
    },
    getJobList() {
    },
    toEdit(id) {
      this.$router.push({hash: "#add", query: {id}})
    },
    getList(id) {
      this.instance.post(`/app/apporganizationgeneralelection/queryDetailByOrganizationId?organizationId=${id}`).then(res => {
        if (res?.data) {
          this.detail = res.data
        }
      })
    },
    handleJobForm() {
    },
    handleCandForm() {
    },
  }
}
</script>

<style lang="scss" scope>
.moment {
  padding-top: 0 !important;
  background-color: #FFF !important;
}
</style>