From bee2d9bd7ef87709a7e2a80d578292f5268de33b Mon Sep 17 00:00:00 2001
From: danshihao <danshihao@syxysoft.com>
Date: Fri, 3 Nov 2023 10:32:52 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E6=A0=87=E5=87=86=E5=AE=A3=E8=B4=AF?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/lang/workCenter/en.js              |  14 +
 src/common/lang/workCenter/zh.js              |  14 +
 src/views/workCenter/NewProcess.vue           |   2 +-
 .../modules/BaseInfoForm.vue                  |   2 -
 .../PermissionApplicationProcess.vue          |   2 +-
 .../StandardPromotionProcess.vue              | 217 +++++++++++++
 .../modules/BaseInfoForm.vue                  | 302 ++++++++++++++++++
 7 files changed, 549 insertions(+), 4 deletions(-)
 create mode 100644 src/views/workCenter/standardPromotionProcess/StandardPromotionProcess.vue
 create mode 100644 src/views/workCenter/standardPromotionProcess/modules/BaseInfoForm.vue

diff --git a/src/common/lang/workCenter/en.js b/src/common/lang/workCenter/en.js
index 1fdd1edd..58c94cd2 100644
--- a/src/common/lang/workCenter/en.js
+++ b/src/common/lang/workCenter/en.js
@@ -300,5 +300,19 @@ module.exports = {
     applicationDescription: '申请说明',
     applicant: '申请人',
     applyForPermission: '申请权限'
+  },
+  // 标准宣贯流程
+  standardPromotionProcess: {
+    urgency: '紧急程度',
+    esNumber: '企标编号',
+    esName: '企标名称',
+    promoter: '宣贯人',
+    mainDeliveryDepart: '主送部门',
+    subject: '主题',
+    promotionDate: '宣贯日期',
+    participatingUnits: '参宣单位',
+    contactPerson: '联络人',
+    content: '内容',
+    promotionalMaterials: '宣贯材料'
   }
 }
diff --git a/src/common/lang/workCenter/zh.js b/src/common/lang/workCenter/zh.js
index f5b5b5a4..829b51bd 100644
--- a/src/common/lang/workCenter/zh.js
+++ b/src/common/lang/workCenter/zh.js
@@ -317,5 +317,19 @@ module.exports = {
     applicationDescription: '申请说明',
     applicant: '申请人',
     applyForPermission: '申请权限'
+  },
+  // 标准宣贯流程
+  standardPromotionProcess: {
+    urgency: '紧急程度',
+    esNumber: '企标编号',
+    esName: '企标名称',
+    promoter: '宣贯人',
+    mainDeliveryDepart: '主送部门',
+    subject: '主题',
+    promotionDate: '宣贯日期',
+    participatingUnits: '参宣单位',
+    contactPerson: '联络人',
+    content: '内容',
+    promotionalMaterials: '宣贯材料'
   }
 }
diff --git a/src/views/workCenter/NewProcess.vue b/src/views/workCenter/NewProcess.vue
index 65a00c7e..2982ce01 100644
--- a/src/views/workCenter/NewProcess.vue
+++ b/src/views/workCenter/NewProcess.vue
@@ -107,7 +107,7 @@ export default {
             },
             { // 标准宣贯流程
               title: this.$t('workCenter.newProcess.standardPromotionProcess'),
-              path: ''
+              path: '/workCenter/StandardPromotionProcess'
             }
           ]
         },
diff --git a/src/views/workCenter/enterpriseStandardInspectionRectification/modules/BaseInfoForm.vue b/src/views/workCenter/enterpriseStandardInspectionRectification/modules/BaseInfoForm.vue
index 48b1c57f..fe226191 100644
--- a/src/views/workCenter/enterpriseStandardInspectionRectification/modules/BaseInfoForm.vue
+++ b/src/views/workCenter/enterpriseStandardInspectionRectification/modules/BaseInfoForm.vue
@@ -186,7 +186,6 @@
 </template>
 
 <script>
