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

<template>
  <section class="addChange">
    <ai-detail>
      <ai-title slot="title" title="新增换届" isShowBottomBorder isShowBack  @onBackClick="cancel(false)" />
      <template #content>
        <ai-card title="基本信息">
          <template #content>
            <div class="Form">
              <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="right">
                <el-row type="flex">
                  <el-col :span="12">
                    <el-form-item label="换届时间" prop="changeTime">
                      <el-date-picker v-model="form.changeTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width:338px">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="届次" prop="sessionTime">
                      <el-input size="small" :maxlength="30" placeholder="请输入届次" v-model="form.sessionTime"></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="form.serveList.push({name:null,position:null,type:0})" >添加任职人员</el-button>
                  </template>
                </ai-bar>
                <el-table :data="form.serveList" size="mini" border stripe>
                  <el-table-column label="职位" align="center">
                    <template slot-scope="{row}">
                      <el-input class="tableInput" v-model="row.position" clearable placeholder="请输入职位"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="姓名" align="center">
                    <template slot-scope="{row}">
                      <el-input class="tableInput" v-model="row.name" clearable placeholder="请输入姓名" />
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="{$index}">
                      <el-button type="text" @click="handleDelete($index, 'serveList')">删除</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="form.candidateList.push({name:null,position:null,type: 1})" >添加候选人</el-button>
                </template>
              </ai-bar>
              <el-table :data="form.candidateList" size="mini" border stripe>
                <el-table-column label="职位" align="center">
                  <template slot-scope="{row}">
                    <el-input class="tableInput" v-model="row.position" clearable placeholder="请输入职位"/>
                  </template>
                </el-table-column>
                <el-table-column label="候选人" align="center">
                  <template slot-scope="{row}">
                    <el-input class="tableInput" v-model="row.name" clearable placeholder="请输入姓名" />
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="{$index}">
                    <el-button type="text" @click="handleDelete($index, 'candidateList')">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </ai-card>
      </template>
      <template slot="footer" class="footer">
        <el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
        <el-button class="footer-btn" type="primary" @click="confirm()">保存</el-button>
      </template>
    </ai-detail>
  </section>
</template>

<script>
export default {
  name: "addChange",
  props: {
    instance: Function,
    permissions: Function,
    dict: Object,
  },
  data() {
    let validServe = (rule, value, callback) => {
      if (!value.length) {
        return callback(new Error('请填写本届任职人员信息'));
      } else {
        callback();
      }
    };
    let validCandidate = (rule, value, callback) => {
      if (!value.length) {
        return callback(new Error('请填写本届候选人员信息'));
      } else {
        callback();
      }
    };
    return {
      form: {
        addOrMakeup: true,
        changeTime: '',
        sessionTime: '',
        serveList: [],   // 任职人员列表
        candidateList: [], // 候选人员列表
      },
      rules: {
        changeTime: [{ required: true, message: '请选择换届时间', trigger: 'blur' }],
        sessionTime: [{ required: true, message: '请输入届次', trigger: 'blur' }],
        serveList: [{required: true,validator: validServe, trigger: "blur"}],
        candidateList: [{required: true,validator: validCandidate, trigger: "blur"}],
      },
    }
  },
  methods: {
    cancel (isRefresh) {
      this.$emit('change', {
        type: 'List',
        isRefresh: !!isRefresh
      })
    },
    handleDelete(i, type) {
      this.$confirm("确定要删除该数据?").then(() => {
        if(type == 'candidateList') {
          this.form.candidateList.splice(i, 1)
        } else if(type == 'serveList') {
          this.form.serveList.splice(i, 1)
        }
      }).catch(() => 0)
    },
    confirm() {
      this.$refs.form.validate((valid) => {
        if(valid) {
          this.instance.post(`/app/apporganizationgeneralelection/add`, {
            ...this.form
          }).then(res=>{
            if(res.code == 0) {
              console.log(res);
            }
          })
        }
      })
    },
  }
}
</script>

<style lang="scss" scope>
.addChange {
  height: 100%;
}
</style>