crm-mobile/pages_common/audit/index.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar :title="config.title">
        <!-- #ifndef MP-WEIXIN -->
        <button class="button white-btn" @click="handleSave">
          保存
        </button>
        <!-- #endif -->
      </wk-nav-bar>

      <view class="container">
        <template v-if="type === 'pass' && auditInfo.examineType === 2">
          <wk-select-list
            v-model="auditType"
            :list="options"
            :max="1"
            class="select-list"
            @change="handleChange" />

          <view v-if="showNext" class="select-user">
            <wk-field-user
              v-model="auditUser"
              :field="userField" />
          </view>
        </template>

        <view :class="{margin: ['cancel', 'refuse'].includes(type)}" class="textarea-box">
          <wk-field-textarea
            v-model.trim="form.remarks"
            :field="textareaField"
            :placeholder="config.placeholder" />
        </view>
      </view>

      <!-- #ifdef MP-WEIXIN -->
      <view class="footer-btn-group">
        <button class="button" @click="handleSave">
          保存
        </button>
      </view>
      <!-- #endif -->
    </view>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        :content="dialogMsg"
        :duration="2000"
        type="warning"
        @confirm="handleConfirm" />
    </uni-popup>
  </view>
</template>

<script>
  import WkFieldUser from '@/components/wk-form/wk-field-user.vue'
  import WkFieldTextarea from '@/components/wk-form/wk-field-textarea.vue'

  export default {
    name: 'AuditIndex',
    components: {
      WkFieldUser,
      WkFieldTextarea
    },
    data() {
      return {
        type: '',
        routerQuery: {},

        options: [
          {label: '结束审核', value: 'over'},
          {label: '选择下一审批人', value: 'next'}
        ],
        auditType: [],

        userField: {
          formType: 'single_user',
          name: '下一审批人',
          value: [],
        },
        textareaField: {
          formType: 'textarea',
          name: '',
          value: '',
        },

        form: {},

        auditInfo: {},
        auditUser: [],
        dialogMsg: ''
      }
    },
    computed: {
      showNext() {
        if (this.$isEmpty(this.auditType)) return false
        return this.auditType[0].value === 'next'
      },
      config() {
        if (this.type === 'pass') {
          return {title: '通过审核', placeholder: '请输入审核意见（选填）'}
        } else if (this.type === 'refuse') {
          return {title: '拒绝审核', placeholder: '请输入审核意见（必填）'}
        } else if (this.type === 'cancel') {
          return {title: '撤回审核', placeholder: '请输入撤回原因（必填）'}
        }
        return {title: '', placeholder: ''}
      },
    },
    onLoad(options) {
      this.routerQuery = options
      this.type = options.type
      this.auditType = [this.options[0]]
      this.auditInfo = getApp().globalData.auditInfo
    },
    onUnload() {
      getApp().globalData.auditInfo = {}
    },
    methods: {
      handleChange(data) {
      // if (data.length > 0) {
      // 	this.auditType = [data[0].value]
      // }
      },
      handleChangeUser(data) {},

      handleSave() {
        if (this.showNext && this.auditUser.length > 0) {
          this.form.nextUserId = this.auditUser[0].userId
        }
        if (['refuse', 'cancel'].includes(this.type) && !this.form.remarks) {
          this.$toast('请先完善审批信息')
          return
        }
        if (this.showNext && !this.form.nextUserId) {
          this.$toast('请先选择下一个审批人')
          return
        }
        const map = {
          pass: 1, // 通过
          refuse: 2, // 拒绝
          cancel: 4, // 撤回
        }
        this.form.status = map[this.type]
        // console.log(this.form)
        this.dialogMsg = this.type === 'cancel' ? '您确定要撤销审批吗' : '您确定要进行审核吗？'
        this.$refs.popup.open()
      },

      handleConfirm() {
        this.$refs.popup.close()
        uni.$emit('save-audit', this.form)
        this.$Router.navigateBack()
      }
    }
  }
</script>

<style scoped lang="scss">
.main-container {
  .container {
    flex: 1;
    padding: 20rpx 0;

    .select-user, .textarea-box {
      padding: 0 30rpx 15rpx;
      background-color: white;
      margin-top: 20rpx;
    }
    .textarea-box {
      padding-top: 15rpx;
    }
    .select-user, .textarea-box.margin {
      margin-top: 0;
    }
  }
}
</style>