增加采购审批功能

.env.development

@@ -7,9 +7,9 @@ VUE_APP_ENV = 'development'
 # 若依管理系统/生产环境
 VUE_APP_BASE_API = '/test-api'
 
-VUE_APP_WS_API = ':20001/test-api'
+VUE_APP_WS_API = ':9899/test-api'
 
-VUE_APP_IP = '121.37.194.75'
+VUE_APP_IP = '139.9.102.170'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VUE_APP_COMPRESS = gzip

.env.prod

@@ -12,4 +12,4 @@ VUE_APP_COMPRESS = gzip
 
 VUE_APP_WS_API = ':9898/prod-api'
 
-VUE_APP_IP = '139.159.251.109'
+VUE_APP_IP = '139.9.102.170'

.env.staging

@@ -13,6 +13,6 @@ VUE_APP_BASE_API = '/test-api'
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VUE_APP_COMPRESS = gzip
 
-VUE_APP_WS_API = ':20001/test-api'
+VUE_APP_WS_API = ':9899/test-api'
 
-VUE_APP_IP = '121.37.194.75'
+VUE_APP_IP = '139.9.102.170'

src/components/common-list.vue

@@ -17,13 +17,13 @@
           @click="listCk(i)"
         >
           <div v-for="j in config" :key="j.prop" style="display: flex">
-            <span>{{ j.label }}：</span>
-            <span v-if="j.type && j.type === 'slot'">
+            <span style="width: 90px">{{ j.label }}：</span>
+            <span v-if="j.type && j.type === 'slot'" style="flex: 1">
               <slot :name="j.slotName" :row="i">
                 {{ j.slotName }}插槽占位符
               </slot>
             </span>
-            <span v-else>
+            <span v-else style="flex: 1">
               {{ i[j.prop] }}
             </span>
           </div>

src/views/processApproval/components/WdlyPurchase.vue

