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

<template>
  <ai-list class="addChange">
    <template #title>
      <ai-title title="基本信息" isShowBottomBorder isShowBack  @onBackClick="cancel(false)" />
    </template>
        <template #content>
      <div class="Form" style="padding: 0 200px;">
        <el-form ref="form" :model="form" label-width="100px" label-position="right">
          <ai-bar title="基本信息"></ai-bar>
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="换届时间" prop="data" :rules="[{ required: true, message: '请选择换届时间', trigger: 'blur' }]">
                <el-input size="small" :maxlength="30" placeholder="请输入大屏项目名称" v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="届次" prop="noun" :rules="[{ required: true, message: '请输入届次', trigger: 'blur' }]">
                <el-input size="small" :maxlength="30" placeholder="请输入届次" v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <ai-bar title="本届任职(必填)">
            <template slot="right">
              <el-button size="small" type="text" icon="iconfont iconAdd" @click="toEdit('')" >添加任职人员</el-button>
            </template>
          </ai-bar>
          <el-table :data="form.ladderRule" size="mini" border stripe>
            <el-table-column label="查看人数(人)" align="center">
              <template slot-scope="{row}">
                <el-input class="tableInput" v-model.number="row.viewCount" clearable placeholder="请输入"/>
              </template>
            </el-table-column>
            <el-table-column label="获得积分(分)" align="center">
              <template slot-scope="{row}">
                <el-input class="tableInput" v-model="row.integral" clearable placeholder="请输入" type="number"
                          @keyup.native="row.integral=checkIntegral(row.integral)"/>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="{$index}">
                <el-button type="text" @click="handleDelete($index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>

        <!-- <ai-bar title="本届任职(必填)">
          <template slot="right">
            <el-button size="small" type="text" icon="iconfont iconAdd" @click="toEdit('')" >添加任职人员</el-button>
          </template>
        </ai-bar>
        <ai-table
          class="detail-table__table"
          :tableData="tableDataJob"
          :col-configs="colConfigsJob"
          :total="job.total"
          :current.sync="job.current"
          :size.sync="job.size"
            >
          <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="toEdit('')" >添加候选人</el-button>
          </template>
        </ai-bar>
        <ai-table
          class="detail-table__table"
          :tableData="tableDataPerson"
          :col-configs="colConfigsPerson"
          :total="person.total"
          :current.sync="person.current"
          :size.sync="person.size"
          >
          <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> -->
      </div>
    </template>
  </ai-list>
</template>

<script>
export default {
  name: "addChange",
  props: {
    instance: Function,
    permissions: Function,
    dict: Object,
  },
  data() {
    return {
      form: {

      },
      tableDataJob: [],
      tableDataPerson: [],
      totalJob: '',
      job: {
        total: 0,
        current: 1,
        size: 10,
      },
      person: {
        total: 0,
        current: 1,
        size: 10,
      }
    }
  },
  computed: {
    colConfigsJob() {
      return [
        {prop: 'content', label: '职位'},
        {prop: 'content', label: '姓名'},
        {slot: 'options'},
      ]
    },
    colConfigsPerson() {
      return [
        {prop: 'content', label: '职位'},
        {prop: 'content', label: '候选人'},
        {slot: 'options'},
      ]
    },
    formRules() {
      return {
        // corpId: [{required: true, message: "请输入CorpId"}],
      }
    }
  },
  methods: {
    cancel (isRefresh) {
      this.$emit('change', {
        type: 'List',
        isRefresh: !!isRefresh
      })
    }
  }
}
</script>

<style lang="scss" scope>
.addChange {}
</style>