ehsd-mobile/src/views/processApproval/processDtl.vue

<template>
  <div class="process">
    <van-nav-bar
      :title="route.query.processType == 20 ? '流程详情' : '流程审批'"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <div>
      <component
        ref="makeDom"
        :queryData="queryData.data"
        :is="
          componentObj[route.query.flowKey]
            ? componentObj[route.query.flowKey].component
            : SendSubscribe
        "
      ></component>
    </div>
    <div class="btn-warp" :class="footerMoreType ? 'open-more' : ''">
      <!-- <div class="more-btn" @click="footerMoreType = !footerMoreType">
				更多 <van-icon name="arrow-up" v-if="!footerMoreType" /> <van-icon name="arrow-down" v-else />
			</div> -->
      <div class="foot-btn-warp" v-if="route.query.processType != 20">
        <div
          class="for-btn"
          v-for="(i, index) in approvalRecordData.buttonInfoList"
          :key="i.type"
          v-show="index == 0"
          @click="handleSubmit(i.type)"
        >
          <div>
            <i class="iconfont" :class="iconObj[i.type]"></i>
          </div>
          {{ i.name }}
        </div>
        <div class="for-btn" @click="footerMoreType = !footerMoreType">
          <div>
            <i class="iconfont icon-icomx_message"></i>
          </div>
          审批意见
        </div>
        <div
          class="for-btn"
          @click="footerMoreBtnType = !footerMoreBtnType"
          v-if="approvalRecordData.buttonInfoList.length < 1"
        >
          <div>
            <i class="iconfont icon-iconx__caidan1"></i>
          </div>
          更多
        </div>
        <div
          class="agree-btn"
          @click="nextFn"
          v-if="componentObj[route.query.flowKey].tabsNum"
        >
          下一步
        </div>
        <div class="next-btn" @click="handleSubmit(1)">同意</div>
      </div>
    </div>
    <van-action-sheet
      v-model:show="footerMoreBtnType"
      title="更多操作"
      class="more-modal"
    >
      <div
        class="for-btn-more"
        v-for="(i, index) in approvalRecordData.buttonInfoList"
        :key="i.type"
        v-show="index != 0"
        @click="handleSubmit(i.type)"
      >
        <span style="margin-right: 20px">
          <i class="iconfont" :class="iconObj[i.type]"></i>
        </span>
        {{ i.name }}
      </div>
      <div style="height: 50px">1</div>
    </van-action-sheet>
    <van-action-sheet
      v-model:show="footerMoreType"
      title="审批记录"
      class="more-modal"
    >
      <div class="card">
        <van-steps direction="vertical" :active="stepsNum" class="common-steps">
          <van-step v-for="(i, index) in recordList" :key="i.nodeId">
            <div class="label">
              <span class="name">{{ i.processedUser }}</span>
              <span class="tip">{{ i.nodeName }}</span>
              <span
                class="state"
                :class="
                  index == stepsNum
                    ? 'cl-yl'
                    : index < stepsNum
                    ? 'cl-blue'
                    : ''
                "
              >
                {{ i.nodeName }}
              </span>
            </div>
            <div class="content">审批意见：{{ i.remark }}</div>
            <p>{{ i.processedDate }}</p>
          </van-step>
        </van-steps>
      </div>
      <div v-if="route.query.processType != 20">
        <div style="padding: 0 12px">
          <van-field
            v-model="flowForm.remark"
            rows="3"
            autosize
            type="textarea"
            maxlength="400"
            placeholder="请输入审批意见"
            show-word-limit
            style="backround: #f1f1f1"
          />
        </div>
        <div class="load-btn-box">
          <van-button
            size="small"
            type="primary"
            plain
            round
            v-for="i in approvalRecordData.buttonInfoList"
            :key="i.type"
            v-show="i.type != 1"
            @click="handleSubmit(i.type)"
            >{{ i.name }}
          </van-button>
        </div>
        <div class="content">
          <div class="foot-btn-warp">
            <div class="agree-btn" @click="handleSubmit(1)">同意</div>
            <div class="next-btn" @click="nextFn">下一步</div>
          </div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import SendSubscribe from "./components/SendSubscribe";
