任务八--代理设置

<template>
  <div>
    <c-drawer
      :title="$t('frame.header.proxySettings')"
      @close="visible = false"
      :visible="visible"
      :footerButtons="footerButtons"
    >
      <a-spin :spinning="loading">
        <a-form-model :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
          <a-form-model-item :label="$t('frame.proxySettings.person')">
            <a-select
              filterable
              :allowClear="true"
              @change="changePerson"
              show-search
              option-filter-prop="children"
              v-model="form.person"
              :options="personList"
              :placeholder="$t('frame.proxySettings.personPlaceholder')"
            >
            </a-select>
          </a-form-model-item>
          <a-form-model-item :label="$t('frame.proxySettings.date')">
            <a-range-picker
              v-model="form.date"
              :allowClear="false"
              style="width: 100%"
              :disabled="form.person ? false : true"
              :separator="$t('frame.proxySettings.to')"
            />
          </a-form-model-item>
          <a-form-model-item :label="$t('frame.header.proxySettings')">
            <a-radio-group
              v-model="groupValue"
              :default-value="0"
              :disabled="form.person ? false : true"
            >
              <a-radio :value="0" class="plm-radio"
                >{{ $t('frame.proxySettings.plenipotentiary') }}
              </a-radio>
              <a-radio :value="1" class="plm-radio">
                {{ $t('frame.proxySettings.processProxy') }}
              </a-radio>
            </a-radio-group>
            <a-select
              :disabled="form.person ? false : true"
              :allowClear="true"
              mode="multiple"
              :filter-option="filterOption"
              v-model="form.process"
              class="plm-processList"
              :options="processList"
              :placeholder="$t('frame.proxySettings.taskPlaceholder')"
              v-if="groupValue"
            >
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </c-drawer>
  </div>
</template>

<script>
import { getProxy, setProxy, getPerson } from '@common/api/proxy-settings'
import { getFlowTemplates } from '@common/api/wf-designer'
import moment from 'moment'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      footerButtons: [
        {
          name: 'confirm',
          event: () => {
            this.save()
          },
          loading: false
        }
      ],
      loading: false,
      visible: false,
      form: {
        person: undefined,
        process: [],
        date: []
      },
      groupValue: undefined,
      processList: [], //流程下拉列表
      personList: [] //人员下拉列表
    }
  },
  computed: {
    ...mapState('app', ['userInfo'])
  },
  methods: {
    moment,
    changePerson(val) {
      if (!val) {
        this.initForm()
      }
    },
    async initData() {
      let personList
      let processList
      this.footerButtons[0].loading = false
      this.loading = true
      try {
        this.visible = true
        // 判断是否已缓存人员和流程
        if (this.personList.length === 0) {
          personList = await getPerson()
          personList.forEach((item) => {
            let obj = {
              label: item.name,
              value: item.objectid
            }
            if (item.objectid !== this.userInfo.id) {
              this.personList.push(obj)
            }
          })
        }
        if (this.processList.length === 0) {
          processList = await getFlowTemplates()
          processList.forEach((item) => {
            let obj = {
              label: item.name,
              value: item.objid
            }
            this.processList.push(obj)
          })
        }
        getProxy().then((res) => {
          this.loading = false
          if (res.delegator_id) {
            this.form.person = res.delegator_id
            this.form.date = [moment(res.start_date), moment(res.end_date)]
            this.groupValue = res.delegate_type
            this.form.process = res.template_ids
          } else {
            this.initForm()
          }
        })
      } catch (error) {
        this.loading = false
      }
    },
    initForm() {
      const begin = `${moment().format('YYYY-MM-DD')} 00:00:00`
      const end = `${moment().add(7, 'days').format('YYYY-MM-DD')} 23:59:59`
      this.form.date = [moment(begin), moment(end)]
      this.groupValue = 0
      this.form.process = []
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    // 保存
    save() {
      this.footerButtons[0].loading = true
      let req = {
        delegator_id: this.form.person,
        start_date: this.form.date[0].format('YYYY-MM-DD HH:mm:SS'),
        end_date: this.form.date[1].format('YYYY-MM-DD HH:mm:SS'),
        delegate_type: this.groupValue,
        template_ids: this.groupValue == 0 ? [] : this.form.process
      }
      setProxy(req)
        .then(() => {
          this.visible = false
          this.footerButtons[0].loading = false
          this.$tip.success('frame.proxySettings.saveSucceed')
        })
        .catch((err) => {
          console.log(err)
          this.footerButtons[0].loading = false
        })
    }
  }
}
</script>
<style scoped>
.plm-radio {
  display: block;
  height: 30px;
  line-height: 30px;
}
.plm-processList {
  margin-left: 28px;
  width: 90%;
}
</style>