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

<template>
  <section class="organizationSetting">
    <ai-detail>
      <ai-title slot="title" :title="pageTitle" isShowBottomBorder isShowBack @onBackClick="cancel(true)"/>
      <template slot="content">
        <el-form ref="SettingForm" :model="form" :rules="formRules" size="small" label-width="150px">
          <ai-card title="基本信息" v-if="!isMakeUp">
            <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 title="当前届次">
            <template #content>
              <div flex class="wrap">
                <el-form-item class="w50" label="本届换届时间" prop="changeTime">
                  <el-date-picker v-model="form.changeTime" @change="getNextChangeTime" value-format="yyyy-MM-dd" placeholder="本届换届时间"/>
                </el-form-item>
                <el-form-item class="w50" label="下届换届时间" prop="nextChangeTime" v-if="!isMakeUp">
                  <el-date-picker disabled v-model="form.nextChangeTime" placeholder="根据换届设置信息自动计算"/>
                </el-form-item>
                <el-form-item label="届次" prop="sessionTime" class="w50">
                  <el-input type="number" v-model="form.sessionTime" placeholder="请输入..."/>
                </el-form-item>
              </div>
              <detail-panel :serve-list.sync="form.serveList" :candidate-list.sync="form.candidateList"/>
            </template>
          </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() {
    return {
      form: {
        type: "",
        userList: [],
        sessionTime: "",
        changeTime: "",
        nextChangeTime: "",
        serveList: [],
        candidateList: []
      },
      formRules: {
        type: [{required: true, message: "请选择换届类型", trigger: "change"}],
        sessionTime: [{required: true, message: "请输入届次", trigger: "blur"}],
        userList: [{required: true, message: "请选择换届提醒人", trigger: "change"}],
        changeTime: [{required: true, message: "请选择本次换届时间", trigger: "blur"}],
        nextChangeTime: [{required: true, message: "请选择下次换届时间", trigger: "change"}]
      },
      chooseUserList: [],
      org: {}
    }
  },
  computed: {
    ...mapState(['user']),
    isMakeUp: v => v.$route.hash == "#makeup",
    pageTitle: v => v.isMakeUp ? "补录换届" : "换届设置",
    oid: v => v.$route.query.oid
  },
  watch: {
    'form.type'() {
      this.getNextChangeTime()
    }
  },
  created() {
    if (!!this.oid) {
      this.org = new this.MODEL.PartyOrg(this.oid)
    }
    !!this.isMakeUp ? this.getSession() : this.getDetail()
  },
  methods: {
    cancel() {
      this.$router.back()
    },
    getNextChangeTime() {
      const {type, changeTime} = this.form, sessionPeriod = {0: 3, 1: 5}[type]
      this.form.nextChangeTime = type && changeTime ? this.$dateFormat(this.$moment(changeTime).add(sessionPeriod, "years")) : ""
    },
    getSession() {
      //根据id获取对应届次信息
      const {id} = this.$route.query
      id && this.instance.post(`/app/apporganizationgeneralelection/queryDetailById`, null, {
        pureBack: true,
        params: {id}
      }).then((res) => {
        if (res?.data && res?.code == '0') {
          this.form = res.data
        }
      })
    },
    getDetail() {
      //获取到当前届次信息
      const {oid: organizationId} = this.$route.query
      this.instance.post(`/app/apporganizationgeneralelection/queryDetailByOrganizationId`, null, {
        pureBack: true,
        params: {organizationId}
      }).then((res) => {
        if (res?.data && res?.code == '0') {
          this.form = res.data
        }
      })
    },
    selectUser(v) {
      this.form.userList = v.map(e => ({
        name: e.name,
        organizationId: e.partyOrgId,
        partyId: e.id,
        phone: e.phone
      }))
    },
    confirm() {
      // 换届设置
      this.$refs.SettingForm.validate(v => {
        if (v) {
          const {id: organizationId, name: organizationName} = this.org
          const action = `/app/${this.isMakeUp ? 'apporganizationgeneralelection' : 'apporganizationchangeconfig'}/${!!this.form.id ? 'update' : 'add'}`
          const addOrMakeup = !this.isMakeUp
          this.instance.post(action, {
            organizationId, organizationName,
            ...this.form, addOrMakeup
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('提交成功')
              this.cancel(true)
            }
          })
        }
      })
    },
  },
}
</script>

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

  .el-date-editor, .el-input {
    width: 100% !important;
  }

  .w50 {
    width: 50%;
  }

  .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>