import SendFunds from "./components/SendFunds";
import PriceSheet from "./components/PriceSheet";
import Contract from "./components/Contract";
import EhsdContract from "./components/EhsdContract";
import EhsdContractChange from "./components/EhsdContractChange";

import SendPurchase from "./components/SendPurchase";
import SendPurchasePayment from "./components/SendPurchasePayment";
import ContractAlteration from "./components/ContractAlteration";
import { showSuccessToast, showFailToast } from "vant";
const route = useRoute();
const proxy = getCurrentInstance().proxy;
// const onClickLeft = () => proxy.$router.push(componentObj.value[route.query.flowKey].backUrl)
const onClickLeft = () => proxy.$router.go(-1);
const message = ref("");
const onClickRight = () => {
  proxy.$router.push("/main/working");
};
const iconObj = ref({
  2: "icon-icomx_shanchu",
  3: "icon-icomx_sent",
  4: "icon-iconx_tuihfqr",
  5: "icon-iconm_shanchu",
});
const makeDom = ref(null);
let stepsNum = ref(0);
let queryData = reactive({
  data: {},
});
let footerMoreBtnType = ref(false);
let footerMoreType = ref(false);
const flowForm = reactive({
  flowKey: "",
  tenantType: "",
  handleUserId: "",
  remark: "",
  data: {},
});
let recordList = ref([]);
const approvalRecordData = ref({
  buttonInfoList: [],
});

const getAuxiliaryData = (data) => {
  auxiliaryData.value = data;
};

let componentObj = ref({
  subscribe_flow: {
    title: "申购",
    component: SendSubscribe,
    backUrl: "/main/subscribe",
    tabsNum: 2,
  },
  account_request_funds_flow: {
    title: "请款",
    component: SendFunds,
    backUrl: "/main/funds",
    tabsNum: 3,
  },
  sale_quotation_flow: {
    title: "报价单",
    component: PriceSheet,
    backUrl: "/main/priceSheet",
    tabsNum: 4,
  },
  contract_flow: {
    title: "销售合同",
    component: EhsdContract,
    backUrl: "/main/contract",
    tabsNum: 5,
  },
  purchase_flow: {
    title: "采购",
    component: SendPurchase,
    backUrl: "/main/procureList",
  },
  pay_flow: {
    title: "采购付款",
    component: SendPurchasePayment,
    backUrl: "/main/purchasePayment",
  },
  contract_update_flow: {
    title: "销售合同变更",
    component: EhsdContractChange,
    backUrl: "/main/contract",
    tabsNum: 5,
  },
});

let dialogVisible = ref(false);
//判断是否有下一节点处理人
const handleResult = (res) => {
  if (res !== null && res.success) {
    skipPage();
  } else {
    dialogVisible.value = true;
    nextHandleUser.value = res.userList;
  }
};
const skipPage = () => {
  onClickLeft();
  // proxy.$router({
  // 	path:
  // 		route.query.processType === 10
  // 			? '/main/processApproval'
  // 			: componentObj.value[route.query.flowKey].backUrl,
  // })
};

const handleSelectUser = () => {
  if (!flowForm.handleUserId) {
    return ElMessage({
      message: "请选择下一节点处理人！",
      type: "info",
    });
  }
  handleSubmit();
};
const handleSubmit = async (_type) => {
  const childrenData = await makeDom.value.handleSubmit();
  if (childrenData) {
    if (route.query.processType == 10 || route.query.processType == 30) {
      proxy
        .post("/flowProcess/jump", {
          ...flowForm,
          data: childrenData,
          handleType: _type,
          version: route.query.version,
          flowId: route.query.id,
        })
        .then((res) => {
          // handleResult(res.data)
          proxy.$router.go(-1);
        });
      if (_type && _type == 1) {
        proxy
          .post("/flowExample/setStartData", {
            exampleId: route.query.id,
            startData: childrenData,
          })
          .then();
      }
      return;
    } else {
      proxy
        .post("/flowProcess/initiate", {
          ...flowForm,
          data: childrenData,
        })
        .then((res) => {
          // handleResult(res.data)
          proxy.$router.go(-1);
        });
    }
    proxy.$router.go(-1);
  }
};

