[add] 增加人员信息

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
 }

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";
+}
+

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;

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>

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>

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
-  }
-})

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
 

src/views/Home.vue

@@ -11,7 +11,10 @@ export default {
   methods: {
     goEnterpriseStandardInitChange () {
       this.$router.push({
-        path: '/workCenter/enterpriseStandardInitChange'
+        path: '/workCenter/enterpriseStandardInitChange',
+        query: {
+          processInstanceId: '392773'
+        }
       })
     }
   }

src/views/workCenter/enterpriseStandardInitChange/EnterpriseStandardInitChange.vue

@@ -1,18 +1,9 @@
 <template>
-  <div class="content-wrapper">
+  <process-common-layout class="page-box" :processKey="ProcessKey.ES_INIT_CHANGE.value">
-    <div class="top-wrapper">
+    <template v-slot:process>
-      <div class="table-operator-tab">
+      <!--  流程信息  -->
-        <a class="switch-item" :class="switchValue === 'base' ? 'table-operator-tab-active' : ''"
+      <div class="process-part">
-           @click="switchChange('base')">{{ $t('basicInformation') }}
+        <div class="process-part-title">{{ $t('processInformation') }}</div>
-        </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">
         <van-form
           @failed="onFailed"
           @submit="onSubmit"
@@ -29,40 +20,40 @@
             maxLength="50"
             v-model="processInfoForm.prcName" />
           <!--   截止日期  -->
-<!--          <van-datetime-picker-->
+          <calendar-field
-<!--            :label="$t('expirationDate')"-->
+            :label="$t('expirationDate')"
-<!--            v-model="processInfoForm.dueTime"-->
+            v-model="processInfoForm.dueTime"
-<!--            type="date"-->
+            type="date"
-<!--            readonly-->
+            readonly
-<!--          />-->
+          />
         </van-form>
-      </van-collapse-item>
+      </div>
-      <!--   业务基本信息  -->
+      <!--   业务基本信息   -->
-      <van-collapse-item :title="$t('basicServiceInformation')" name="basicServiceInformation">
+      <div class="process-part">
-        {{ $t('basicServiceInformation') }}
+        <div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
-      </van-collapse-item>
+      </div>
-      <!--   审批意见  -->
+      <!--   审批意见   -->
-      <van-collapse-item :title="$t('processApprovalInformation')" name="processApprovalInformation" :is-link="false" disabled>
+      <div class="process-part">
-        {{ $t('processApprovalInformation') }}
+        <div class="process-part-title">{{ $t('processApprovalInformation') }}</div>
-      </van-collapse-item>
+      </div>
-    </van-collapse>
+    </template>
-  </div>
+  </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 {
-      // 最外层折叠面板当前展开
+      ProcessKey,
-      activeNames: [
-        'processInformation',
-        'basicServiceInformation',
-        'processApprovalInformation'
-      ],
       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;
 }