From cb7134f81a5a0c606ff57246231725465ae40003 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E9=9C=84?= <zhaoxiaox0053@163.com>
Date: Sat, 7 Oct 2023 13:37:36 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E6=A0=87=E5=87=86=E6=B3=95=E8=A7=84?=
 =?UTF-8?q?=E5=85=A5=E5=BA=93/=E5=8F=98=E6=9B=B4=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/less/common.less                   |  23 +
 src/components/CollapsiblePanelForm.vue       | 503 ++++++++++++++++++
 src/views/workCenter/NewProcess.vue           |   2 +-
 .../StandardEntryOrChangeProcess.vue          |  80 +++
 4 files changed, 607 insertions(+), 1 deletion(-)
 create mode 100644 src/components/CollapsiblePanelForm.vue
 create mode 100644 src/views/workCenter/standardEntryOrChangeProcess/StandardEntryOrChangeProcess.vue

diff --git a/src/assets/less/common.less b/src/assets/less/common.less
index b392e3f9..cb605bdc 100644
--- a/src/assets/less/common.less
+++ b/src/assets/less/common.less
@@ -785,3 +785,26 @@
 }
 
 /*详情样式end*/
+
+/*流程表单样式start*/
+.process-part-title {
+  font-size: 16px;
+  font-family: PingFang SC-Medium, PingFang SC, sans-serif;
+  font-weight: 600;
+  color: #1D2129;
+  padding-left: 12px;
+  position: relative;
+}
+
+.process-part-title::before {
+  content: '';
+  width: 4px;
+  height: 20px;
+  background: #D52C26;
+  border-radius: 4px;
+  position: absolute;
+  left: 0;
+  top: 2px;
+}
+
+/*流程表单样式end*/
diff --git a/src/components/CollapsiblePanelForm.vue b/src/components/CollapsiblePanelForm.vue
new file mode 100644
index 00000000..0e96504e
--- /dev/null
+++ b/src/components/CollapsiblePanelForm.vue
@@ -0,0 +1,503 @@
+<template>
+  <a-form-model :model="formInline" v-if="isFormInline" class="form-add" :rules="rules" ref="ruleForm">
+    <template v-for="(val,index) in dataList">
+      <div :key="index" class="collapsible-panel-form" v-if="val && val.length > 0">
+        <div class="collapsible-panel-form-header">
+          <span>{{ index }}</span>
+          <div class="retractable-btn" @click="handleChangeRetractable(index)">
+            <a-icon type="double-right" :class="retractableFlag[index] ? 'pack-up-btn' : 'unfold-btn'" />
+            {{ retractableFlag[index] ? '收起' : '展开' }}
+          </div>
+        </div>
+        <div class="form-flex-box collapsible-panel-form-content" v-show="retractableFlag[index]">
+          <template v-for="(item, index) in val">
+            <div :key="index"
+                 class="box-title-text form-flex-item"
+                 :class="{'form-flex-item-line': item.fieldShowType === FieldType.STANDARD_MORE.value}"
+                 v-if="!hiddenFieldList.includes(item.dbFieldName)">
+              <div class="title-text">
+                <span class="required" v-if="item.fieldMustInput === '1'">*</span>
+                <span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
+              </div>
+              <a-form-model-item class="item-model" :prop="item.dbFieldName">
+                <!--   1, 日期单选  -->
+                <a-date-picker v-if="item.fieldShowType === FieldType.DATE_SINGLE.value"
+                               class="box-input"
+                               :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               format="YYYY-MM-DD"
+                               value-format="YYYY-MM-DD"
+                               v-model="formInline[item.dbFieldName]"
+                               :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                               style="width: 100%" />
+                <!--   2, 单选用户  -->
+                <user-selection v-else-if="item.fieldShowType === FieldType.USER_SINGLE.value"
+                                :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                v-model="formInline[item.dbFieldName]"
+                                :filedName="item.dbFieldName"
+                                @nameChange="userSelectNameChange"
+                                :nameStr="formInline[item.dbFieldName + '_dictText']"
+                                type="radio"
+                                :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
+                <!--   3, 单选组织机构  -->
+                <j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value"
+                                 v-model="formInline[item.dbFieldName]"
+                                 :backDepart="true" />
+                <!--   4, 日期多选  -->
+                <j-multiple-date-picker v-else-if="item.fieldShowType === FieldType.DATE_MORE.value"
+                                        class="box-input"
+                                        v-model="formInline[item.dbFieldName]"
+                                        :fieldName="item.dbFieldName"
+                                        :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
+                <!--   5, 多行文本  -->
+                <a-textarea v-else-if="item.fieldShowType === FieldType.TEXTAREA.value"
+                            :placeholder="$t('pleaseEnter')+item.dbFieldTxt"
+                            :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                            :maxLength="500"
+                            v-model="formInline[item.dbFieldName]" :rows="4" />
+                <!--   6, 标准多选  -->
+                <standard-selection v-else-if="item.fieldShowType === FieldType.STANDARD_MORE.value"
+                                    :source="flag"
+                                    :disabledSourceSearch="true"
+                                    :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                    v-model="formInline[item.dbFieldName]" />
+                <!--   7, 多选组织机构  -->
+                <j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value"
+                                 v-model="formInline[item.dbFieldName]"
+                                 :multi="true"
+                                 :backDepart="true"
+                                 :treeOpera="true" />
+                <!--   8, 上传文件  -->
+                <a-button v-else-if="item.fieldShowType === FieldType.FILE_UP.value" type="primary" class="button-text"
+                          @click="clickButtonToUpload(item)">
+                  {{
+                    (formInline[item.dbFieldName] === 'null' || formInline[item.dbFieldName] === ''
+                      || formInline[item.dbFieldName] === null || formInline[item.dbFieldName] === undefined)
+                      ? $t('uploadFile.clickUpload')
+                      : $t('uploadFile.viewUploadedFiles')
+                  }}
+                </a-button>
+                <!--   9, 文本框  -->
+                <a-input v-else-if="item.fieldShowType === FieldType.TEXT_BOX.value"
+                         class="box-input"
+                         :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                         v-model="formInline[item.dbFieldName]"
+                         :maxLength="50"
+                         :placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseEnter')+item.dbFieldTxt" />
+                <!--   10, 下拉单选（数据字典）  -->
+                <j-dict-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value"
+                                   class="box-input"
+                                   v-model="formInline[item.dbFieldName]"
+                                   :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                   :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                   :type="'select'"
+                                   :triggerChange="false"
+                                   :dictCode="item.dictField" />
+                <!--   11, 下拉多选（数据字典）  -->
+                <j-multi-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value"
+                                    class="box-input"
+                                    v-model="formInline[item.dbFieldName]"
+                                    :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                                    :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                    :type="'select'"
+                                    :triggerChange="false"
+                                    :dictCode="item.dictField" />
+                <!--   12, 树选择       -->
+                <a-tree-select
+                  v-else-if="item.fieldShowType === FieldType.TREE.value"
+                  v-model="formInline[item.dbFieldName]"
+                  :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                  style="width: 100%"
+                  :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                  :tree-data="optionsData[item.dbFieldName]"
+                  tree-checkable
+                  treeCheckStrictly
+                  :label-in-value="false"
+                  :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
+                <!--  14, 年份选择 -->
+                <j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
+                        show-type="year"
+                        :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                        v-model="formInline[item.dbFieldName]"
+                        :default-value="defaultValue[item.dbFieldName]"
+                        date-format="YYYY"
+                        :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
+                <!--   15, 树选择（单选）       -->
+                <a-tree-select v-else-if="item.fieldShowType === FieldType.TREE_SINGLE.value"
+                               v-model="formInline[item.dbFieldName]"
+                               :getPopupContainer="triggerNode=> triggerNode.parentNode"
+                               style="width: 100%"
+                               :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
+                               :tree-data="optionsData[item.dbFieldName]"
+                               :label-in-value="false"
+                               :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
+              </a-form-model-item>
+            </div>
+          </template>
+        </div>
+      </div>
+    </template>
+    <upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
+  </a-form-model>
+</template>
+
+<script>
+import UserSelection from './selection/UserSelection.vue'
+import JMultipleDatePicker from './JMultipleDatePicker.vue'
+import StandardSelection from './selection/StandardSelection.vue'
+import JDictSelectTag from './dict/JDictSelectTag.vue'
+import JMultiSelectTag from './dict/JMultiSelectTag.vue'
+import UploadFile from './UploadFile.vue'
+import { FieldType } from '../enums/commonEnums.js'
+import { getAction } from '../api/manage.js'
+import { getFormDictTreeList } from '../api/api.js'
+
+export default {
+  name: 'CollapsiblePanelForm',
+  components: { UserSelection, JMultipleDatePicker, StandardSelection, JDictSelectTag, JMultiSelectTag, UploadFile },
+  props: {
+    // 获取表单数据的方法
+    getFormFunc: {
+      type: Function,
+      required: false,
+      default: () => {
+        return function () {
+        }
+      }
+    },
+    // 获取详细信息的方法
+    getDocumentInfoFunc: {
+      type: Function,
+      required: false,
+      default: () => {
+        return function () {
+        }
+      }
+    },
+    // 标准模块的区分：1，国内； 2，国外；3，企标
+    flag: {
+      type: String,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 特殊的placeholder，目前只处理了输入框，有需要再处理别的
+    specialPlaceholder: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {}
+      }
+    },
+    // 默认值
+    defaultValue: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {}
+      }
+    },
+    // 不可修改值
+    disabledFieldList: {
+      type: Array,
+      required: false,
+      default: () => {
+        return []
+      }
+    },
+    // 需要隐藏的字段
+    hiddenFieldList: {
+      type: Array,
+      required: false,
+      default: () => {
+        return []
+      }
+    },
+    // 是否可收起
+    isRetractable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data () {
+    return {
+      FieldType,
+      loading: false,
+      formInline: {},
+      isFormInline: false,
+      rules: {},
+      confirmLoading: false,
+      type: 2,
+      dataList: [],
+      ruleList: [],
+      uploadName: '',
+      optionsData: {}, // 用接口获取到的下拉数据
+      retractableFlag: {} // 面板展开收起的标识
+    }
+  },
+  created () {
+    if (this.$route.query.id) {
+      this.edit()
+    } else {
+      this.add()
+    }
+  },
+  methods: {
+    add () {
+      this.formInline = Object.assign({}, this.defaultValue)
+      this.$forceUpdate()
+      this.getForm()
+    },
+    edit () {
+      this.loading = true
+      this.getForm(() => {
+        if (!this.getDocumentInfoFunc || typeof this.getDocumentInfoFunc !== 'function') {
+          this.loading = false
+          return
+        }
+        // type标识是新增表单还是详情页
+        this.getDocumentInfoFunc({ id: this.$route.query.id.id, type: this.type }).then((res) => {
+          if (res.success) {
+            // 处理树结构多选回显
+            const formList = Object.values(this.dataList).reduce((acc, cur) => acc.concat(cur), [])
+            const treeMultipleField = formList.filter(tt => tt.fieldShowType === FieldType.TREE.value)
+            this.formInline = res.result
+            treeMultipleField.forEach(field => {
+              const valueArr = []
+              if (this.formInline[field.dbFieldName]) {
+                const values = this.formInline[field.dbFieldName].split(',')
+                for (let i = 0; i < values.length; i++) {
+                  valueArr[i] = {
+                    value: values[i]
+                  }
+                }
+                this.formInline[field.dbFieldName] = valueArr
+              } else {
+                this.formInline[field.dbFieldName] = undefined
+              }
+            })
+            const dictField = formList.filter(tt => tt.fieldShowType === FieldType.OPTION_SINGLE.value)
+            dictField.forEach(field => {
+              this.formInline[field.dbFieldName] = this.formInline[field.dbFieldName] || null
+            })
+            this.loading = false
+          } else {
+            this.loading = false
+          }
+        })
+      })
+    },
+    // 获取表单列表
+    getForm (callBack) {
+      if (!this.getFormFunc || typeof this.getFormFunc !== 'function') {
+        return
+      }
+      this.confirmLoading = true
+      const params = {
+        module: this.flag,
+        type: this.type
+      }
+      this.getFormFunc(params).then((res) => {
+        if (res.success) {
+          this.dataList = res.result
+          this.ruleList = res.result
+          this.integrateData()
+          this.getOptionsData() // 获取下拉数据
+          Object.keys(this.dataList).forEach(key => {
+            this.retractableFlag[key] = true
+          })
+          callBack && callBack()
+        }
+      })
+    },
+    // 设置表单校验
+    integrateData () {
+      this.isFormInline = false
+      const ruleList = []
+      for (const item in this.ruleList) {
+        this.ruleList[item].forEach(ol => {
+          ruleList.push(ol)
+        })
+      }
+      const rules = {}
+      ruleList.forEach((res, index) => {
+        const rule = []
+        if (res.fieldMustInput === '1') {
+          if ([FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value, FieldType.TEXT_LINK.value].includes(res.fieldShowType)) {
+            rule.push({
+              required: true,
+              message: res.dbFieldTxt + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            })
+          } else if (res.fieldShowType === FieldType.DATE_SINGLE.value) {
+            // 解决第一次校验不消失的问题
+            rule.push({
+              required: true,
+              message: res.dbFieldTxt + this.$t('cannotEmpty'),
+              trigger: ['change', 'blur']
+            })
+          } else {
+            rule.push({
+              required: true,
+              message: res.dbFieldTxt + this.$t('cannotEmpty'),
+              trigger: 'change'
+            })
+          }
+        }
+        if (rule.length > 0) {
+          rules[res.dbFieldName] = rule
+        }
+      })
+      this.rules = rules
+      this.isFormInline = true
+      this.confirmLoading = false
+    },
+    /**
+     * 处理需要通过接口获取的下拉数据
+     */
+    getOptionsData () {
+      const formList = Object.values(this.dataList).reduce((acc, cur) => acc.concat(cur), [])
+      formList.forEach(item => {
+        if (item.fieldShowType === FieldType.TREE.value || item.fieldShowType === FieldType.TREE_SINGLE.value) {
+          // 展示类型是树选择，且有接口的
+          if (item.fieldHref) {
+            getAction(item.fieldHref).then(res => {
+              if (res.success) {
+                this.$set(this.optionsData, item.dbFieldName, res.result)
+              }
+            })
+          } else if (item.dictId) {
+            getFormDictTreeList({ dictId: item.dictId }).then(res => {
+              if (res.success) {
+                this.$set(this.optionsData, item.dbFieldName, res.result)
+              }
+            })
+          }
+        }
+      })
+    },
+    // 点击点击上传按钮
+    clickButtonToUpload (item) {
+      this.$refs.uploadFile.open(this.formInline[item.dbFieldName])
+      this.uploadName = item.dbFieldName
+    },
+    // 文件上传改变后的回调
+    uploadFileChange (data) {
+      const attIdList = []
+      if (data && data.length > 0) {
+        data.map(item => {
+          attIdList.push(item.id)
+        })
+      }
+      /** 赋值给当前对应的表单文件 */
+      this.formInline[this.uploadName] = attIdList.join(',')
+      this.formInline = { ...this.formInline }
+    },
+    // 标准选择变化
+    standardSelectionChange (value, id) {
+      // this.formInline[value + '_by'] = id
+      this.formInline = { ...this.formInline }
+    },
+    // 选择用户得到用户名
+    userSelectNameChange (value, fieldName) {
+      this.formInline[fieldName + '_dictText'] = value
+    },
+    submit () {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const formInline = JSON.parse(JSON.stringify(this.formInline))
+          Object.keys(formInline).forEach(res => {
+            if (formInline[res] instanceof Array) {
+              if (formInline[res][0] instanceof Object) {
+                // 说明是树选择
+                formInline[res] = formInline[res].map(item => item.value).join(',')
+              } else {
+                formInline[res] = formInline[res].join(',')
+              }
+            }
+          })
+          this.$emit('submitFormData', formInline)
+        } else {
+          this.$emit('addFormWarning')
+          return false
+        }
+      })
+    },
+    clearValidate () {
+      this.$refs.ruleForm.clearValidate()
+    },
+    handleChangeRetractable (key) {
+      this.$set(this.retractableFlag, key, !this.retractableFlag[key])
+      this.$forceUpdate()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+/deep/ .ant-form-item-children {
+  width: 100%;
+  display: inline-block;
+}
+
+.form-flex-box {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.form-flex-item-line {
+  width: 100%;
+}
+
+.collapsible-panel-form {
+  margin-top: 20px;
+
+  &-header {
+    height: 56px;
+    line-height: 56px;
+    background: rgba(245, 245, 245, 0.6);
+    border-radius: 8px 8px 0 0;
+    border: 1px solid #E5E6EB;
+    padding: 0 20px;
+    font-size: 16px;
+    font-family: PingFang SC-Medium, PingFang SC, sans-serif;
+    font-weight: 600;
+    color: #1D2129;
+    display: flex;
+    justify-content: space-between;
+
+    .retractable-btn {
+      cursor: pointer;
+      font-size: 14px;
+      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
+      color: #D52C26;
+    }
+
+    .anticon {
+      margin-right: 8px;
+    }
+
+    .pack-up-btn {
+      transform: rotate(-90deg);
+    }
+
+    .unfold-btn {
+      transform: rotate(90deg);
+    }
+  }
+
+  &-content {
+    border: 1px solid #E5E6EB;
+    border-top: none;
+    border-radius: 0 0 8px 8px;
+    padding: 20px;
+  }
+}
+
+.form-flex-item {
+  width: calc(100% / 3);
+}
+</style>
diff --git a/src/views/workCenter/NewProcess.vue b/src/views/workCenter/NewProcess.vue
index 13c695a3..cc68c56c 100644
--- a/src/views/workCenter/NewProcess.vue
+++ b/src/views/workCenter/NewProcess.vue
@@ -21,7 +21,7 @@ export default {
           list: [
             {
               title: '标准法规入库/更正流程',
-              path: ''
+              path: '/workCenter/StandardEntryOrChangeProcess'
             },
             {
               title: '标注征求意见流程',
diff --git a/src/views/workCenter/standardEntryOrChangeProcess/StandardEntryOrChangeProcess.vue b/src/views/workCenter/standardEntryOrChangeProcess/StandardEntryOrChangeProcess.vue
new file mode 100644
index 00000000..03ca154d
--- /dev/null
+++ b/src/views/workCenter/standardEntryOrChangeProcess/StandardEntryOrChangeProcess.vue
@@ -0,0 +1,80 @@
+<template>
+  <internal-detail-page :title="pageTitle">
+    <div class="process-part-title">流程信息</div>
+    <a-form :form="form">
+      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardRegulationLibrary.nodeName')">
+        <a-input :placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.nodeName')"
+                 @change="event => event.target.value = event.target.value.trim()"
+                 :maxLength="50"
+                 v-decorator="['nodeName']" />
+      </a-form-item>
+    </a-form>
+
+    <div class="process-part-title">业务基本信息</div>
+    <collapsible-panel-form ref="addForm"
+                            :flag="StandardSource.DOMESTIC.value"
+                            :get-form-func="getFormFunc"
+                            :get-document-info-func="getDocumentInfoFunc"
+                            :special-placeholder="specialPlaceholder"
+                            :default-value="defaultValue"
+                            :disabled-field-list="disabledField"
+                            @submitFormData="submitFormData" />
+  </internal-detail-page>
+</template>
+
+<script>
+import InternalDetailPage from '../../../components/InternalDetailPage.vue'
+import CollapsiblePanelForm from '../../../components/CollapsiblePanelForm.vue'
+import { StandardSource } from '../../../enums/commonEnums.js'
+import { getDomesticStandardDocumentInfo, getDomesticStandardFormModal } from '../../../api/standardRegulationLibraryApi.js'
+
+export default {
+  name: 'StandardEntryOrChangeProcess',
+  components: { InternalDetailPage, CollapsiblePanelForm },
+  data () {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 4 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 20 }
+      },
+      StandardSource,
+      getFormFunc: getDomesticStandardFormModal,
+      getDocumentInfoFunc: getDomesticStandardDocumentInfo,
+      // 特殊的placeholder
+      specialPlaceholder: {
+        standard_number_temp: `${this.$t('standardRegulationLibrary.inputExample')}7258`
+      },
+      defaultValue: {
+        year_number: new Date().getFullYear() + ''
+      }
+    }
+  },
+  computed: {
+    pageTitle () {
+      return `流程中心——${this.$route.meta.title}（法规工程师发起）`
+    },
+    // 不可编辑的字段
+    disabledField () {
+      if (this.isEdit) {
+        // 标准编号，被代替标准号，被引用标准号，标准类别，年代号
+        return ['standard_number_temp', 'replaced_by_standard_number', 'referenced_standard', 'standard_class', 'year_number']
+      }
+      return ['replaced_by_standard_number', 'referenced_standard']
+    }
+  },
+  methods: {
+    // 表单提交的回调，获取表单数据
+    submitFormData (formInline) {
+      console.log(formInline)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>