-import { StandardSource } from '@/enums/commonEnums'
 import UploadFile from '@comp/UploadFile'
 
 export default {
@@ -201,7 +200,6 @@ export default {
   },
   data () {
     return {
-      StandardSource,
       formInline: {},
       // 操作类型
       operationType: null,
diff --git a/src/views/workCenter/permissionApplicationProcess/PermissionApplicationProcess.vue b/src/views/workCenter/permissionApplicationProcess/PermissionApplicationProcess.vue
index c56f47a7..59856126 100644
--- a/src/views/workCenter/permissionApplicationProcess/PermissionApplicationProcess.vue
+++ b/src/views/workCenter/permissionApplicationProcess/PermissionApplicationProcess.vue
@@ -136,12 +136,12 @@
 
 <script>
 
-// 标准立项的人员信息
 import InternalDetailPage from '@comp/InternalDetailPage'
 import ProcessDetailList from '@comp/ProcessDetailList'
 import PersonnelInfo from '@comp/PersonnelInfo'
 import BaseInfoTable from '@views/workCenter/permissionApplicationProcess/modules/BaseInfoTable'
 
+// 标准立项的人员信息
 const approvalPersonalInfo = [ // 人员信息的数据
   {
     id: 1,
diff --git a/src/views/workCenter/standardPromotionProcess/StandardPromotionProcess.vue b/src/views/workCenter/standardPromotionProcess/StandardPromotionProcess.vue
new file mode 100644
index 00000000..e4bc1cc3
--- /dev/null
+++ b/src/views/workCenter/standardPromotionProcess/StandardPromotionProcess.vue
@@ -0,0 +1,217 @@
+<template>
+  <internal-detail-page :title="pageTitle" :content-padding="0">
+    <!--  标题右侧tab  -->
+    <template v-slot:titleRightCustom>
+      <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>
+    </template>
+
+    <!--基本信息-->
+    <div class="detail-page-scroll-content" v-show="switchValue === 'base'">
+      <!--  流程信息  -->
+      <div class="process-part-title">{{ $t('processInformation') }}</div>
+      <a-form :form="processInfoForm">
+        <a-row>
+          <a-col :span="12">
+            <!--  流程名称  -->
+            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('processName')">
+              <a-input :placeholder="$t('pleaseEnter') + $t('processName')"
+                       @change="event => event.target.value = event.target.value.trim()"
+                       :maxLength="50"
+                       :disabled="disabled || processDisabled"
+                       v-decorator="['processName', validatorRules.processName]" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <!--  截止日期  -->
+            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('expirationDate')">
+              <a-date-picker :placeholder="$t('pleaseSelect') + $t('expirationDate')"
+                             style="width: 100%"
+                             :disabled="disabled || processDisabled"
+                             value-format="YYYY-MM-DD"
+                             v-decorator="['expirationDate']" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="24">
+            <!--  流程说明  -->
+            <a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('processExplain')">
+              <a-textarea :placeholder="$t('pleaseEnter') + $t('processExplain')"
+                          :maxLength="500"
+                          :rows="4"
+                          :disabled="disabled || processDisabled"
+                          v-decorator="['processExplain']" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+
+      <!--  业务基本信息  -->
+      <div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
+
+      <base-info-form/>
+
+      <!--  流程审批信息  -->
+      <div class="process-part-title">{{ $t('processApprovalInformation') }}</div>
+      <a-form :form="approvalInfoForm">
+        <!--备注-->
+        <a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('remarks')">
+          <a-textarea :placeholder="$t('pleaseEnter') + $t('remarks')"
+                      :maxLength="500"
+                      :rows="4"
+                      v-decorator="['remarks', validatorRules.remarks]" />
+        </a-form-item>
+        <!--附件-->
+        <a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('businessSupport.questionAnswer.attach')">
+          <j-upload v-decorator="['file']" return-id />
+        </a-form-item>
+      </a-form>
+    </div>
+    <!--  人员信息  -->
+    <div v-if="switchValue === 'user'" class="detail-page-scroll-content p-0">
+      <process-detail-list :url="url">
+        <personnel-info slot="personnelInfo" :data="personnelInfoData" :currentNode="currentNode"></personnel-info>
+      </process-detail-list>
+    </div>
+
+    <div class="detail-page-bottom-operate-box">
+      <a-button type="primary" :loading="loading" @click="handleSave" ghost><i class="iconfont icon-save" />{{ $t('preservation') }}</a-button>
+      <a-button type="primary" :loading="loading" @click="handleSubmit" icon="upload">{{ $t('submit') }}</a-button>
+      <a-button type="primary" :loading="loading" @click="handleAgree" icon="check-circle">{{ $t('agree') }}</a-button>
+    </div>
+  </internal-detail-page>
+</template>
+
+<script>
+import PersonnelInfo from '@comp/PersonnelInfo'
+import ProcessDetailList from '@comp/ProcessDetailList'
+import InternalDetailPage from '@comp/InternalDetailPage'
+import BaseInfoForm from '@views/workCenter/standardPromotionProcess/modules/BaseInfoForm'
+
+// 人员信息
+const approvalPersonalInfo = [ // 人员信息的数据
+  {
+    id: 1,
+    nodeName: '稽查负责人申请延期',
+    nodeRoleName: '稽查负责人',
+    canChoose: false,
+    userList: `系统管理员`
+  },
+  {
+    id: 2,
+    nodeName: '负责人主管级领导审批',
+    nodeRoleName: '负责人主管级领导',
+    canChoose: true,
+    chooseType: 'radio',
+    // chooseSource: 'contactManage',
+    fieldName: 'contactUser'
+  },
+  {
+    id: 3,
+    nodeName: '稽查联络人评估',
+    nodeRoleName: '稽查联络人',
+    canChoose: false,
+    chooseType: 'checkbox',
+    // chooseSource: 'contactManage',
+    fieldName: 'contactUser'
+  }
+]
+
+export default {
+  name: 'StandardPromotionProcess',
+  components: { BaseInfoForm, PersonnelInfo, ProcessDetailList, InternalDetailPage },
+  data () {
+    return {
+      loading: false,
+      switchValue: 'base',
+      disabled: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 4 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 20 }
+      },
+      longLabelCol: {
+        xs: { span: 24 },
+        sm: { span: 2 }
+      },
+      longWrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 22 }
+      },
+      currentNode: '1',
+      personnelInfoData: [], // 人员信息数据
+      validatorRules: {
+        // 流程名称
+        processName: {
+          rules: [
+            { required: true, message: this.$t('pleaseEnter') + this.$t('processName') }
+          ],
+          validateTrigger: 'blur'
+        },
+        // 授权到期日期
+        authExpirationDate: {
+          rules: [
+            { required: true, message: this.$t('pleaseSelect') + this.$t('workCenter.permissionApplicationProcess.authExpirationDate') }
+          ],
+          validateTrigger: 'change'
+        },
+        // 备注
+        remarks: {
+          rules: [
+            { required: false, message: this.$t('pleaseEnter') + this.$t('remarks') }
+          ],
+          validateTrigger: 'blur'
+        }
+      },
+      processInfoForm: this.$form.createForm(this),
+      baseInfoForm: this.$form.createForm(this),
+      approvalInfoForm: this.$form.createForm(this),
+      url: {
+        list: '' // 人员信息右侧表的分页查询接口
+      }
+    }
+  },
+  computed: {
+    pageTitle () {
+      return this.$t('flowCenter') + this.$route.meta.title
+    },
+    processDisabled () {
+      return +this.currentNode > 1
+    }
+  },
+  methods: {
+    switchChange (value) {
+      this.switchValue = value
+    },
+    handleSave () {
+      // if (this.loading) return
+
+    },
+    handleSubmit () {
+      if (this.loading) return
+      this.currentNode = +this.currentNode + 1 + ''
+    },
+    handleAgree () {
+      if (this.loading) return
+      this.currentNode = +this.currentNode + 1 + ''
+    }
+  },
+  mounted () {
+    this.personnelInfoData = approvalPersonalInfo
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/workCenter/standardPromotionProcess/modules/BaseInfoForm.vue b/src/views/workCenter/standardPromotionProcess/modules/BaseInfoForm.vue
new file mode 100644
index 00000000..cafa52fd
--- /dev/null
+++ b/src/views/workCenter/standardPromotionProcess/modules/BaseInfoForm.vue
@@ -0,0 +1,302 @@
+<template>
+  <a-form-model :model="formInline" class="form-add" :rules="rules" ref="ruleForm">
+    <div class="collapsible-panel-form">
+      <div class="form-flex-box collapsible-panel-form-content collapsible-content-no-head">
+        <!--  紧急程度  -->
+        <div class="box-title-text form-flex-item">
+          <div class="title-text">
+            <span class="required">*</span>
+            <span class="title-text-text" :title="$t('workCenter.standardPromotionProcess.urgency')">
+              {{ $t('workCenter.standardPromotionProcess.urgency') }}
+            </span>
+          </div>
+          <a-form-model-item class="item-model" prop="urgency">
+            <j-dict-select-tag :disabled="disabled"
+                               v-model="formInline.urgency"
+                               :placeholder="$t('pleaseSelect')+$t('workCenter.standardPromotionProcess.urgency')"
+                               :triggerChange="false"
+                               type="radio"
+                               dictCode="yn" />
+          </a-form-model-item>
+        </div>
+        <!--  企标编号  -->
+        <div class="box-title-text form-flex-item">
+          <div class="title-text">
+            <span class="required">*</span>
+            <span class="title-text-text" :title="$t('workCenter.standardPromotionProcess.esNumber')">
+              {{ $t('workCenter.standardPromotionProcess.esNumber') }}
+            </span>
+          </div>
+          <a-form-model-item class="item-model" prop="esNumber">
+            <standard-selection source="3"
+                                :disabledSourceSearch="true"
+                                :disabled="disabled"
+                                :placeholder="$t('pleaseSelect')+$t('workCenter.standardPromotionProcess.esNumber')"
+                                @nameChange="changeStandardName"
+                                v-model="formInline.esNumber" />
+          </a-form-model-item>
+        </div>
+        <!--  企标名称  -->
+        <div class="box-title-text form-flex-item">
+          <div class="title-text">
+            <span class="title-text-text" :title="$t('workCenter.standardPromotionProcess.esName')">
+              {{ $t('workCenter.standardPromotionProcess.esName') }}
+            </span>
+          </div>
+          <a-form-model-item class="item-model" prop="esName">
+            <a-input disabled
+                     v-model="formInline.esName"
+                     :maxLength="50"
+                     :placeholder="$t('pleaseEnter')+$t('workCenter.standardPromotionProcess.esName')" />
+          </a-form-model-item>
+        </div>
+        <!--  宣贯人  -->
+        <div class="box-title-text form-flex-item">
+          <div class="title-text">
+            <span class="required">*</span>
+            <span class="title-text-text" :title="$t('workCenter.standardPromotionProcess.promoter')">
+              {{ $t('workCenter.standardPromotionProcess.promoter') }}
+            </span>
+          </div>
+          <a-form-model-item class="item-model" prop="promoter">
+            <user-selection :placeholder="$t('pleaseSelect')+$t('workCenter.standardPromotionProcess.promoter')"
+                            v-model="formInline.promoter"
+                            :disabled="disabled"
+                            type="radio" />
+          </a-form-model-item>
+        </div>
+        <!--  主送部门  -->
+        <div class="box-title-text form-flex-item">
+          <div class="title-text">
+            <span class="required">*</span>
+            <span class="title-text-text" :title="$t('workCenter.standardPromotionProcess.mainDeliveryDepart')">
+              {{ $t('workCenter.standardPromotionProcess.mainDeliveryDepart') }}
+            </span>
+          </div>
+          <a-form-model-item class="item-model" prop="mainDeliveryDepart">
+            <a-input v-model="formInline.mainDeliveryDepart"
+                     :maxLength="50"
+                     :placeholder="$t('pleaseEnter')+$t('workCenter.standardPromotionProcess.mainDeliveryDepart')" />
+          </a-form-model-item>
+        </div>
+        <!--  主题  -->
+        <div class="box-title-text form-flex-item">
+          <div class="title-text">
+            <span class="required">*</span>
+            <span class="title-text-text" :title="$t('workCenter.standardPromotionProcess.subject')">
+              {{ $t('workCenter.standardPromotionProcess.subject') }}
+            </span>
+          </div>
+          <a-form-model-item class="item-model" prop="subject">
+            <a-input v-model="formInline.subject"
+                     :maxLength="50"
+                     :placeholder="$t('pleaseEnter')+$t('workCenter.standardPromotionProcess.subject')" />
+          </a-form-model-item>
+        </div>
+        <!--  宣贯日期  -->
+        <div class="box-title-text form-flex-item">
+          <div class="title-text">
+            <span class="required">*</span>
+            <span class="title-text-text" :title="$t('workCenter.standardPromotionProcess.promotionDate')">
+              {{ $t('workCenter.standardPromotionProcess.promotionDate') }}
+            </span>
+          </div>
+          <a-form-model-item class="item-model" prop="promotionDate">
+            <j-date date-format="YYYY-MM-DD" style="width: 100%" showType="day" :disabled="disabled"
+                    :placeholder="$t('pleaseSelect') + $t('workCenter.standardPromotionProcess.promotionDate')"
+                    v-model="formInline.promotionDate" />
+          </a-form-model-item>
+        </div>
+        <!--  参宣单位  -->
+        <div class="box-title-text form-flex-item">
+          <div class="title-text">
+            <span class="required">*</span>
+            <span class="title-text-text" :title="$t('workCenter.standardPromotionProcess.participatingUnits')">
+              {{ $t('workCenter.standardPromotionProcess.participatingUnits') }}
+            </span>
+          </div>
+          <a-form-model-item class="item-model" prop="participatingUnits">
+            <j-select-depart
+              :disabled="disabled"
+              v-model="formInline.participatingUnits"
+              :multi="true"
+              :placeholder="$t('pleaseSelect') + $t('workCenter.standardPromotionProcess.participatingUnits')"
+              :backDepart="true"
+              :treeOpera="true">>
+            </j-select-depart>
+          </a-form-model-item>
+        </div>
+        <!--  联络人  -->
+        <div class="box-title-text form-flex-item">
+          <div class="title-text">
+            <span class="required">*</span>
+            <span class="title-text-text" :title="$t('workCenter.standardPromotionProcess.contactPerson')">
+              {{ $t('workCenter.standardPromotionProcess.contactPerson') }}
+            </span>
+          </div>
+          <a-form-model-item class="item-model" prop="contactPerson">
+            <a-input disabled
+                     v-model="formInline.contactPerson"
+                     :maxLength="50"
+                     :placeholder="$t('pleaseEnter')+$t('workCenter.standardPromotionProcess.contactPerson')" />
+          </a-form-model-item>
+        </div>
+        <!--  内容  -->
+        <div class="box-title-text form-flex-item">
+          <div class="title-text">
+            <span class="required">*</span>
+            <span class="title-text-text" :title="$t('workCenter.standardPromotionProcess.content')">
+              {{ $t('workCenter.standardPromotionProcess.content') }}
+            </span>
+          </div>
+          <a-form-model-item class="item-model" prop="content">
+            <a-textarea :maxLength="500"
+                        :placeholder="$t('pleaseSelect')+$t('workCenter.standardPromotionProcess.content')"
+                        :rows="4"
+                        v-model="formInline.content" />
+          </a-form-model-item>
+        </div>
+        <!--  附件  -->
+        <div class="box-title-text form-flex-item">
+          <div class="title-text">
+            <span class="title-text-text" :title="$t('workCenter.standardPromotionProcess.promotionalMaterials')">
+              {{ $t('workCenter.standardPromotionProcess.promotionalMaterials') }}
+            </span>
+          </div>
+          <a-form-model-item class="item-model" prop="promotionalMaterials">
+            <a-button type="primary" class="button-text" @click="clickButtonToUpload" :disabled="disabled">
+              {{
+                (formInline.promotionalMaterials === 'null' || formInline.promotionalMaterials === '' || formInline.promotionalMaterials === null || formInline.promotionalMaterials === undefined)
+                  ? $t('uploadFile.clickUpload')
+                  : $t('uploadFile.viewUploadedFiles')
+              }}
+            </a-button>
+          </a-form-model-item>
+        </div>
+      </div>
+    </div>
+    <!--  上传  -->
+    <upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
+  </a-form-model>
+</template>
+
+<script>
+import StandardSelection from '@comp/selection/StandardSelection'
+import UserSelection from '@comp/selection/UserSelection'
+import UploadFile from '@comp/UploadFile'
+export default {
+  name: 'BaseInfoForm',
+  components: { UploadFile, UserSelection, StandardSelection },
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      formInline: {},
+      // 操作类型
+      operationType: null,
+      rules: {
+        // 操作类型
+        operationType: [
+          {
+            required: true,
+            message: this.$t('workCenter.esInspectionRectification.operationType') + this.$t('cannotEmpty'),
+            trigger: 'change'
+          }
+        ],
+        // 整改结果
+        rectificationResults: [
+          {
+            required: true,
+            message: this.$t('workCenter.esInspectionRectification.rectificationResults') + this.$t('cannotEmpty'),
+            trigger: 'blur'
+          }
+        ],
+        // 申请延期日期
+        requestExtensionDate: [
+          {
+            required: true,
+            message: this.$t('workCenter.esInspectionRectification.requestExtensionDate') + this.$t('cannotEmpty'),
+            trigger: 'change'
+          }
+        ],
+        // 延期说明
+        extensionDescription: [
+          {
+            required: true,
+            message: this.$t('workCenter.esInspectionRectification.extensionDescription') + this.$t('cannotEmpty'),
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 拿到外面传进来的数据初始化，因为套了几层就不在外层初始化数据了
+    initData (data) {
+      this.data = data
+      // 给表单赋值
+      // this.formInline =
+    },
+    // 外层要获取数据
+    getData () {
+      // 把数据抛出，在线编辑不知道要不要抛
+      const data = {}
+      data.formInline = this.formInline
+      return data
+    },
+    // 外层获取数据要过校验,返回false表示没有通过校验
+    getDataValidate (callback) {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const data = {}
+          data.formInline = this.formInline
+          callback(data)
+        }
+      })
+    },
+    // 选择标准带出名称
+    changeStandardName (val) {
+      this.formInline.esName = val
+    },
+    // 点击点击上传按钮
+    clickButtonToUpload (item) {
+      this.$refs.uploadFile.open(item.fileId)
+      // this.uploadName = item.dbFieldName
+    },
+    // 文件上传改变后的回调
+    uploadFileChange (data) {
+      const attIdList = []
+      if (data && data.length > 0) {
+        data.map(item => {
+          attIdList.push(item.id)
+        })
+      }
+      /** 赋值给当前对应的表单文件 */
+      this.form.file = attIdList.join(',')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+.collapsible-content-no-head {
+  border-top: 1px solid #E5E6EB;
+  border-radius: 8px 8px 8px 8px;
+}
+// 无边框无背景
+.readonly-transparent {
+  background-color: transparent;
+  border-color: transparent;
+  &:hover {
+    cursor: default;
+    background-color: transparent;
+    border-color: transparent;
+  }
+}
+</style>