From 4e793458f70a1cb29eea78b10981955b7ae413cc Mon Sep 17 00:00:00 2001
From: lideqin <694785430@qq.com>
Date: Thu, 30 Nov 2023 20:28:18 +0800
Subject: [PATCH] =?UTF-8?q?[add]=20=E5=A2=9E=E5=8A=A0=E4=BA=BA=E5=91=98?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/api.js                                |   5 +
 src/assets/font/iconfont.css                  |  37 ++++++++
 src/assets/font/iconfont.ttf                  | Bin 0 -> 2512 bytes
 src/assets/less/common.less                   |  38 --------
 src/components/CalendarField.vue              |  89 ++++++++++++++++++
 src/components/ProcessCommonLayout.vue        |  89 +++++++++++++++++-
 src/enums/commonEnums.js                      |  11 ---
 src/main.js                                   |   1 +
 src/views/Home.vue                            |   5 +-
 .../EnterpriseStandardInitChange.vue          |  76 ++++++---------
 10 files changed, 253 insertions(+), 98 deletions(-)
 create mode 100644 src/assets/font/iconfont.css
 create mode 100644 src/assets/font/iconfont.ttf
 create mode 100644 src/components/CalendarField.vue

diff --git a/src/api/api.js b/src/api/api.js
index 4524032..9267372 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -18,6 +18,9 @@ const checkRuleByCode = (params) => getAction('/sys/checkRule/checkByCode', para
 // 通过文件的id获取文件的相应信息
 const getFileInfo = (params) => getAction('/sys/oss/file/queryById', params)
 
+// 获取人员信息列表
+const getPersonInfoList = (params) => getAction('/process/fb/processFbInfo/getNodeList', params)
+
 // 标准入库/变更流程------------
 // 国内法规标准-获取表单模型
 const getDomesticStandardFormModal = (params) => getAction('/laws/standard/domestic/getFormModel', params)
@@ -32,6 +35,8 @@ export {
   getFileInfo,
   getSSOUserInfo,
 
+  getPersonInfoList,
+
   getDomesticStandardFormModal,
   queryStandardECProcessData
 }
diff --git a/src/assets/font/iconfont.css b/src/assets/font/iconfont.css
new file mode 100644
index 0000000..6a2d116
--- /dev/null
+++ b/src/assets/font/iconfont.css
@@ -0,0 +1,37 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4352783 */
+  src: url('iconfont.ttf?t=1701345493350') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-check:before {
+  content: "\e645";
+}
+
+.icon-close:before {
+  content: "\e6dc";
+}
+
+.icon-circle:before {
+  content: "\e66f";
+}
+
+.icon-xunhuan:before {
+  content: "\e6a9";
+}
+
+.icon-baocun:before {
+  content: "\ec09";
+}
+
+.icon-shangchuan:before {
+  content: "\e621";
+}
+
diff --git a/src/assets/font/iconfont.ttf b/src/assets/font/iconfont.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..5ea2d805bb6c30012adf7828795db043e597a2af
GIT binary patch
literal 2512
zcmd^B&2Jk;6n}5_t82$e9NRI(3D^#CKB(;2N$jfhD>R7@MWt%e2t=#a**G6%{UO__
z5)dM!QdL9+IaG)X7YY*PLc|3sA&~-VFB}3K5TXk0#Uvt9dqJv@Z1ZM!t)jO41<d-*
z`@N5OZ|2SHtN{VQ4$B}we{%f9^Zs|bUIV~Aq@8$iJQCX%Kl&@lmq<RNWm5SgZ|JWB
zuwA6voYj|RE;}xN0U+EbYMx7{rbExY|0((2CW_CILfI5968@U#nYm19v7G>o-Jz~s
z&uJ;V$G)YpTO>DUQj2-?z&P2TAlaWyWzx-8_N@UZl#k8kbH&oNGjIJ3pytVb259cW
za%~w-iX;M1&sX#BrWhL1emPStoo?Fq7uZeTJMZ?M;EpD*T^B((MB*-BTuY5dQXt8L
zQsY`1JpeT>QsZ_T^uqyQBV#X2K%<^2WueXTH|^$F6Qe#qo1*xZM1I_gq(P7^ttbMn
zf<)=wW<QYbJ(J^~5JO%8kOa~`rX8CZord*tU`I9T0m3a<CO1CE2aWNB|3ze?ymSfx
zcAIW^!5Y6zS{`XPajF36MVKJD(WsVO4wOgBx$@QWtsS*S)p=MZ&w4`|^WXtmH&RTI
zFO1^yD*WGDgHeE&tTIqV$^n!387YsN#CM~dGl}n5`Kn2LbIZ3(;wN@THObgn9x@Db
z@Dcoke!OVzt#F>51~1h<BrDh*3d(M;)cQ2G#tvdUf$>3M(blF`Pi))TTsA}|NOFTL
zi43o+Y*IyAb#Ga9`P2$y0uuzr@ORb6^BCuj-DPh=Ckcsoj6%Ab(91hH7(s=1p}~Wc
zlDc@zi}yDqhh&$ejSY#IgSglzHi#l|VvQnxW&v_|tfTRUf)HkF;0CH01{GPM<+OTR
zV~KboKG+@V4hg|94j#bRQ|N9)tc{P2_Vo7ljE;Sh9O>!n>lsNNkBvv8<Jv?tI>FX@
zdq<KVCruXuBfY&<Uvy%M8>!>#q#D<*3+uumXn-dvXSd=FI0uFTiZ{_M1QH~65(+pw
zg>UW-uT+klWG}A_-^B}+uU3ZdA>JEaVOL&ZOE-q}>YbnUp&M9D=<%C)b4W+yo}~S(
zZ3t^Z6rA9p3^BU-Fw_|c${we?bs!Ln4><?B20Wb@7z%hhhXxH>2X;CKJf?j=4xsR1
zwd!iC27O&!K6cyJRmrcf<9hWFuCE?*IjZ1r9V3p!k0N6}WUek>#m~KQvu!J1SzTRS
zbGTfNHFkTI^VMpV*3Rd)C43;X(Hq?d2^a(D3WjJtMty01vJ?o0_TykY*4lyf*;tZ{
zL38Jg6A_@(5XJ+HpFFqBpwXi`Tb!x~_f$&3h`YlhOYD*)dpg{a%IA$9`<A`kt!~@!
zyC&PVB1sNci?U_+d{2k#N7bp)uNrA`{}u_JYI3`qPD!#XnTXQVJRP=e)!j}p>|08U
z%OOe1wynd%ce4dH&67*mMP!^}>UWW3Vn$yCpM?d|2Q4fT?z6B&U(=X{Wzz4runnGt
zQ48BCVxHfsBE6vyg7X$eXojm6rZT`a3k#&bX<?D@FBX=d75=cWO!|t2Z7_)r3)>-t
z+TlVvRZ36$r<VNlS}r@2%a-c=czSk0PZjE7olm9<#ra&;9}V}{RmpTVU8sjCo|}!8
zN;CeMLN4PUqj+gu&-wF(+}X5N3eS~F`Mr?{&%^a$Eti4AP=GX~phW#N_+bi`sGkQ7
za*%}?qc1%oA1CiwSOA?y79O!aJbIG63s59K9@7s|y7KxT8I>fjtl|0aY>IG>vc+hQ
zC7O|+s6df2gvPA-rD-NQVLxpkx1FUp8hP`pm5<89UWm|BUr*gXY^*b5+!?gz{J+EF
zn}Q4l6j4GM75eH++FV+DRnqiaF)eHJ1x-&YiwoJgg;Z9aO69bLtgSeg%Fb$B1Mm;3
Cw2tur

literal 0
HcmV?d00001

diff --git a/src/assets/less/common.less b/src/assets/less/common.less
index b494e25..a5c2b20 100644
--- a/src/assets/less/common.less
+++ b/src/assets/less/common.less
@@ -6,44 +6,6 @@
   height: 100%;
 }
 
-/* switch的样式 */
-.top-wrapper {
-  width: 100%;
-  height: 1.11rem;
-  background: #FFFFFF;
-  display: flex;
-  align-items: center;
-}
-
-.table-operator-tab {
-  width: 4.2rem;
-  height: 0.68rem;
-  line-height: 0.68rem;
-  margin: 0 auto;
-  background-color: #FFFFFF;
-  border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
-  border: 0.01rem solid @primary-color;
-  overflow: hidden;
-  display: flex;
-}
-
-.table-operator-tab a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 2.1rem;
-  height: 0.68rem;
-  color: #1D2129;
-  font-size: 0.28rem;
-}
-
-.table-operator-tab a.table-operator-tab-active {
-  background-color: @primary-color;
-  color: #FFFFFF;
-}
-
-/* switch的样式--end */
-
 /*底部按钮的公共样式*/
 .operation-common-btn {
   width: 2.19rem;
diff --git a/src/components/CalendarField.vue b/src/components/CalendarField.vue
new file mode 100644
index 0000000..4c32fbf
--- /dev/null
+++ b/src/components/CalendarField.vue
@@ -0,0 +1,89 @@
+<!-- form表单中日历样式的组件-->
+<template>
+<div>
+  <van-field
+    readonly
+    clickable
+    name="calendar"
+    :value="value"
+    v-bind="$attrs"
+    v-on="childListeners"
+    @click="clickField"
+  />
+  <van-calendar
+    color="#3074F6"
+    v-model="showCalendar"
+    :min-date="minDate"
+    :max-date="maxDate"
+    @confirm="onConfirm"
+  />
+</div>
+
+</template>
+
+<script>
+export default {
+  name: 'CalendarField',
+  props: {
+    // 可选择的最小日期--不知道为什么没有起作用
+    minDate: {
+      // type: [Date, String],
+      required: false,
+      default: () => {
+        return new Date(2020, 0, 1)
+      }
+    },
+    // 可选择的最大日期--不知道为什么没有起作用
+    maxDate: {
+      type: [Date, String],
+      required: false,
+      default: () => {
+        return new Date(2030, 12, 31)
+      }
+    },
+    value: {
+      type: [String, Number, Object],
+      required: false
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      showCalendar: false
+    }
+  },
+  computed: {
+    // 透传给下级组件的事件，需要排除本组件使用的change事件
+    childListeners () {
+      // const vm = this
+      const result = Object.assign({},
+        this.$listeners
+      )
+      delete result.change
+      return result
+    }
+  },
+  methods: {
+    onConfirm (date) {
+      console.log('-date-----------', date)
+      const value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+      this.$emit('change', value)
+      this.showCalendar = false
+    },
+    clickField () {
+      if (this.readonly) {
+        return
+      }
+      this.showCalendar = true
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
diff --git a/src/components/ProcessCommonLayout.vue b/src/components/ProcessCommonLayout.vue
index 32b69d3..ab86dba 100644
--- a/src/components/ProcessCommonLayout.vue
+++ b/src/components/ProcessCommonLayout.vue
@@ -22,7 +22,20 @@
       <slot name="process"></slot>
     </div>
     <!--人员信息，可以不用单独封组件了，放在这里就行-->
-    <div class="process-container" v-show="activeTab === 'person'">人员信息</div>
+    <div class="process-container" v-show="activeTab === 'person'">
+      <van-steps direction="vertical">
+        <van-step v-for="item in personnelInfoData" :key="item.id">
+          <template #active-icon>
+            <van-icon class="iconfont" class-prefix="icon" name="circle" />
+          </template>
+          <template #inactive-icon>
+            <van-icon class="iconfont" class-prefix="icon" name="circle" />
+          </template>
+          <h3>{{ item.nodeName }}</h3>
+          <p>{{ item.linkUserIds_dictText }}</p>
+        </van-step>
+      </van-steps>
+    </div>
 
     <!--底部操作按钮-->
     <div class="operate-box">
@@ -32,6 +45,8 @@
 </template>
 
 <script>
+import { getPersonInfoList } from '@/api/api'
+
 export default {
   name: 'ProcessCommonLayout',
   props: {
@@ -40,13 +55,23 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    // 流程key
+    processKey: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   data () {
     return {
-      activeTab: 'basic'
+      activeTab: 'basic',
+      personnelInfoData: [] // 人员信息列表
     }
   },
+  mounted () {
+    this.getPersonInfoStructure()
+  },
   methods: {
     /**
      * 切换标签页
@@ -54,6 +79,24 @@ export default {
      */
     handleActiveTab (key) {
       this.activeTab = key
+    },
+    /**
+     * 获取人员信息列表数据
+     * @param key
+     */
+    getPersonInfoStructure () {
+      const param = {}
+      param.processDefinitionKey = this.processKey
+      if (this.$route.query.processInstanceId) {
+        param.processInstanceId = this.$route.query.processInstanceId
+      }
+      getPersonInfoList(param).then(res => {
+        if (res.success) {
+          console.log(res.result)
+          // 处理人员信息数据，判断每个节点是否能选人
+          this.personnelInfoData = res.result
+        }
+      })
     }
   }
 }
@@ -113,4 +156,46 @@ export default {
   align-items: center;
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+/deep/ .van-steps {
+  padding: 0 0.32rem 0 0.88rem;
+  .van-step__title {
+    h3 {
+      font-size: 0.28rem;
+      color: rgba(29, 33, 41, 0.9);
+      line-height: 0.33rem;
+      margin: 0 0 0.16rem 0;
+      font-weight: 400;
+    }
+    p {
+      background: #F2F3F5;
+      border-radius: 0.04rem 0.04rem 0.04rem 0.04rem;
+      margin: 0;
+      padding: 0.26rem 0.21rem;
+      color: #1D2129;
+    }
+  }
+  .van-step__circle-container {
+    left: -0.44rem;
+    color: @primary-color;
+  }
+  .van-step__line {
+    width: 0.03rem;
+    height: calc(100% - 0.24rem);
+    left: -0.46rem !important;
+    top: 0.47rem;
+    background: linear-gradient(to top,transparent 0%,transparent 50%,#ccc 50%,#ccc 100%);
+    background-size: 0.03rem 0.2rem;
+    background-repeat: repeat-y;
+    //border: 1px dashed #BABABA;
+  }
+  .van-step:last-child {
+    .van-step__line {
+      display: none;
+    }
+  }
+  .van-step--vertical:not(:last-child)::after {
+    display: none;
+  }
+}
 </style>
diff --git a/src/enums/commonEnums.js b/src/enums/commonEnums.js
index 413661b..57bbc55 100644
--- a/src/enums/commonEnums.js
+++ b/src/enums/commonEnums.js
@@ -73,14 +73,3 @@ export const ProcessKey = {
   // 企标稽查整改
   ES_INSPECTION_RECTIFICATION: { text: 'inspect_plan', value: 'inspect_process' }
 }
-
-// 标准法规入库/变更流程
-export const FGEntryChangeProcessNode = new EsEnums({
-  initiate: { text: '法规工程师发起', value: 'Activity_16zkjpn', btn: ['save', 'submit'], disabled: false },
-  approve: {
-    text: '法规工程师主管级领导审批',
-    value: 'Activity_084um6e',
-    btn: ['return', 'save', 'agree', 'reject'],
-    disabled: true
-  }
-})
diff --git a/src/main.js b/src/main.js
index 964ee4d..efc0884 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,6 +13,7 @@ import LangENUS from './common/lang/en-us'
 import LangZHCN from './common/lang/zh-cn'
 import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
 import './permission'
+import './assets/font/iconfont.css'
 
 Vue.config.productionTip = false
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7de7a93..5c04ec0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -11,7 +11,10 @@ export default {
   methods: {
     goEnterpriseStandardInitChange () {
       this.$router.push({
-        path: '/workCenter/enterpriseStandardInitChange'
+        path: '/workCenter/enterpriseStandardInitChange',
+        query: {
+          processInstanceId: '392773'
+        }
       })
     }
   }
diff --git a/src/views/workCenter/enterpriseStandardInitChange/EnterpriseStandardInitChange.vue b/src/views/workCenter/enterpriseStandardInitChange/EnterpriseStandardInitChange.vue
index a944d51..102a816 100644
--- a/src/views/workCenter/enterpriseStandardInitChange/EnterpriseStandardInitChange.vue
+++ b/src/views/workCenter/enterpriseStandardInitChange/EnterpriseStandardInitChange.vue
@@ -1,18 +1,9 @@
 <template>
-  <div class="content-wrapper">
-    <div class="top-wrapper">
-      <div class="table-operator-tab">
-        <a class="switch-item" :class="switchValue === 'base' ? 'table-operator-tab-active' : ''"
-           @click="switchChange('base')">{{ $t('basicInformation') }}
-        </a>
-        <a class="switch-item" :class="switchValue === 'user' ? 'table-operator-tab-active' : ''"
-           @click="switchChange('user')">{{ $t('personalInformation') }}
-        </a>
-      </div>
-    </div>
-    <van-collapse v-model="activeNames">
-      <!--  流程信息 -->
-      <van-collapse-item :title="$t('processInformation')" name="processInformation">
+  <process-common-layout class="page-box" :processKey="ProcessKey.ES_INIT_CHANGE.value">
+    <template v-slot:process>
+      <!--  流程信息  -->
+      <div class="process-part">
+        <div class="process-part-title">{{ $t('processInformation') }}</div>
         <van-form
           @failed="onFailed"
           @submit="onSubmit"
@@ -29,40 +20,40 @@
             maxLength="50"
             v-model="processInfoForm.prcName" />
           <!--   截止日期  -->
-<!--          <van-datetime-picker-->
-<!--            :label="$t('expirationDate')"-->
-<!--            v-model="processInfoForm.dueTime"-->
-<!--            type="date"-->
-<!--            readonly-->
-<!--          />-->
+          <calendar-field
+            :label="$t('expirationDate')"
+            v-model="processInfoForm.dueTime"
+            type="date"
+            readonly
+          />
         </van-form>
-      </van-collapse-item>
-      <!--   业务基本信息  -->
-      <van-collapse-item :title="$t('basicServiceInformation')" name="basicServiceInformation">
-        {{ $t('basicServiceInformation') }}
-      </van-collapse-item>
-      <!--   审批意见  -->
-      <van-collapse-item :title="$t('processApprovalInformation')" name="processApprovalInformation" :is-link="false" disabled>
-        {{ $t('processApprovalInformation') }}
-      </van-collapse-item>
-    </van-collapse>
-  </div>
+      </div>
+      <!--   业务基本信息   -->
+      <div class="process-part">
+        <div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
+      </div>
+      <!--   审批意见   -->
+      <div class="process-part">
+        <div class="process-part-title">{{ $t('processApprovalInformation') }}</div>
+      </div>
+    </template>
+  </process-common-layout>
 </template>
 
 <script>
-import { WorkCenterMixin } from '@/mixins/WorkCenterMixin'
+import ProcessCommonLayout from '@/components/ProcessCommonLayout'
+import { ProcessKey } from '@/enums/commonEnums'
+import CalendarField from '@/components/CalendarField'
 
 export default {
   name: 'EnterpriseStandardInitChange',
-  mixins: [WorkCenterMixin],
+  components: {
+    ProcessCommonLayout,
+    CalendarField
+  },
   data () {
     return {
-      // 最外层折叠面板当前展开
-      activeNames: [
-        'processInformation',
-        'basicServiceInformation',
-        'processApprovalInformation'
-      ],
+      ProcessKey,
       readonly: false,
       processInfoForm: {} // 流程信息表单
     }
@@ -76,13 +67,6 @@ export default {
 <style scoped lang="less">
 @import '~@assets/less/common.less';
 
-.content-wrapper {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.16rem;
-}
-
 /deep/ .van-collapse-item__title--disabled {
   color: #323233;
 }