@@ -0,0 +1,474 @@
+<template>
+  <div class="form">
+    <van-tabs v-model:active="active">
+      <van-tab title="采购信息" />
+      <van-tab title="采购明细" />
+      <van-tab title="其他费用" />
+
+      <div class="common-process-card" v-show="active == 0">
+        <testForm
+          v-model="formData.data"
+          :formOption="formOption"
+          :formConfig="formConfig"
+          :rules="rules"
+          ref="formDom1"
+        >
+        </testForm>
+      </div>
+      <div class="common-process-card" v-show="active == 1">
+        <testForm
+          v-model="formData.data"
+          :formOption="formOptionOne"
+          :formConfig="formConfigOne"
+          :rules="rules"
+          ref="formDom2"
+        >
+        </testForm>
+      </div>
+      <div class="common-process-card" v-show="active == 2">
+        <testForm
+          v-model="formData.data"
+          :formOption="formOptionTwo"
+          :formConfig="formConfigTwo"
+          :rules="rules"
+          ref="formDom3"
+        >
+        </testForm>
+      </div>
+    </van-tabs>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  getCurrentInstance,
+  onMounted,
+  defineProps,
+  defineExpose,
+  watch,
+  reactive,
+  toRefs,
+} from "vue";
+import { useRoute } from "vue-router";
+import testForm from "@/components/testForm/index.vue";
+import { getUserInfo } from "@/utils/auth";
+import { showFailToast } from "vant";
+
+// 接收父组件的传值
+const props = defineProps({
+  queryData: Object,
+});
+const refProps = toRefs(props);
+const proxy = getCurrentInstance().proxy;
+const route = useRoute();
+const active = ref(0);
+const tabsChange = () => {
+  active.value++;
+};
+const formData = reactive({
+  data: {
+    purchaseDetailList: [],
+  },
+});
+const formDom1 = ref(null);
+const formDom2 = ref(null);
+const formDom3 = ref(null);
+
+const formOption = reactive({
+  readonly: false,
+  disabled: false,
+  labelAlign: "top",
+  scroll: true,
+  labelWidth: "62pk",
+  hiddenSubmitBtn: true,
+});
+const formOptionOne = reactive({
+  readonly: false,
+  disabled: false,
+  labelAlign: "top",
+  scroll: true,
+  labelWidth: "62pk",
+  hiddenSubmitBtn: true,
+  btnConfig: {
+    isNeed: false,
+    prop: "purchaseDetailList",
+    plain: true,
+    listTitle: "采购明细",
+    listConfig: [
+      {
+        type: "input",
+        label: "物品编码",
+        prop: "productCustomCode",
+        itemType: "text",
+        readonly: true,
+      },
+      {
+        type: "input",
+        label: "物品名称",
+        prop: "productName",
+        itemType: "text",
+        readonly: true,
+      },
+      {
+        type: "picker",
+        label: "单位",
+        prop: "productUnit",
+        itemType: "onePicker",
+        showPicker: false,
+        fieldNames: {
+          text: "label",
+          value: "value",
+        },
+        data: [],
+      },
+      {
+        type: "input",
+        label: "申购数量",
+        prop: "subscribeCount",
+        itemType: "text",
+        readonly: true,
+      },
+      {
+        type: "input",
+        label: "已采购数量",
+        prop: "purchaseCount",
+        itemType: "text",
+        readonly: true,
+      },
+      {
+        type: "input",
+        label: "本次采购",
+        prop: "count",
+        itemType: "text",
+        readonly: true,
+      },
+      {
+        type: "input",
+        label: "单价",
+        prop: "price",
+        itemType: "text",
+        readonly: true,
+      },
+      {
+        type: "input",
+        label: "金额",
+        prop: "amount",
+        itemType: "text",
+        readonly: true,
+      },
+    ],
+    clickFn: () => {},
+    deleteFn: (index) => {},
+  },
+});
+const formOptionTwo = reactive({
+  readonly: false,
+  disabled: false,
+  labelAlign: "top",
+  scroll: true,
+  labelWidth: "62pk",
+  hiddenSubmitBtn: true,
+  btnConfig: {
+    isNeed: false,
+    prop: "otherFeeList",
+    plain: true,
+    listTitle: "采购明细",
+    listConfig: [
+      {
+        type: "input",
+        label: "费用名称",
+        prop: "name",
+        itemType: "text",
+        readonly: true,
+      },
+
+      {
+        type: "input",
+        label: "金额",
+        prop: "price",
+        itemType: "text",
+        readonly: true,
+      },
+      {
+        type: "input",
+        label: "备注",
+        prop: "remark",
+        itemType: "textarea",
+        readonly: true,
+      },
+    ],
+    clickFn: () => {},
+    deleteFn: (index) => {},
+  },
+});
+const formConfig = reactive([
+  {
+    type: "title",
+    title: "基本信息",
+  },
+  {
+    type: "input",
+    label: "采购部门",
+    prop: "deptName",
+    itemType: "text",
+    readonly: true,
+  },
+  {
+    type: "input",
+    label: "采购人",
+    prop: "purchaseName",
+    itemType: "text",
+    readonly: true,
+  },
+  {
+    type: "picker",
+    label: "采购时间",
+    prop: "purchaseTime",
+    itemType: "datePickerTime",
+    readonly: true,
+  },
+  {
+    type: "title",
+    title: "合同信息",
+  },
+  {
+    type: "picker",
+    label: "供应商",
+    prop: "supplyId",
+    itemType: "onePicker",
+    showPicker: false,
+    fieldNames: {
+      text: "name",
+      value: "id",
+    },
+    data: [],
+  },
+  {
+    type: "picker",
+    label: "是否合同",
+    prop: "isAgreement",
+    itemType: "onePicker",
+    showPicker: false,
+    fieldNames: {
+      text: "label",
+      value: "value",
+    },
+    data: [
+      {
+        label: "是",
+        value: "1",
+      },
+      {
+        label: "否",
+        value: "0",
+      },
+    ],
+  },
+  {
+    type: "picker",
+    label: "付款方式",
+    prop: "paymentMethod",
+    itemType: "onePicker",
+    showPicker: false,
+    fieldNames: {
+      text: "label",
+      value: "value",
+    },
+    data: [],
+  },
+  {
+    type: "input",
+    label: "采购单号",
+    prop: "contractCode",
+    itemType: "text",
+    readonly: true,
+  },
+  {
+    type: "input",
+    label: "采购总金额",
+    prop: "amount",
+    itemType: "text",
+    readonly: true,
+  },
+  {
+    type: "title",
+    title: "其他信息",
+  },
+  {
+    type: "input",
+    label: "采购说明",
+    prop: "purchaseContent",
+    itemType: "textarea",
+    readonly: true,
+  },
+]);
+const formConfigOne = reactive([
+  {
+    type: "input",
+    label: "明细金额小计",
+    prop: "productAmount",
+    itemType: "text",
+    readonly: true,
+  },
+]);
+const formConfigTwo = reactive([
+  {
+    type: "input",
+    label: "运费",
+    prop: "freight",
+    itemType: "text",
+    readonly: true,
+  },
+  {
+    type: "input",
+    label: "优惠",
+    prop: "preferential",
+    itemType: "text",
+    readonly: true,
+  },
+  {
+    type: "input",
+    label: "其他费用小计",
+    prop: "otherAmount",
+    itemType: "text",
+    readonly: true,
+  },
+]);
+const rules = {
+  contractType: [
+    { required: true, message: proxy.t("contract.contractTypeMsg") },
+  ],
+  contractTemplateId: [
+    { required: true, message: proxy.t("contract.contractTemplateIdMsg") },
+  ],
+  sellCorporationId: [
+    { required: true, message: proxy.t("contract.sellCorporationIdMsg") },
+  ],
+  buyCorporationId: [
+    { required: true, message: proxy.t("contract.buyCorporationIdMsg") },
+  ],
+  sellCity: [{ required: true, message: proxy.t("contract.cityMsg") }],
+  countryCity: [{ required: true, message: proxy.t("contract.cityMsg") }],
+  sellAddress: [{ required: true, message: proxy.t("contract.addressMsg") }],
+  buyAddress: [{ required: true, message: proxy.t("contract.addressMsg") }],
+  sellContactName: [
+    { required: true, message: proxy.t("contract.contactNameMsg") },
+  ],
+};
+const productUnit = ref([]);
+const fundsPaymentMethod = ref([]);
+const supplierData = ref([]);
+const getDict = () => {
+  let query = {
+    pageNum: 1,
+    pageSize: 999,
+    tenantId: getUserInfo().tenantId,
+  };
+  proxy
+    .post("/supplierInfo/page", { pageNum: 1, pageSize: 9999 })
+    .then((res) => {
+      supplierData.value = res.data.rows;
+      formConfig[5].data = supplierData.value;
+    });
+  proxy
+    .post("/dictTenantData/page", {
+      ...query,
+      dictCode: "unit",
+    })
+    .then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        productUnit.value = res.data.rows.map((item) => {
+          return {
+            label: item.dictValue,
+            value: item.dictKey,
+          };
+        });
+        formOptionOne.btnConfig.listConfig[2].data = productUnit.value;
+      }
+    });
+  proxy
+    .post("/dictTenantData/page", {
+      ...query,
+      dictCode: "funds_payment_method",
+    })
+    .then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        fundsPaymentMethod.value = res.data.rows.map((item) => {
+          return {
+            label: item.dictValue,
+            value: item.dictKey,
+          };
+        });
+        formConfig[7].data = fundsPaymentMethod.value;
+      }
+    });
+};
+getDict();
+
+const handleSubmit = async () => {
+  const flag = true;
+  if (flag) {
+    return formData.data;
+  }
+};
+let status = ref(true);
+defineExpose({
+  handleSubmit,
+  tabsChange,
+});
+onMounted(() => {
+  let val = route.query.businessId;
+  proxy
+    .post("/purchase/detail", {
+      id: val,
+    })
+    .then((res) => {
+      let jsonData = {};
+      if (res.data.victoriatouristJson) {
+        jsonData = JSON.parse(res.data.victoriatouristJson);
+      }
+      for (const key in res.data) {
+        formData.data[key] = res.data[key];
+      }
+      for (const key in jsonData) {
+        formData.data[key] = jsonData[key];
+      }
+      // formData.data = { ...res.data, ...jsonData };
+      formData.data.purchaseDetailList = formData.data.purchaseDetailList.map(
+        (x) => ({
+          ...x,
+          subscribeCount: x.subscribeQuantity,
+          purchaseCount: x.purchaseQuantity,
+        })
+      );
+      formData.data.productAmount = formData.data.purchaseDetailList.reduce(
+        (val, x) => (val += x.price * x.count),
+        0
+      );
+      formData.data.productAmount = formData.data.productAmount.toFixed(2);
+      formData.data.otherAmount = formData.data.otherFeeList.reduce(
+        (val, x) => (val += Number(x.price)),
+        0
+      );
+      formData.data.otherAmount = formData.data.otherAmount.toFixed(2);
+      console.log(formDom1.value.formDataShowLabelOne, "qwdq");
+      formDom1.value.formDataShowLabelOne();
+      formDom2.value.formDataListShowLabelOne();
+    });
+
+  // proxy.post("/fileInfo/getList", { businessIdList: [val] }).then((fileObj) => {
+  //   formData.data.fileList = fileObj[val] || [];
+  //   if (formData.data.fileList && formData.data.fileList.length > 0) {
+  //     fileList.value = formData.data.fileList.map((item) => {
+  //       return {
+  //         raw: item,
+  //         name: item.fileName,
+  //         url: item.fileUrl,
+  //       };
+  //     });
+  //   }
+  // });
+});
+</script>
+<style lang="scss" scoped></style>

