count-pass-app/subpages/approvalform/applyPurchase.vue

<template>
  <view class="apply-credit">
    <view class="title">{{$t('approval.formInfo')}}</view>
    <view class="form-wrap">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="form1" labelWidth='90'>
        <!-- 流程编码 -->
        <u-form-item :label="$t('approval.approvalCode')" borderBottom prop="wfCode">
          <u-input readonly v-model="form.wfCode" border="none" />
        </u-form-item>
        <!-- 流程标题 -->
        <u-form-item :label="$t('approval.approvalTitle')" borderBottom prop="flowTitle">
          <u-input :readonly="isCheckView" v-model="form.flowTitle" border="none" :placeholder="$t('base.common.placeholderI')+$t('approval.approvalTitle')" />
        </u-form-item>
        <!-- 紧急程度 -->
        <u-form-item :label="$t('approval.urgency')" borderBottom prop="flowUrgent" @click="showPopup('flowUrgent')">
          <u-input readonly @change="resetFlow('flowUrgent')" v-model="textForm.flowUrgent" border="none" :placeholder="$t('base.common.placeholderS')+$t('approval.urgency')" />
        </u-form-item>
        <!-- 申请日期 -->
        <u-form-item :label="$t('spare.applyDate')" borderBottom prop="setDate" @click="showSetDateCalendar = true">
          <u-input readonly v-model="form.setDate" border="none" :placeholder="$t('base.common.placeholderS')+$t('spare.applyDate')" />
        </u-form-item>
        <!-- 申请编号 -->
        <u-form-item :label="$t('spare.applyCode')" borderBottom prop="code">
          <u-input readonly v-model="form.code" border="none" :placeholder="$t('base.common.placeholderI')+$t('spare.applyCode')"/>
        </u-form-item>
        <!-- 部门 -->
        <u-form-item :label="$t('userinfo.department')" borderBottom prop="deptId" @click="showPopup('deptId')">
          <u-input readonly v-model="textForm.deptId" border="none" :placeholder="$t('base.common.placeholderS')+$t('userinfo.department')" />
        </u-form-item>
        <!-- 领用人员 -->
        <u-form-item :label="$t('spare.takeUser')" borderBottom prop="userId" @click="showPopup('userId')">
          <u-input readonly v-model="textForm.userId" border="none" :placeholder="$t('base.common.placeholderS')+$t('spare.takeUser')" />
        </u-form-item>
        <!-- 领用明细 -->
        <u-form-item :label="$t('spare.takeDetail')" borderBottom prop="details" @click="toPage" v-if="!isCheckView">
          <u-input readonly border="none" :placeholder="$t('spare.takeDetail')" />
          <u-icon
            slot="right"
            name="arrow-right"
          ></u-icon>
        </u-form-item>
        <!-- 备注 -->
        <u-form-item label="备注" borderBottom prop="remark">
          <u-input :readonly="isCheckView" type="textarea" v-model="form.remark" border="none" placeholder="备注信息" />
        </u-form-item>
      </u-form>
    </view>
    <view class="title">{{$t('spare.takeDetail')}}</view>
    <view class="details-wrap">
      <template v-if="form.details.length">
        <view class="order-card" v-for="(item, index) in form.details" :key="index">
          <view class="order-info">
            <p class="info-line">
              <text class="label">{{$t('spare.spareName')}}:</text>
              <text class="info">
                <template v-if="id">
                  {{`${item.materialCode}_${item.materialName}_${item.materialSpec}_${getLabel(item.materialUnit,unitList)}`}}
                </template>
                <template v-else>
                  {{`${item.code}_${item.name}_${item.spec}_${getLabel(item.unit,unitList)}`}}
                </template>
              </text>
            </p>

            <p class="info-line">
              <text class="label">{{$t('spare.takeNum')}}</text>
              <text class="info">{{item.number}}</text>
            </p>

            <p class="info-line">
              <text class="label">{{$t('spare.price')}}</text>
              <text class="info">{{item.price}}</text>
            </p>
            <p class="info-line">
              <text class="label">{{$t('approval.remark')}}</text>
              <text class="info">{{item.remark}}</text>
            </p>
          </view>
        </view>
      </template>
      <template v-else>
        <u-empty mode="list" text='设置采购申请表' icon="https://cdn.uviewui.com/uview/empty/list.png">
        </u-empty>
      </template>
    </view>
    <view class="title">{{$t('approval.approvalInfo')}}</view>
    <view class="flow-wrap">
      <u-steps direction="column" :current="currentIndex">
        <u-steps-item
        v-for="item,index in flowList"
        :key="index"
        :title="item.title" 
        :desc="item.content+(item.handleOpinion?` (${item.handleOpinion})`:'')">
          <span slot="time" class="time">{{item.time}}</span>
        </u-steps-item>
      </u-steps>
    </view>
    <view class="btn-wrap"  v-if="!isCheckView">
      <button type="primary" color='#4680F9' @click="submit('form1')">{{$t('base.common.submit')}}</button>
    </view>
    <!-- 紧急程度 -->
    <PopupSelect ref="flowUrgent" kind="flowUrgent" :option="flowUrgentOptions" @onConfirm="onConfirm"/>
    <!-- 部门 -->
    <PopupSelect ref="deptId" kind="deptId" :option="deptOption" @onConfirm="onConfirm"/>
    <!-- 领用人员 -->
    <PopupSelect ref="userId" kind="userId" :option="userIdOptions" @onConfirm="onConfirm"/>
    <!-- 申请日期 -->
    <u-calendar 
    color="#4680F9" 
    round='25' 
    :show="showSetDateCalendar" 
    @confirm="onSetDateConfirm" 
    @close="showSetDateCalendar=false">
    </u-calendar>
    <u-toast ref="loadingToast" />
  </view>
