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

<template>
  <section class="organizationSetting">
    <ai-detail>
      <ai-title slot="title" title="换届设置" isShowBottomBorder isShowBack @onBackClick="cancel(true)"/>
      <template slot="content">
        <el-form ref="SettingForm" :model="form" :rules="formRules" size="small" label-width="150px">
          <ai-card title="基本信息">
            <template #content>
              <div class="tips">
                <i class="el-icon-warning"></i>
                系统将在下次换届时间开始前，对“换届提醒人”进行提醒。提醒方式包括平台消息推送、短信提醒。
              </div>
              <el-form-item label="单位名称">{{ org.name }}</el-form-item>
              <el-form-item label="成立时间">{{ $dateFormat(org.createTime) }}</el-form-item>
              <el-form-item label="换届类型" prop="type">
                <el-radio v-model="form.type" label="0">三年换届</el-radio>
                <el-radio v-model="form.type" label="1">五年换届</el-radio>
              </el-form-item>
              <el-form-item label="换届提醒人" prop="userList">
                <ai-person-select :instance="instance" :customClicker="true" :chooseUserList="chooseUserList"
                                  :url="`/app/appparty/list?partyOrgId=${org.id}`" headerTitle="党员列表"
                                  :isMultiple="true" dialogTitle="选择抄送人" @selectPerson="selectUser" class="aipersonselect">
                  <template name="option" v-slot:option="{ item }">
                    <span class="iconfont iconProlife">{{ item.name }}</span>
                  </template>
                </ai-person-select>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card v-if="isInit" title="届次设置">
            <el-form-item label="本届换届时间：" prop="changeTime">
              <el-date-picker v-model="form.changeTime"/>
            </el-form-item>
            <el-form-item label="下届换届时间：" prop="nextChangeTime">
              <el-date-picker disabled v-model="form.nextChangeTime"/>
            </el-form-item>
            <el-form-item label="届次：" prop="sessionTime">
              <el-input v-model="form.sessionTime" placeholder="请输入..."/>
            </el-form-item>
            <detail-panel :instance="instance" v-model="lists" editable/>
          </ai-card>
        </el-form>
      </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>
import {mapState} from 'vuex'
import DetailPanel from "./detailPanel";

export default {
  name: "organizationSetting",
  components: {DetailPanel},
  inject: ['permissions', 'instance', 'dict'],
  data() {
    let validUser = (rule, value, callback) => {
      if (!value.length) {
        return callback(new Error('请选择换届提醒人'));
      } else {
        callback();
      }
    };
    return {
      form: {
        type: "",
        userList: [],
        sessionTime: "",
        changeTime: "",
        nextChangeTime: ""
      },
      lists: {
        candidateList: [],     //本届候选人
        serveList: []          //本届任职
      },
      formRules: {
        type: [{required: true, message: "请选择选举方式", trigger: "blur"}],
        userList: [{required: true, validator: validUser, trigger: "blur"}],
      },
      chooseUserList: [],
      org: null
    }
  },
  computed: {
    ...mapState(['user']),
    isInit: v => !!v.form.id,
    isNew: v => v.$route.query.new
  },
  created() {
    this.org = new this.MODEL.PartyOrg(this.$route.query.oid)
    !this.isNew && this.getDetail()
  },
  methods: {
    cancel() {
      this.$router.back()
    },
    getDetail() {
      const {oid: organizationId} = this.$route.query
      this.instance.post(`/app/apporganizationchangeconfig/queryDetailByOrganizationId`, null, {
        params: {organizationId}
      }).then((res) => {
        if (res?.data) {
          this.form = res.data
          let {candidateList, serveList} = this.form
          this.lists = {candidateList, serveList}
        }
      })
    },
    selectUser(v) {
      this.form.userList = v
    },
    selectVote(e) {
      this.form.voteUsers = e
    },
    confirm() {
      // 换届设置
      this.$refs.SettingForm.validate(v => {
        if (v) {
          const {id: organizationId, name: organizationName} = this.org
          const action = `/app/apporganizationchangeconfig/${this.isInit ? 'update' : 'add'}`
          this.instance.post(action, {
            addOrMakeup: true,
            ...this.form, organizationId, organizationName
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('提交成功')
              this.cancel(true)
            }
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scope>
.organizationSetting {
  height: 100%;

  ::v-deep .el-date-editor .el-input {
    width: 100%;
  }

  .tips {
    width: 100%;
    border: 1px solid #f82;
    background-color: #fff3e9;
    color: #f82;
    padding: 8px 16px;
    box-sizing: border-box;
    border-radius: 4px;
    margin-bottom: 32px;
    font-size: 13px;
  }
}
</style>