src/views/processApproval/index.vue

@@ -1,159 +1,160 @@
 <template>
-	<van-nav-bar
-		:title="$t('processApproval.name')"
-		left-text=""
-		left-arrow
-		@click-left="onClickLeft"
-		@click-right="onClickRight"
-	>
-	</van-nav-bar>
-	<van-search
-		v-model="req.keyword"
-		:placeholder="$t('common.pleaseEnterKeywords')"
-		@search="onRefresh"
-	/>
-	<van-pull-refresh v-model="loading" @refresh="onRefresh">
-		<div class="list">
-			<van-list
-				v-model:loading="loading"
-				:finished="finished"
-				:finished-text="$t('common.noMore')"
-				@load="onLoad"
-				style="margin-bottom: 60px"
-			>
-				<commonList
-					:data="listData"
-					@onClick="toDtl"
-					:config="listConfig"
-				></commonList>
-			</van-list>
-		</div>
-	</van-pull-refresh>
+  <van-nav-bar
+    :title="$t('processApproval.name')"
+    left-text=""
+    left-arrow
+    @click-left="onClickLeft"
+    @click-right="onClickRight"
+  >
+  </van-nav-bar>
+  <van-search
+    v-model="req.keyword"
+    :placeholder="$t('common.pleaseEnterKeywords')"
+    @search="onRefresh"
+  />
+  <van-pull-refresh v-model="loading" @refresh="onRefresh">
+    <div class="list">
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        :finished-text="$t('common.noMore')"
+        @load="onLoad"
+        style="margin-bottom: 60px"
+      >
+        <commonList
+          :data="listData"
+          @onClick="toDtl"
+          :config="listConfig"
+        ></commonList>
+      </van-list>
+    </div>
+  </van-pull-refresh>
 </template>
 <script setup>
