Quellcode durchsuchen

1.增加节点双击弹窗
2.弹窗组件demo
3.优化流程图线的样式,增加动画

sh4wmoo vor 3 Jahren
Ursprung
Commit
4770baaf9c

+ 1 - 0
package.json

@@ -36,6 +36,7 @@
     "element-resize-detector": "^1.2.3",
     "element-ui": "^2.15.12",
     "html2canvas": "^1.4.1",
+    "insert-css": "^2.0.0",
     "iview-area": "^1.6.0",
     "jqwidgets-scripts": "^13.1.0",
     "js-base64": "^3.7.3",

+ 2 - 0
src/components/business/process/node-modal/index.js

@@ -0,0 +1,2 @@
+import NodeModal from './node-modal.vue'
+export default NodeModal

+ 132 - 0
src/components/business/process/node-modal/node-modal.vue

@@ -0,0 +1,132 @@
+<!-- @desc:工艺流程节点弹窗  @auth:张潇木  @time:2023/1/5 9:35 -->
+<template>
+  <div>
+    <DkModal
+     title="工艺节点"
+     width="80%"
+     v-model="process.nodeModal.display"
+     :mask-closable="false"
+     :mask="false"
+     :closable="false"
+     draggable
+     sticky
+     @modalOk="modalOk"
+     @modalCancel="modalCancel">
+      <DkForm ref="formInline" :col-count="4">
+        <!--    节点编码    -->
+        <DkFormItem prop="nodeCode" :required="true">
+          <InputPop v-model="nodeData.nodeCode" ref="nodeCode"/>
+        </DkFormItem>
+        <!--    节点名称    -->
+        <DkFormItem prop="nodeName" :required="true">
+          <InputPop v-model="nodeData.nodeName" ref="nodeName"/>
+        </DkFormItem>
+        <!--    节点类型    -->
+        <DkFormItem prop="nodeType" :required="true">
+          <InputPop v-model="nodeData.nodeType" ref="nodeType"/>
+        </DkFormItem>
+        <!--    组织机构    -->
+        <DkFormItem prop="organization" :required="true">
+          <SelectMagnifier v-model="nodeData.orgId" :display-text="nodeData.orgName"
+                           :type="this.$config.MagnifierType.organization"
+                           :multiple="false"></SelectMagnifier>
+        </DkFormItem>
+        <!--    采集方式    -->
+        <DkFormItem prop="collectType" :required="true">
+          <DkRadio ref="collectType" v-model="nodeData.collectType" :options="[{value:1,label:'单点采集'}, {value:2,label:'集中采集'},]"/>
+        </DkFormItem>
+        <!--    必须工序    -->
+        <DkFormItem prop="necessary" :required="true">
+          <DkRadio ref="necessary" v-model="nodeData.necessary" :options="[{value:1,label:'必须'}, {value:2,label:'非必须'},]"/>
+        </DkFormItem>
+        <!--    商标釉料    -->
+        <DkFormItem prop="brandGlaze" :required="true">
+          <DkRadio ref="brandGlaze" v-model="nodeData.brandGlaze" :options="[{value:1,label:'可变更'}, {value:2,label:'不可变更'},]"/>
+        </DkFormItem>
+        <!--    撤销计件    -->
+        <DkFormItem prop="revokeCount" :required="true">
+          <DkRadio ref="revokeCount" v-model="nodeData.revokeCount" :options="[{value:1,label:'能撤销'}, {value:2,label:'不能撤销'},]"/>
+        </DkFormItem>
+        <!--    扫码类型    -->
+        <DkFormItem prop="scanType" :required="true">
+          <DkRadio ref="scanType" v-model="nodeData.scanType" :options="[{value:1,label:'注浆条码'}, {value:2,label:'包装条码'},]"/>
+        </DkFormItem>
+        <Divider></Divider>
+        <div style="padding-left: 30px;">
+          <EditTable ref="goodsTable" :data="nodeData.pdtList"
+                     :columns="pdtColumns"
+                     enabledRepeatId="pdtId"
+                     controlId="pdtId"
+                     :height="300"
+                     :showSeqBtnFlag="false"
+                     :enabledRepeat="false"
+          ></EditTable>
+        </div>
+
+      </DkForm>
+    </DkModal>
+  </div>
+</template>
+
+<script>
+import {mapState, mapMutations} from 'vuex'
+export default {
+  name: 'NodeModal',
+  props: {
+    nodeType: {
+      type: Number,
+      default: undefined,
+    },
+    nodeData: {
+      type: Object,
+      default: {},
+    },
+  },
+  computed: {
+    ...mapState(['process']),
+  },
+  watch: {
+
+  },
+  data() {
+    return {
+      pdtColumns:[
+        // {type: 'seq', width: 60},
+        {field: 'pdtCode', type: 'disabled', width: 255},
+        {field: 'pdtName', type: 'disabled', width: 255},
+        {field: 'pdtType', type: 'disabled', width: 255},
+        {field: 'pdtSpec', type: 'disabled', width: 255},
+      ]
+    }
+  },
+  created() {
+  },
+  methods: {
+    ...mapMutations(['setProcessNodeModalDisplay']),
+    /**
+     * @desc   : 确定
+     * @author : 张潇木
+     * @date   : 2023/1/5 10:38
+     */
+    modalOk(){
+
+      this.modalCancel();
+    },
+    /**
+     * @desc   : 取消
+     * @author : 张潇木
+     * @date   : 2023/1/5 10:38
+     */
+    modalCancel(){
+      this.setProcessNodeModalDisplay(false)
+    },
+  }
+
+}
+</script>
+
+<style scoped>
+/deep/ .ivu-radio-wrapper{
+  font-size: 12px!important;
+}
+</style>

+ 15 - 1
src/locale/lang/zh-CN.js

@@ -411,7 +411,6 @@ export const columns = {
   unitName: '单位名称',
   decimalPlaces: '小数位数',
   normal: '正常',
-  process: '流程',
   salesProcess: '销售流程',
   procurementProcess: '采购流程',
   // region审批相关
@@ -1268,6 +1267,21 @@ export const columns = {
 
 //   *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 
+  //工艺流程相关
+  nodeCode:'节点编码',
+  nodeName:'节点名称',
+  nodeType:'节点类型',
+  collectType:'采集方式',
+  necessary:'必须工序',
+  brandGlaze:'商标釉料',
+  revokeCount:'撤销计件',
+  scanType:'扫码类型',
+  pdtCode:'在制品编码',
+  pdtName:'在制品名称',
+  pdtType:'在制品类别',
+  pdtSpec:'在制品规格',
+
+
   fty:'工厂',
   ftyCode:'工厂代码',
   ftyName:'工厂名称',

+ 9 - 0
src/store/index.js

@@ -32,6 +32,12 @@ export default new Vuex.Store({
     conditionsConfig1: {
       conditionNodes: [],
     },
+    process:{//流程图
+      nodeModal:{//节点弹窗
+        display:false,
+        saveLoading:false
+      }
+    }
   },
   mutations: {
     //关闭浏览器 清空token
@@ -69,6 +75,9 @@ export default new Vuex.Store({
     setConditionsConfig(status, payload) {
       status.conditionsConfig1 = payload
     },
+    setProcessNodeModalDisplay(status, payload) {
+      status.process.nodeModal.display = payload
+    },
   },
   actions: {
     //

Datei-Diff unterdrückt, da er zu groß ist
+ 59 - 38
src/view/process/process.vue


Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.