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" size="small">
                <el-row type="flex">
                  <el-form-item class="fill" 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-form-item class="fill" label="届次" prop="sessionTime">
                    <el-input size="small" :maxlength="30" placeholder="请输入届次" v-model="form.sessionTime"></el-input>
                  </el-form-item>
                </el-row>
                <ai-title title="本届任职(必填)">
                  <template slot="rightBtn">
                    <el-button size="small" type="text" icon="iconfont iconAdd" @click="form.serveList.push({name:null,position:null,type:0})">添加任职人员
                    </el-button>
                  </template>
                </ai-title>
                <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-title class="mar-t8" title="本届候选人">
                <template slot="rightBtn">
                  <el-button size="small" type="text" icon="iconfont iconAdd" @click="form.candidateList.push({name:null,position:null,type: 1})">添加候选人
                  </el-button>
                </template>
              </ai-title>
              <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() {
    return {
      form: {
        addOrMakeup: true,
        changeTime: '',
        sessionTime: '',
        serveList: [],   // 任职人员列表
        candidateList: [], // 候选人员列表
      },
      rules: {
        changeTime: [{required: true, message: '请选择换届时间', trigger: 'blur'}],
        sessionTime: [{required: true, message: '请输入届次', trigger: 'blur'}],
      },
    }
  },
  methods: {
    // getDetail() {
    //   const {id: organizationId} = this.$route.query
    //   organizationId && this.instance.post(`/app/apporganizationgeneralelection/queryDetailByOrganizationId`, null, {
    //     params: {organizationId}
    //   }).then(res => {
    //     if (res?.data) {
    //       this.form = res.data
    //     }
    //   })
    // },
    cancel() {
      this.$router.push({})
    },
    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) {
              this.$message.success('提交成功')
              this.cancel(true)
            }
          })
        }
      })
    },
  }
}
</script>

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