-import { ref, getCurrentInstance, onMounted } from 'vue'
-import commonList from '@/components/common-list.vue'
-import { useRoute } from 'vue-router'
-import { getUserInfo } from '@/utils/auth'
+import { ref, getCurrentInstance, onMounted } from "vue";
+import commonList from "@/components/common-list.vue";
+import { useRoute } from "vue-router";
+import { getUserInfo } from "@/utils/auth";
 
-const loading = ref(false)
-const route = useRoute()
+const loading = ref(false);
+const route = useRoute();
 const req = ref({
-	pageNum: 1,
-	keyword: null,
-	definition: '1',
-	tenantId: getUserInfo().tenantId,
-})
-const finished = ref(false)
-const proxy = getCurrentInstance().proxy
-const listData = ref([])
+  pageNum: 1,
+  keyword: null,
+  definition: "1",
+  tenantId: getUserInfo().tenantId,
+});
+const finished = ref(false);
+const proxy = getCurrentInstance().proxy;
+const listData = ref([]);
 const listConfig = ref([
-	{
-		label: proxy.t('processApproval.processType'),
-		prop: 'flowName',
-	},
-	{
-		label: proxy.t('processApproval.initiator'),
-		prop: 'createUserName',
-	},
-	{
-		label: proxy.t('processApproval.processTitle'),
-		prop: 'title',
-	},
-])
+  {
+    label: proxy.t("processApproval.processType"),
+    prop: "flowName",
+  },
+  {
+    label: proxy.t("processApproval.initiator"),
+    prop: "createUserName",
+  },
+  {
+    label: proxy.t("processApproval.processTitle"),
+    prop: "title",
+  },
+]);
 const onRefresh = () => {
-	req.value.pageNum = 1
-	finished.value = false
-	getList('refresh')
-}
+  req.value.pageNum = 1;
+  finished.value = false;
+  getList("refresh");
+};
 const onLoad = () => {
-	getList()
-}
-const onClickLeft = () => proxy.$router.push('/main/working')
+  getList();
+};
+const onClickLeft = () => proxy.$router.push("/main/working");
 const onClickRight = () => {
-	proxy.$router.push({
-		path: 'userAdd',
-		query: {
-			type: 'add',
-		},
-	})
-}
-proxy.uploadDdRightBtn(onClickRight, proxy.t('common.add'))
+  proxy.$router.push({
+    path: "userAdd",
+    query: {
+      type: "add",
+    },
+  });
+};
+proxy.uploadDdRightBtn(onClickRight, proxy.t("common.add"));
 const toDtl = (row) => {
-	if (row.status != 1 && row.status != 0) {
-		proxy.$router.push({
-			path: '/main/processDtl',
-			query: {
-				flowKey: row.flowKey,
-				id: row.id,
-				processType: 20,
-				version: row.version,
-			},
-		})
-		return
-	}
-	proxy.post('flowExample/getApprovalRecord', { id: row.id }).then((res) => {
-		if (res.data.recordList.length > 0) {
-			let data = res.data.recordList.filter((item) => item.status === 2)
-			let nodeType = 0
-			if (data && data.length > 0) {
-				nodeType = data[0].nodeType
-			}
-			proxy.$router.push({
-				path: '/main/processDtl',
-				query: {
-					flowKey: row.flowKey,
-					id: row.id,
-					processType: nodeType == 1 ? 30 : 10,
-					version: row.version,
-				},
-			})
-		}
-	})
-	// proxy.$router.push({
-	// 	path: 'processDtl',
-	// 	query: {
-	// 		flowKey: row.flowKey,
-	// 		id: row.id,
-	// 		processType: 10,
-	// 	},
-	// })
-}
+  if (row.status != 1 && row.status != 0) {
+    proxy.$router.push({
+      path: "/main/processDtl",
+      query: {
+        flowKey: row.flowKey,
+        id: row.id,
+        processType: 20,
+        version: row.version,
+        businessId: row.businessId,
+      },
+    });
+    return;
+  }
+  proxy.post("flowExample/getApprovalRecord", { id: row.id }).then((res) => {
+    if (res.data.recordList.length > 0) {
+      let data = res.data.recordList.filter((item) => item.status === 2);
+      let nodeType = 0;
+      if (data && data.length > 0) {
+        nodeType = data[0].nodeType;
+      }
+      proxy.$router.push({
+        path: "/main/processDtl",
+        query: {
+          flowKey: row.flowKey,
+          id: row.id,
+          processType: nodeType == 1 ? 30 : 10,
+          version: row.version,
+          businessId: row.businessId,
+        },
+      });
+    }
+  });
+  // proxy.$router.push({
+  // 	path: 'processDtl',
+  // 	query: {
+  // 		flowKey: row.flowKey,
+  // 		id: row.id,
+  // 		processType: 10,
+  // 	},
+  // })
+};
 onMounted(() => {
-	if (route.query) {
-		
-		getList()
-	}
-})
+  if (route.query) {
+    getList();
+  }
+});
 
 const getList = (type) => {
-	loading.value = true
-	const postUrl = {
-		"1":'/flowExample/getToBeProcessedPage',
-		"2":'/flowExample/getHaveInitiatedPage',
-		"3":'/flowExample/getProcessedPage',
-	}
-	proxy
-		.post(postUrl[route.query.status], req.value)
-		.then((res) => {
-			listData.value =
-				type === 'refresh'
-					? res.data.rows
-					: listData.value.concat(res.data.rows)
-			if (req.value.pageNum * 10 >= res.data.total) {
-				finished.value = true
-			}
-			req.value.pageNum++
-			loading.value = false
-		})
-		.catch((err) => {
-			loading.value = false
-		})
-}
+  loading.value = true;
+  const postUrl = {
+    1: "/flowExample/getToBeProcessedPage",
+    2: "/flowExample/getHaveInitiatedPage",
+    3: "/flowExample/getProcessedPage",
+  };
+  proxy
+    .post(postUrl[route.query.status], req.value)
+    .then((res) => {
+      listData.value =
+        type === "refresh"
+          ? res.data.rows
+          : listData.value.concat(res.data.rows);
+      if (req.value.pageNum * 10 >= res.data.total) {
+        finished.value = true;
+      }
+      req.value.pageNum++;
+      loading.value = false;
+    })
+    .catch((err) => {
+      loading.value = false;
+    });
+};
 </script>
 
 <style lang="scss" scoped>
 .list {
-	min-height: 70vh;
+  min-height: 70vh;
 }
 </style>