</template>

<script>
import PopupSelect from '../../components/popup-select/index'
import dayjs from 'dayjs'
import { getLabel } from '../../utils/util'
import {request} from '../../utils/request'
import {
  getApprovalFlow,
  BillNumber,
  getApprovalInfo,
  createApproval,
  getApprovalFlowInfo
} from "../../api/approval"
import { getCode } from "../../api/receivable"
import { fetchList,depLtist } from '../../api/stock'
export default {
  components:{
    PopupSelect
  },
  data(){
    return {
      id:'',
      getLabel,
      showSetDateCalendar:false,
      isCheckView:false,
      enCode:'applyPurchase',
      currentIndex:0,
      flowList:[],
      flow:{},
      form:{
        flowId: '',
        id: '',
        wfCode: '',
        billNo: '',
        flowTitle: '',
        flowUrgent: 1,
        setDate:dayjs().format('YYYY-MM-DD'), //登记日期
        code:'',
        deptId:'',
        userId:'',
        remark:undefined, //备注
        details:[],
      },
      textForm:{
        flowUrgent:this.$t('approval.ordinary'),//紧急程度
        deptId: '', 
        userId:'',
      },
      rules: {
        setDate:[{ required: true, message: this.$t('base.common.placeholderS')+this.$t('spare.applyDate'), trigger: "change" }],
        deptId:[{ required: true, message: this.$t('base.common.placeholderS')+this.$t('userinfo.department') }],
        code:[{ required: true, message: this.$t('base.common.placeholderI')+this.$t('spare.applyCode'), trigger: "change" }],
        details:[{
          required: true,
          message: "申请明细不能为空",
          validator:(rule,value,callback)=>{
            if(this.form.details.length){
              callback()
            }else{
              callback(new Error("申请明细不能为空"))
            }
          }
        }],
        flowTitle: [
          { required: true, message: this.$t('base.common.placeholderI')+this.$t('approval.approvalTitle')},
        ],
        flowUrgent: [
          { required: true, message: this.$t('base.common.placeholderS')+this.$t('approval.urgency')},
        ],
      },
      formcondition:{
        flowUrgent: false, //紧急程度
      },
      flowUrgentOptions:[
        {text:this.$t('approval.ordinary'),value:1},
        {text:this.$t('approval.urgent'),value:2},
        {text:this.$t('approval.important'),value:3},
      ],
      deptOption:[
        {text:this.$t('order.noData'),value:null}
      ],
      userIdOptions:[
        {text:this.$t('order.noData'),value:null}
      ],
      unitList:[],
    }
  },
  onLoad(options) {
    this.form.flowId = options.flowId
    if(options.id){
      this.isCheckView = true
      this.id = options.id
      this.checkInfo()
    }else{
      this.userInfo = uni.getStorageSync("userInfo");
      this.getOptions()
      this.getApprovalFlow()
    }
    
  },
  methods:{
    //查看
    checkInfo(){
      let that = this
      this.changeDept()
      this.getOptions()
      setTimeout(()=>{
        that.getApprovalFlowInfo()
      },100)
    },
    //提交审批
    submit(ref){
      let _this=this
      this.$refs[ref].validate().then(() => {
        let key = this.enCode[0].toUpperCase()+this.enCode.slice(1)
        this.$refs.loadingToast.show({
          type:"loading",
          message: _this.$t('base.common.loading'),
          duration:'100000',
				})
        this.form.dtoList=this.form.details;
        createApproval(key,this.form).then(res=>{
          if(res.data.code == 200){
            this.$refs.loadingToast.hide()
            uni.showModal({
              title: _this.$t('settings.tips'),
              content: _this.$t('approval.creditApprovalSuccess'),
              showCancel: false,
              success: ({ confirm, cancel }) => {
                if(confirm){
                  uni.navigateBack({ delta: 1 })
                  this.form.dtoList=[];
                }
              }
            })
          }else{
            this.$refs.loadingToast.hide()
            // uni.showModal({
            //   title: _this.$t('settings.tips'),
            //   content: res.data.msg || _this.$t('approval.creditApprovalFail'),
            //   showCancel: false,
            // })
          }
        })
      })
    },
    toPage(){
      uni.navigateTo({ url: `/subpages/approval/order?encode=applyTake` })
    },
    //获取详情
    getApprovalFlowInfo(){
      let encode = this.enCode[0].toUpperCase()+this.enCode.slice(1)
      getApprovalInfo(encode,this.id).then(res=>{
        if(res.data.code == 200){
          this.form = res.data.data
          let data = res.data.data
            this.textForm.flowUrgent=data.flowUrgent==1?this.$t('approval.ordinary'):(data.flowUrgent == 2?this.$t('approval.urgent'):this.$t('approval.important')) //紧急程度
            this.deptOption.forEach(item=>{
              if(item.value == data.deptId){
                this.textForm.deptId = item.text
              }
            })
            this.userIdOptions.forEach(item=>{
              if(item.value == data.userId){
                this.textForm.userId = item.text
              }
            })
            console.log(this.userIdOptions,data.userId);
        }
      })
      getApprovalFlowInfo(this.id).then(res=>{
         if(res.data.code == 200){
          let flow = JSON.parse(res.data.data.flowTaskInfo.flowTemplateJson)
          this.flow = flow
          this.forFlowObj(flow)
          this.flowList.forEach((item,index)=>{
            res.data.data.flowTaskOperatorRecordList.forEach(i=>{
              if(i.nodeCode == item.nodeId){
                item.time = i.handleTime || ''
                item.handleOpinion = i.handleOpinion || ''
                this.currentIndex = index
              }
            })
            res.data.data.flowTaskNodeList.forEach(i=>{
              if(i.nodeCode == item.nodeId){
                item.content = i.userName || item.content
              }
            })
          })
        }
      })
    },
    //显示选择
    showPopup(refs){
      if(this.isCheckView){
        return
      }
      this.$refs[refs].showPicker=true
    },
    //获取选项
    getOptions(){
      //流程编码
      if(this.id){

      }else{
        BillNumber(this.enCode,dayjs().format('YYYY-MM-DD')).then(res => {
          if(res.data.code==0){
            this.form.wfCode = res.data.msg
          }
        })
        //订单编码
        getCode(dayjs().format('YYYY-MM-DD')).then(res=>{
          if(res.data.code == 0){
            this.form.code = res.data.data
          }
        })
      }
      //获取单位
      request({
        url:'/admin/dict/type/spare_unit',
        method:'get',
      })
      .then(res=>{
        if(res.data.code == 0){
          this.unitList = res.data.data
        }
      })
      //获取部门
      depLtist().then(res=>{
        let arr=res.data.data.map(item=>{
          return {
            text:item.name,
            value:item.deptId
          }
        })
        if(arr.length){
          arr.unshift({text:this.$t('order.notSelected'),value:null})
        }else{
          arr.unshift({text:this.$t('order.noData'),value:null})
        }
        this.deptOption=arr
      })
    },
    //根据条件重新设置流程
    resetFlow(value){
      if(this.isCheckView){
        return
      }
      if(this.formcondition[value]){
        this.flowList=[]
        if(this.form[value]){
          this.forFlowObj(this.flow)
        }
      }
    },
    //切换选择部门
    changeDept(id){
      let data = {
        size:50,
        current:1,
        deptId:id,
      }
      fetchList(data).then(res=>{
        let arr = res.data.data.records.map(j=>{
          return {
            text:j.name,
            value:j.userId,
          }
        })
        console.log(arr);
        if(arr.length){
          arr.unshift({text:this.$t('order.notSelected'),value:null})
        }else{
          arr.unshift({text:this.$t('order.noData'),value:null})
        }
        this.userIdOptions = arr
      })
    },
    //确定选择
    onConfirm(value,kind){
      if(kind == 'deptId' && value.value != this.form[kind]){
        this.changeDept(value.value)
      }
      if(value.value){
        this.form[kind]=value.value
        this.textForm[kind]=value.text
      }else{
        this.form[kind]=''
        this.textForm[kind]=''
      }
      
    },
    //获取审批流程
    getApprovalFlow(){
      getApprovalFlow(this.form.flowId).then(res=>{
        if(res.data.code == 200){
          this.form.flowTitle=this.userInfo.username+'的'+res.data.data.fullName
          let flow = JSON.parse(res.data.data.flowTemplateJson)
          this.flow = flow
          console.log(this.flow);
          this.forFlowObj(flow)
        }
      })
    },
    //选择申请日期
    onSetDateConfirm(date){
      this.form.setDate = dayjs(date).format('YYYY-MM-DD');
      this.showSetDateCalendar = false;
    },
    //循环对象
    forFlowObj(flow){
      this.flowList.push(
        {
          title:flow.properties.title,
          content:flow.content,
          nodeId:flow.nodeId,
          time:'',
          handleOpinion:"",
        }
      )
      if(flow.conditionNodes && flow.conditionNodes.length){
        flow.conditionNodes.forEach(item=>{
          let math = item.properties.conditions
          if(this.eval(math)){
            this.flowList.push(
              {
                title:item.properties.title,
                content:item.content,
                nodeId:item.nodeId,
                time:'',
                handleOpinion:"",
              }
            )
            this.forFlowObj(item.childNode)
          }
        })
      }
      if(flow.childNode){
        this.forFlowObj(flow.childNode)
      }
    },
    //计算方法
    eval(conditions){
      let boo=false
      let booList = []
      conditions.forEach((item,index)=>{
        switch (item.symbol) {
          case '>=':
           booList.push( this.form[item.field] >= Number(item.filedValue))
           if(index != conditions.length-1){
             booList.push(item.logic)
           }
          break;
          case '>':
           booList.push(this.form[item.field] > Number(item.filedValue))
           if(index != conditions.length-1){
             booList.push(item.logic)
           }
          break;
          case '==':
           booList.push(this.form[item.field] == Number(item.filedValue))
           if(index != conditions.length-1){
             booList.push(item.logic)
           }
          break;
          case '<=':
           booList.push(this.form[item.field] <= Number(item.filedValue))
           if(index != conditions.length-1){
             booList.push(item.logic)
           }
          break;
          case '<':
           booList.push(this.form[item.field] < Number(item.filedValue))
           if(index != conditions.length-1){
             booList.push(item.logic)
           }
          break;
          case '<>':
           booList.push(this.form[item.field] != Number(item.filedValue))
           if(index != conditions.length-1){
             booList.push(item.logic)
           }
          break;
        }
        this.formcondition[item.field] = true
      })
      let booList2=[]
      if(booList.length>1){
        booList.forEach((item,index)=>{
          if(index%2 != 0){
            switch (item) {
              case "&&":
                booList2.push(booList[index-1] && booList[index+1])
              break;
            }
          }else{
            if(booList[index+1] !="&&" && booList[index-1] !="&&"){
              booList2.push(item)
            }
          }
        })
      }else{
        boo=booList[0]
      }
      if(booList2.length>1){
        booList2.forEach(item=>{
          if(item){
            boo = true
          }
        })
      }else if(booList2.length==1){
        boo = booList2[0]
      }
      return boo
    },
  }
}
</script>

<style lang="scss" scoped>
@import '../../common/css/apply.scss';
@import '../../common/css/approval.scss';
</style>