const nextFn = () => {
  makeDom.value.tabsChange();
};

const getRecords = (_id) => {
  if (_id) {
    proxy
      .post("/flowExample/getApprovalRecord", {
        id: _id,
      })
      .then((res) => {
        for (let i = 0; i < res.data.recordList.length; i++) {
          const element = res.data.recordList[i];
          if (element.status === 2) {
            stepsNum.value = i;
            break;
          }
        }
        recordList.value = res.data.recordList;
        queryData.data.recordList = res.data.recordList;
        approvalRecordData.value = res.data;
        //删除type为1的按钮
        approvalRecordData.value.buttonInfoList =
          approvalRecordData.value.buttonInfoList.filter(
            (item) => item.type != 1
          );
      });
  } else {
    proxy
      .post("/flowExample/getFlowNode", {
        flowKey: flowForm.flowKey,
      })
      .then((res) => {
        recordList.value = res.data;
        stepsNum.value = 0;
      });
  }
};
onMounted(async () => {
  //processType 10 为审批 20为查看 30回退发起 无为发起
  if (!componentObj.value[route.query.flowKey]) {
    showSuccessToast("代码未配置此流程！");
    return;
  }
  if (
    route.query.processType == 10 ||
    route.query.processType == 20 ||
    route.query.processType == 30
  ) {
    await proxy
      .post("/flowProcess/getStartData", { flowId: route.query.id })
      .then((res) => {
        queryData.data = { ...res.data };
      });
  } else {
    queryData.data = { ...route.query };
  }
  flowForm.flowKey = route.query.flowKey;
  getRecords(route.query.id);
});
</script>
<style>
.van-step--vertical .van-step__circle-container {
  top: 25px;
}

.van-step--vertical .van-step__line {
  top: 23px;
}
</style>
<style lang="scss">
.process {
  .more-modal {
    .van-field {
      border: none;
      background: #f1f1f1;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }
  .for-btn-more {
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: flex;
    width: 100vw;
    font-size: 16px;
    padding: 0 12px;
    font-size: 12px;
  }
  .load-btn-box {
    height: 50px;
    text-align: center;
    padding: 9px;
    box-sizing: border-box;
    margin-bottom: 50px;
  }

  .foot-btn-warp {
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: flex;
    width: 100vw;
    font-size: 16px;
    .for-btn {
      flex: 1;
      background: #fff;
      color: #999999;
      font-size: 12px;
      text-align: center;
      height: 50px;
      line-height: 15px;
      padding: 10px 0;
      box-sizing: border-box;
      i {
        font-size: 24px;
      }
    }
    .agree-btn {
      flex: 1;
      background: #eaf0ff;
      color: #0084ff;
    }

    .next-btn {
      flex: 1;
      background: #0084ff;
      color: #fff;
    }
  }

  .btn-warp {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 10002;
    button {
      width: 48%;
    }

    .content {
      height: 0;
      overflow: hidden;
      transition: all 0.3s ease;
      background: #fff;
      padding: 0 12px;
    }

    .more-btn {
      width: 100%;
      background: #fff;
      color: #999999;
      font-size: 14px;
      text-align: center;
      height: 50px;
      line-height: 50px;
    }
  }

  .open-more {
    .content {
      height: 170px;
    }
  }

  padding-bottom: 60px;

  .card {
    background: #fff;
    padding: 0 12px;
    margin-top: 10px;
  }

  .textarea {
    .van-field {
      border: none;
      background: #f1f1f1;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }

  .more-btn {
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    color: #0084ff;
    text-align: center;
  }
}
</style>