src/views/processApproval/processDtl.vue

@@ -1,376 +1,421 @@
 <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="agree-btn" @click="handleSubmit(1)">同意</div>
-				<div class="next-btn" @click="nextFn" v-if="componentObj[route.query.flowKey].tabsNum">下一步</div>
-			</div>
-		</div>
-		<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>
+  <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="agree-btn" @click="handleSubmit(1)">同意</div>
+        <div
+          class="next-btn"
+          @click="nextFn"
+          v-if="componentObj[route.query.flowKey].tabsNum"
+        >
+          下一步
+        </div>
+      </div>
+    </div>
+    <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 SendPurchase from './components/SendPurchase'
-import SendPurchasePayment from './components/SendPurchasePayment'
+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 SendPurchase from "./components/SendPurchase";
+import SendPurchasePayment from "./components/SendPurchasePayment";
+import WdlyPurchase from "./components/WdlyPurchase";
 
-import { showSuccessToast, showFailToast } from 'vant'
-const route = useRoute()
-const proxy = getCurrentInstance().proxy
+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 onClickLeft = () => proxy.$router.go(-1);
+const message = ref("");
 const onClickRight = () => {
-	proxy.$router.push('/main/working')
-}
-const makeDom = ref(null)
-let stepsNum = ref(0)
+  proxy.$router.push("/main/working");
+};
+const makeDom = ref(null);
+let stepsNum = ref(0);
 let queryData = reactive({
-	data: {},
-})
-let footerMoreType = ref(false)
+  data: {},
+});
+let footerMoreType = ref(false);
 const flowForm = reactive({
-	flowKey: '',
-	tenantType: '',
-	handleUserId: '',
-	remark: '',
-	data: {},
-})
-let recordList = ref([])
+  flowKey: "",
+  tenantType: "",
+  handleUserId: "",
+  remark: "",
+  data: {},
+});
+let recordList = ref([]);
 const approvalRecordData = ref({
-	buttonInfoList: [],
-})
+  buttonInfoList: [],
+});
 
 const getAuxiliaryData = (data) => {
-	auxiliaryData.value = 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: Contract,
-		backUrl: '/main/contract',
-		tabsNum: 5,
-	},
-	
-		purchase_flow: {
-		title: '采购',
-		component: SendPurchase,
-		backUrl: '/main/procureList',
-	},
-		pay_flow: {
-		title: '采购付款',
-		component: SendPurchasePayment,
-		backUrl: '/main/purchasePayment',
-	},
-})
+  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: Contract,
+    backUrl: "/main/contract",
+    tabsNum: 5,
+  },
+
+  purchase_flow: {
+    title: "采购",
+    component: SendPurchase,
+    backUrl: "/main/procureList",
+  },
+  pay_flow: {
+    title: "采购付款",
+    component: SendPurchasePayment,
+    backUrl: "/main/purchasePayment",
+  },
+  wdly_purchase: {
+    title: "采购",
+    component: WdlyPurchase,
+    backUrl: "/main/processApproval",
+  },
+});
 
