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

<template>
  <ai-list class="moment">
    <template slot="content">
      <ai-bar title="总体概况">
        <template slot="right">
          <el-button size="small" type="text" icon="iconfont iconEdit" @click="toEdit('')" >修改</el-button>
        </template>
      </ai-bar>
      <ai-wrapper>
        <ai-info-item label="本届换届时间" :value="111" />
        <ai-info-item label="换届类型" :value="111" />
        <ai-info-item label="下届换届时间" :value="111" />
        <ai-info-item label="当前届次" :value="111" />
      </ai-wrapper>
      <ai-bar title="本届任职">
        <template slot="right">
          <el-button size="small" type="text" icon="iconfont iconAdd" @click="toAdd('')" >添加任职人员</el-button>
        </template>
      </ai-bar>
      <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-bar title="本届候选人">
        <template slot="right">
          <el-button size="small" type="text" icon="iconfont iconAdd" @click="toAdd('')" >添加候选人</el-button>
        </template>
      </ai-bar>
      <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-list>
</template>

<script>
export default {
  name: "moment",
  props: {
    instance: Function,
    permissions: Function,
    dict: Object,
    selected: Object
  },
  data() {
    return {
      isEdit: false,
      tableData: [],
      totalJob: 0,
      current: 1,
      size: 10,
    }
  },
  computed: {
    colConfigs() {
      return [
        {prop: 'content', label: '职位'},
        {prop: 'content', label: '姓名'},
        {slot: 'options'},
      ]
    }
  },
  methods: {
    jobEdit() {},
    jobDelete() {},
    getJobList() {},
    toEdit() {
      this.$emit('change', {
        type: 'addChange',
        params: {
          id: id || ''
        }
      })
    },
  }
}
</script>

<style lang="scss" scope>
.moment {
  padding-top: 0 !important;
  .btn {}

  ::v-deep .ai-list .ai-list__single .ai-list__content {
    padding: 0;
  }
}
</style>