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

<template>
  <section class="organizationSetting">
    <!-- <ai-detail class="add" v-if="id && !isEdit">
      <template slot="title">
        <ai-title title="换届选举详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
      </template>
      <template slot="content">
        <ai-card title="基本信息">
          <template #right>
            <span style="color:#2266FF;cursor: pointer;font-size: 12px;" class="iconfont iconEdit" v-if="isEdit==false" @click="isEdit = true">修改</span>
          </template>
          <template #content v-if="isEdit == false">
            <ai-wrapper>
              <ai-info-item label="标题" :value="info.title"></ai-info-item>
              <ai-info-item label="投票说明" :value="info.votingInstructions"></ai-info-item>
              <ai-info-item label="单位名称" :value="info.organizationName"></ai-info-item>
              <ai-info-item label="选举方式">
                {{ info.electionMethod==0? '等额':'差额'}}
                <el-tooltip class="item" effect="dark" content="差额选举：候选人数多于应选人数的选举方式；
                  等额选举：候选人数与应选人数相等的选举方式。" placement="top">
                  <i class="el-icon-info" style="margin-right: 8px"></i>
                </el-tooltip>
              </ai-info-item>
              <ai-info-item label="应选人数" :value="info.candidatesNumber"></ai-info-item>
              <ai-info-item label="投票日期" :value="info.votingDate"></ai-info-item>
              <ai-info-item label="候选人" isLine>
                <span v-for="(item,index) in candidateUsersList" :key="index">
                  {{ item }}
                  <span v-if="index < candidateUsersList.length - 1">、</span>
                </span>
              </ai-info-item>
              <ai-info-item label="投票人" isLine :value="info.voteUsers">
                <span v-for="(item,index) in voteUsersList" :key="index">
                  {{ item }}
                  <span v-if="index < voteUsersList.length - 1">、</span>
                </span>
              </ai-info-item>
            </ai-wrapper>
          </template>
        </ai-card>
      </template>
    </ai-detail> -->
    <ai-detail>
      <ai-title slot="title" title="换届设置" isShowBottomBorder isShowBack @onBackClick="cancel(true)"/>
      <template slot="content">
        <ai-card title="基本信息">
          <template #content>
            <div class="tips">
              <i class="el-icon-warning"></i>
              系统将在下次换届时间开始前，对“换届提醒人”进行提醒。提醒方式包括平台消息推送、短信提醒。
            </div>
            <div class="add-form">
              <el-form ref="form" :model="form" :rules="formRules" size="small" label-width="150px">
                <el-form-item label="单位名称">
                  <div>{{ user.info.organizationName }}</div>
                </el-form-item>

                <el-form-item label="成立时间">
                  <div>{{ createTime }}</div>
                </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="organizationName">
                  <el-input size="small" disabled placeholder="请选择所属党组织" v-model="form.organizationName">
                    <template slot="append">
                      <ai-party :instance="instance" size="small" :value="form.organizationId" @origin="handlePartyOrgSelect"/>
                    </template>
                  </el-input>
                </el-form-item>

                <el-form-item label="换届提醒人" prop="userList">
                  <ai-person-select :instance="instance" :customClicker="true" :chooseUserList="chooseUserList"
                                    :url="`/app/appparty/list?partyOrgId=${form.organizationId}`" 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>
              </el-form>
            </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>
import {mapState} from 'vuex'

export default {
  name: "organizationSetting",
  props: {
    instance: Function,
    dict: Object,
  },

  data() {
    let validUser = (rule, value, callback) => {
      if (!value.length) {
        return callback(new Error('请选择换届提醒人'));
      } else {
        callback();
      }
    };
    return {
      form: {
        addOrMakeup: true,
        organizationId: '',
        organizationName: '',
        type: '0',
        userList: [],
      },
      formRules: {
        type: [{required: true, message: "请选择选举方式", trigger: "blur"}],
        organizationName: [{required: true, message: "请选择党组织", trigger: "blur"}],
        userList: [{required: true, validator: validUser, trigger: "blur"}],
      },
      chooseUserList: [],
      createTime: '',
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    this.getDetail()
    this.getOrganization()
  },
  methods: {
    cancel() {
      this.$router.back()
    },
    // 查询组织关系
    getOrganization() {
      this.instance.post(`/app/partyOrganization/queryPartyOrganizationServiceList`).then(res => {
        if (res?.data) {
          let data = res.data.filter(item => item.id == this.user.info.organizationId)
          this.createTime = data[0].createTime
        }
      })
    },
    getDetail() {
      this.instance.post(`/app/apporganizationchangeconfig/queryDetailByOrganizationId?organizationId=${this.user.info.organizationId}`).then((res) => {
        if (res?.data) {
          // this.chooseCandidateList = res.data.candidateUsers
          // this.chooseVoteList = res.data.voteUsers
          console.log(res);
        }
      })
    },
    selectUser(v) {
      this.form.userList = v
    },
    selectVote(e) {
      this.form.voteUsers = e
    },
    handlePartyOrgSelect(v) {
      if (v) {
        this.form.organizationId = v[0]?.id
        this.form.organizationName = v[0]?.name

      }
    },
    confirm() {
      // 换届设置
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.instance.post(`/app/apporganizationchangeconfig/update`, {
            ...this.form
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('提交成功')
              this.cancel(true)
            }
          }).catch((err) => {
            console.log(err);
          })
        }
      })
    },
  },
}
</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>