-let dialogVisible = ref(false)
+let dialogVisible = ref(false);
 //判断是否有下一节点处理人
 const handleResult = (res) => {
-	if (res !== null && res.success) {
-		skipPage()
-	} else {
-		dialogVisible.value = true
-		nextHandleUser.value = res.userList
-	}
-}
+  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,
-	// })
-}
+  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()
-}
+  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 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()
-}
+  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
-
-			})
-	} else {
-		proxy
-			.post('/flowExample/getFlowNode', {
-				flowKey: flowForm.flowKey,
-			})
-			.then((res) => {
-				recordList.value = res.data
-				stepsNum.value = 0
-			})
-	}
-}
+  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;
+      });
+  } 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)
-})
+  //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;
+  top: 25px;
 }
 
 .van-step--vertical .van-step__line {
-	top: 23px;
+  top: 23px;
 }
 </style>
 <style lang="scss">
 .process {
-	.more-modal {
-		.van-field {
-			border: none;
-			background: #f1f1f1;
-			border-radius: 5px;
-			padding: 5px 10px;
-		}
-	}
+  .more-modal {
+    .van-field {
+      border: none;
+      background: #f1f1f1;
+      border-radius: 5px;
+      padding: 5px 10px;
+    }
+  }
 
-	.load-btn-box {
-		height: 50px;
-		text-align: center;
-		padding: 9px;
-		box-sizing: border-box;
-	}
+  .load-btn-box {
+    height: 50px;
+    text-align: center;
+    padding: 9px;
+    box-sizing: border-box;
+  }
 
-	.foot-btn-warp {
-		height: 50px;
-		line-height: 50px;
-		text-align: center;
-		display: flex;
-		width: 100vw;
-		font-size: 16px;
+  .foot-btn-warp {
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    display: flex;
+    width: 100vw;
+    font-size: 16px;
 
-		.agree-btn {
-			flex: 1;
-			background: #eaf0ff;
-			color: #0084ff;
-		}
+    .agree-btn {
+      flex: 1;
+      background: #eaf0ff;
+      color: #0084ff;
+    }
 
-		.next-btn {
-			flex: 1;
-			background: #0084ff;
-			color: #fff;
-		}
-	}
+    .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%;
-		}
+  .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;
-		}
+    .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;
-		}
-	}
+    .more-btn {
+      width: 100%;
+      background: #fff;
+      color: #999999;
+      font-size: 14px;
+      text-align: center;
+      height: 50px;
+      line-height: 50px;
+    }
+  }
 
-	.open-more {
-		.content {
-			height: 170px;
-		}
-	}
+  .open-more {
+    .content {
+      height: 170px;
+    }
+  }
 
-	padding-bottom: 60px;
+  padding-bottom: 60px;
 
-	.card {
-		background: #fff;
-		padding: 0 12px;
-		margin-top: 10px;
-	}
+  .card {
+    background: #fff;
+    padding: 0 12px;
+    margin-top: 10px;
+  }
 
-	.textarea {
-		.van-field {
-			border: none;
-			background: #f1f1f1;
-			border-radius: 5px;
-			padding: 5px 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;
-	}
+  .more-btn {
+    height: 60px;
+    line-height: 60px;
+    font-size: 14px;
+    color: #0084ff;
+    text-align: center;
+  }
 }
 </style>

vue.config.js

@@ -25,15 +25,15 @@ module.exports = defineConfig({
 		proxy: {
 			// https://cn.vitejs.dev/config/#server-proxy
 			'/test-api': {
-				target: 'http://121.37.194.75:20006',
+				target: 'http://139.9.102.170:10006',
 				changeOrigin: true,
-				rewrite: (p) => p.replace(/^\/dev-api/, '')
+				rewrite: (p) => p.replace(/^\/test-api/, '')
 			},
 			'/prod-api': {
-				target: 'http://139.159.251.109:82',
+				target: 'http://139.9.102.170',
 				changeOrigin: true,
 				rewrite: (p) => p.replace(/^\/prod-api/, '')
 			}
 		}
 	},
-})
+})