diff --git a/src/common/lang/en-us.js b/src/common/lang/en-us.js
index 5030d795..9e1082cf 100644
--- a/src/common/lang/en-us.js
+++ b/src/common/lang/en-us.js
@@ -161,6 +161,7 @@ module.exports = {
   lookDetail: '查看详情',
   batchReject: '批量驳回',
   pleaseSelectDistributeData: '请选择要分发的数据',
+  deadline: '截止时间',
   // 树右键
   treeRight: {
     addFolder: 'Create New Folder',
diff --git a/src/common/lang/workCenter/en.js b/src/common/lang/workCenter/en.js
index 325ca20a..335a366e 100644
--- a/src/common/lang/workCenter/en.js
+++ b/src/common/lang/workCenter/en.js
@@ -100,6 +100,16 @@ module.exports = {
     batchSetDrafter: '批量设置主起草人',
     drafter: '主起草人'
   },
+  // 企标制修订流程
+  enStandardRevision: {
+    standardText: '标准文本',
+    onLineEditing: '在线编辑',
+    addOtherDrafter: '添加其他起草人',
+    addEditDrafter: '新增/编辑起草人',
+    draftingUnit: '起草单位',
+    drafter: '起草人',
+    draftingScope: '起草范围'
+  },
   // 流程配置
   processConfig: {
     processType: '流程类型',
diff --git a/src/common/lang/workCenter/zh.js b/src/common/lang/workCenter/zh.js
index 7aa1a424..e5991243 100644
--- a/src/common/lang/workCenter/zh.js
+++ b/src/common/lang/workCenter/zh.js
@@ -13,7 +13,7 @@ module.exports = {
     enterpriseProjectChangePlan: '企标立项/变更计划',
     annualRevisionPlanActivelyReport: '年度制修订计划审批流程(各部门主动上报)',
     annualRevisionPlanStandardizationInit: '年度制修订计划审批流程(标准化发起)',
-    enterpriseStandardSystemRevisionProcess: '企标制修订流程',
+    enterpriseStandardSystemRevisionProcess: '企标制修订流程(草案编写/征求意见/报批)',
     bidChangeProcess: '企标更改流程',
     processOfEnterpriseBidReview: '企标复审流程',
     processOfEnterpriseBidAnnulment: '企标废止流程',
@@ -100,6 +100,16 @@ module.exports = {
     batchSetDrafter: '批量设置主起草人',
     drafter: '主起草人'
   },
+  // 企标制修订流程
+  enStandardRevision: {
+    standardText: '标准文本',
+    onLineEditing: '在线编辑',
+    addOtherDrafter: '添加其他起草人',
+    addEditDrafter: '新增/编辑起草人',
+    draftingUnit: '起草单位',
+    drafter: '起草人',
+    draftingScope: '起草范围'
+  },
   // 流程配置
   processConfig: {
     processType: '流程类型',
diff --git a/src/common/lang/zh-cn.js b/src/common/lang/zh-cn.js
index 01141253..0bf152a3 100644
--- a/src/common/lang/zh-cn.js
+++ b/src/common/lang/zh-cn.js
@@ -164,6 +164,7 @@ module.exports = {
   lookDetail: '查看详情',
   batchReject: '批量驳回',
   pleaseSelectDistributeData: '请选择要分发的数据',
+  deadline: '截止时间',
   // 树右键
   treeRight: {
     addFolder: '新增文件夹',
diff --git a/src/views/workCenter/NewProcess.vue b/src/views/workCenter/NewProcess.vue
index ffdb91b5..c368ccaf 100644
--- a/src/views/workCenter/NewProcess.vue
+++ b/src/views/workCenter/NewProcess.vue
@@ -63,7 +63,7 @@ export default {
             },
             { // 企标制修订流程
               title: this.$t('workCenter.newProcess.enterpriseStandardSystemRevisionProcess'),
-              path: ''
+              path: '/workCenter/enterpriseStandardRevision/enterpriseStandardRevisionFlow'
             },
             { // 企标更改流程
               title: this.$t('workCenter.newProcess.bidChangeProcess'),
diff --git a/src/views/workCenter/annualRevisionPlanActivelyReport/RevisionPlanActivelyReportFlow.vue b/src/views/workCenter/annualRevisionPlanActivelyReport/RevisionPlanActivelyReportFlow.vue
index 4e3d9066..256b15bd 100644
--- a/src/views/workCenter/annualRevisionPlanActivelyReport/RevisionPlanActivelyReportFlow.vue
+++ b/src/views/workCenter/annualRevisionPlanActivelyReport/RevisionPlanActivelyReportFlow.vue
@@ -224,7 +224,7 @@ export default {
       this.personnelInfoData = personData
     } else {
       this.personnelInfoData = personData.map(item => {
-        return { ...item, canChoose: false }
+        return { ...item, canChoose: false, fieldName: undefined }
       })
     }
     // 如果是查看进入的，不可编辑，不可操作
diff --git a/src/views/workCenter/annualRevisionPlanStandardizationInit/RevisionPlanStandardizationInitFlow.vue b/src/views/workCenter/annualRevisionPlanStandardizationInit/RevisionPlanStandardizationInitFlow.vue
index 1c932ab3..fca5ee6d 100644
--- a/src/views/workCenter/annualRevisionPlanStandardizationInit/RevisionPlanStandardizationInitFlow.vue
+++ b/src/views/workCenter/annualRevisionPlanStandardizationInit/RevisionPlanStandardizationInitFlow.vue
@@ -206,7 +206,7 @@ export default {
       this.personnelInfoData = personData
     } else {
       this.personnelInfoData = personData.map(item => {
-        return { ...item, canChoose: false }
+        return { ...item, canChoose: false, fieldName: undefined }
       })
     }
     // 如果是查看进入的，不可编辑，不可操作
diff --git a/src/views/workCenter/enterpriseStandardInitChange/PlanApprovalChangeFlow.vue b/src/views/workCenter/enterpriseStandardInitChange/PlanApprovalChangeFlow.vue
index f3f381d4..56c1858b 100644
--- a/src/views/workCenter/enterpriseStandardInitChange/PlanApprovalChangeFlow.vue
+++ b/src/views/workCenter/enterpriseStandardInitChange/PlanApprovalChangeFlow.vue
@@ -479,6 +479,9 @@ export default {
       this.personnelInfoData = approvalPersonalInfo
       this.disabled = false
     } else {
+      this.personnelInfoData = approvalPersonalInfo.map(item => {
+        return { ...item, canChoose: false, fieldName: undefined }
+      })
       this.disabled = true
     }
     // 如果是查看进入的，不可编辑，不可操作
diff --git a/src/views/workCenter/enterpriseStandardRevision/EnterpriseStandardRevisionFlow.vue b/src/views/workCenter/enterpriseStandardRevision/EnterpriseStandardRevisionFlow.vue
new file mode 100644
index 00000000..7cc9b9cf
--- /dev/null
+++ b/src/views/workCenter/enterpriseStandardRevision/EnterpriseStandardRevisionFlow.vue
@@ -0,0 +1,452 @@
+<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 v-if="switchValue === 'base'" class="detail-page-scroll-content">
+      <!--  流程信息  -->
+      <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()"
+                       disabled
+                       :maxLength="50"
+                       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"
+                             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"
+                          v-decorator="['processExplain']" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+
+      <!--  业务基本信息  -->
+      <div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
+      <!--  节点1、主起草人起草分发  -->
+      <main-drafter-sent-base-info v-if="currentNode === 1" :flowInitType="flowInitType" ref="baseInfoRef"></main-drafter-sent-base-info>
+      <!--  节点2、其他起草人上传企标  -->
+      <!--  节点3、主起草人汇总上传会议纪要  -->
+      <!--  节点4、标准化审核 -->
+      <!--  节点5、评分人打分  -->
+      <!--  节点6、标准化确认是否开启征求意见  -->
+      <!--  节点7、部所联络人下发  -->
+      <!--  节点8、征求意见对象填写意见  -->
+      <!--  节点9、部所联络人汇总数据  -->
+      <!--  节点10、部所联络人主管级领导审批  -->
+      <!--  节点11、主起草人汇总  -->
+      <!--  节点12、主起草人上传会议纪要  -->
+      <!--  节点13、其他起草人校对  -->
+      <!--  节点14、主管级领导审批  -->
+      <!--  节点15、标准化审批  -->
+      <!--  节点16、相关部门领导会签  -->
+      <!--  节点17、总工程师审批  -->
+      <!--  节点18、主起草人发布  -->
+
+      <!--  流程审批信息  -->
+      <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" v-if="!onlyLook">
+      <!--  发起节点  -->
+      <template v-if="currentNode === 1">
+        <!--  保存  -->
+        <a-button type="primary" ghost :loading="loading" @click="handleSave"><i class="iconfont icon-save"></i> {{ $t('preservation') }}</a-button>
+        <!--  提交  -->
+        <a-button type="primary" :loading="loading" @click="handleStart" icon="upload">{{ $t('submit') }}</a-button>
+      </template>
+      <!--  各部所联络人填写/下发任务  -->
+      <template v-else-if="[2, 3, 5, 6, 7, 8, 9, 11, 12].includes(currentNode)">
+        <!--  转办  -->
+        <a-button type="primary" ghost :loading="loading" @click="handleTurnTo" icon="arrow-up">{{ $t('turnTo') }}</a-button>
+        <!--  保存  -->
+        <a-button type="primary" ghost :loading="loading" @click="handleSave"><i class="iconfont icon-save"></i> {{ $t('preservation') }}</a-button>
+        <!--  提交  -->
+        <a-button type="primary" :loading="loading" @click="handleSubmit" icon="upload">{{ $t('submit') }}</a-button>
+      </template>
+      <template v-else-if="currentNode === 18">
+        <!--  提交  -->
+        <a-button type="primary" :loading="loading" @click="handleSubmit" icon="upload">{{ $t('submit') }}</a-button>
+      </template>
+      <template v-else>
+        <!--  转办  -->
+        <a-button type="primary" ghost :loading="loading" @click="handleTurnTo" icon="arrow-up">{{ $t('turnTo') }}</a-button>
+        <!--  保存  -->
+        <a-button type="primary" ghost :loading="loading" @click="handleSave"><i class="iconfont icon-save"></i> {{ $t('preservation') }}</a-button>
+        <!--  同意  -->
+        <a-button type="primary" :loading="loading" @click="handleAgree" icon="check-circle">{{ $t('agree') }}</a-button>
+        <!--  驳回  -->
+        <a-button type="primary" :loading="loading" @click="handleReject" icon="close-circle">{{ $t('reject') }}</a-button>
+      </template>
+    </div>
+
+    <!--  选人弹框  -->
+    <user-select-modal ref="userSelectModal" type="radio" @change="userSelectModalChange"></user-select-modal>
+  </internal-detail-page>
+</template>
+
+<script>
+import InternalDetailPage from '@/components/InternalDetailPage'
+import UserSelectModal from '@/components/selection/UserSelectModal'
+import ProcessDetailList from '@/components/ProcessDetailList'
+import PersonnelInfo from '@/components/PersonnelInfo'
+import MainDrafterSentBaseInfo from './modules/MainDrafterSentBaseInfo'
+
+const personData = [
+  {
+    id: 1,
+    nodeName: '主起草人起草分发',
+    nodeRoleName: '主起草人',
+    canChoose: false
+  },
+  {
+    id: 2,
+    nodeName: '其他起草人上传企标',
+    nodeRoleName: '其他起草人',
+    canChoose: false
+  },
+  {
+    id: 3,
+    nodeName: '主起草人汇总上传会议纪要',
+    nodeRoleName: '主起草人',
+    canChoose: false
+  },
+  {
+    id: 4,
+    nodeName: '标准化审批',
+    nodeRoleName: '标准化',
+    canChoose: true,
+    chooseType: 'radio',
+    fieldName: ''
+  },
+  {
+    id: 5,
+    nodeName: '评分人打分',
+    nodeRoleName: '评分人',
+    canChoose: false
+  },
+  {
+    id: 6,
+    nodeName: '标准化确认是否开启征求意见',
+    nodeRoleName: '标准化',
+    canChoose: false
+  },
+  {
+    id: 7,
+    nodeName: '部所联络人下发',
+    nodeRoleName: '部所联络人',
+    canChoose: false
+  },
+  {
+    id: 8,
+    nodeName: '征求意见对象填写意见',
+    nodeRoleName: '征求意见对象',
+    canChoose: true,
+    chooseType: 'checkbox',
+    fieldName: ''
+  },
+  {
+    id: 9,
+    nodeName: '部所联络人汇总数据',
+    nodeRoleName: '部所联络人',
+    canChoose: false
+  },
+  {
+    id: 10,
+    nodeName: '部所联络人主管级领导审批',
+    nodeRoleName: '部所联络人主管级领导',
+    canChoose: false
+  },
+  {
+    id: 11,
+    nodeName: '主起草人汇总',
+    nodeRoleName: '主起草人',
+    canChoose: false
+  },
+  {
+    id: 12,
+    nodeName: '主起草人上传会议纪要',
+    nodeRoleName: '主起草人',
+    canChoose: false
+  },
+  {
+    id: 13,
+    nodeName: '其他起草人校对',
+    nodeRoleName: '其他起草人',
+    canChoose: false
+  },
+  {
+    id: 14,
+    nodeName: '主管级领导审批',
+    nodeRoleName: '主管级领导',
+    canChoose: false
+  },
+  {
+    id: 15,
+    nodeName: '标准化审批',
+    nodeRoleName: '标准化审批人',
+    canChoose: false
+  },
+  {
+    id: 16,
+    nodeName: '相关部门领导会签',
+    nodeRoleName: '相关部门领导',
+    canChoose: false
+  },
+  {
+    id: 17,
+    nodeName: '总工程师审批',
+    nodeRoleName: '总工程师',
+    canChoose: false
+  },
+  {
+    id: 18,
+    nodeName: '主起草人发布',
+    nodeRoleName: '主起草人',
+    canChoose: false
+  }
+]
+
+export default {
+  name: 'EnterpriseStandardRevisionFlow',
+  components: {
+    MainDrafterSentBaseInfo,
+    InternalDetailPage,
+    UserSelectModal,
+    ProcessDetailList,
+    PersonnelInfo
+  },
+  computed: {
+    pageTitle () {
+      return this.$t('flowCenter') + this.$route.meta.title
+    }
+  },
+  mounted () {
+    if (this.currentNode === 1) {
+      this.personnelInfoData = personData
+    } else {
+      this.personnelInfoData = personData.map(item => {
+        return { ...item, canChoose: false, fieldName: undefined }
+      })
+    }
+    // 如果是查看进入的，不可编辑，不可操作
+    if (this.$route.query.onlyLook) {
+      this.onlyLook = this.$route.query.onlyLook
+      this.disabled = this.$route.query.onlyLook
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      switchValue: 'base',
+      processInfoForm: this.$form.createForm(this),
+      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 }
+      },
+      disabled: false,
+      onlyLook: false,
+      validatorRules: {
+        // 流程名称
+        processName: {
+          rules: [
+            {
+              required: true,
+              message: this.$t('pleaseEnter') + this.$t('processName')
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        // 备注
+        remarks: {
+          rules: [
+            {
+              required: false,
+              message: this.$t('pleaseEnter') + this.$t('remarks')
+            }
+          ],
+          validateTrigger: 'blur'
+        }
+      },
+      currentNode: 1,
+      approvalInfoForm: this.$form.createForm(this), // 审批信息表单
+      personnelInfoData: [], // 人员信息数据
+      url: {
+        list: '' // 人员信息右侧表的分页查询接口
+      },
+      flowInitType: 'newProcess' // 流程发起类型，是自动发起（auto）的还是从新建流程发起的(newProcess)
+    }
+  },
+  methods: {
+    switchChange (value) {
+      this.switchValue = value
+    },
+    // 保存
+    handleSave () {
+      // 有任意一项填了即可
+      // 流程信息表单
+      const processInfoForm = this.processInfoForm.getFieldsValue()
+      // 流程审批信息
+      const approvalInfoForm = this.approvalInfoForm.getFieldsValue()
+      // 人员信息的数据, 处理成对象
+      const personnelInfo = this.$refs.personnelInfo.stepsData
+      const personnelObj = {}
+      for (const item of personnelInfo) {
+        if (item.fieldName) {
+          personnelObj[item.fieldName] = item.user
+        }
+      }
+      // 需要传给后端的
+      // 业务基本信息
+      if (this.$refs.basicInfoFormRef) {
+
+      } else {
+        // 需要外层信息至少填了一项
+        const param = { ...processInfoForm, ...approvalInfoForm, ...personnelObj }
+        const flag = Object.values(param).some(v => !!v || v === 0)
+        if (!flag) {
+          // 提示至少填写一项
+          this.$message.warning(this.$t('pleaseFillInAtLeastOneItem'))
+          return
+        }
+      }
+      // 保存到草稿
+      // enterprisePlanApprovalSave(arr).then(res => {
+      //   if (res.success) {
+      //     this.$message.success(res.message)
+      //   } else {
+      //     this.$message.warning(res.message)
+      //   }
+      // })
+    },
+    // 节点一时候的提交，发起变更
+    handleStart () {
+      if (this.loading) return
+      // 人员信息的数据, 处理成对象
+      const personnelInfo = this.$refs.personnelInfo.stepsData
+      const personnelObj = {}
+      for (const item of personnelInfo) {
+        if (item.fieldName) {
+          personnelObj[item.fieldName] = item.user
+        }
+      }
+      // 校验是否填了所有能填的人员信息
+      if (!Object.values(personnelObj).every(v => !!v)) {
+        this.$message.warning(this.$t('pleaseEnterPersonnelInfo'))
+        return
+      }
+      this.processInfoForm.validateFields((err, values) => {
+        this.approvalInfoForm.validateFields((approvalErr, approvalValues) => {
+
+        })
+      })
+    },
+    // 转办
+    handleTurnTo () {
+      if (this.loading) return
+      // 点击显示选人组件
+      this.$refs.userSelectModal.open()
+    },
+    // 转办选完人的回调
+    userSelectModalChange (userIds) {
+      this.approvalInfoForm.validateFields((err, values) => {
+        if (!err) {
+          this.loading = true
+          const param = Object.assign({}, values)
+          param.userId = userIds
+          param.taskId = this.$route.query.taskId
+          // enterprisePlanApprovalTurnTo(param).then(res => {
+          //   if (res.success) {
+          //     this.$message.success(res.message)
+          //   } else {
+          //     this.$message.warning(res.message)
+          //   }
+          // }).finally(() => {
+          //   this.loading = false
+          // })
+        }
+      })
+    },
+    // 提交
+    handleSubmit () {
+
+    },
+    // 同意
+    handleAgree () {
+
+    },
+    // 驳回
+    handleReject () {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+</style>
diff --git a/src/views/workCenter/enterpriseStandardRevision/modules/AddEditDrafterDrawer.vue b/src/views/workCenter/enterpriseStandardRevision/modules/AddEditDrafterDrawer.vue
new file mode 100644
index 00000000..b385d0d1
--- /dev/null
+++ b/src/views/workCenter/enterpriseStandardRevision/modules/AddEditDrafterDrawer.vue
@@ -0,0 +1,133 @@
+<template>
+  <j-modal
+    :title="$t('workCenter.enStandardRevision.addEditDrafter')"
+    :maskClosable="false"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    :confirm-loading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel">
+
+    <a-form :form="form">
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <!--   起草单位  -->
+          <a-form-item :label="$t('workCenter.enStandardRevision.draftingUnit')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <!--   起草人  -->
+          <a-form-item :label="$t('workCenter.enStandardRevision.drafter')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <!--   起草范围  -->
+          <a-form-item :label="$t('workCenter.enStandardRevision.draftingScope')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input :placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.standardDetail.standardNumber')"
+                     @change="event => event.target.value = event.target.value.trim()"
+                     :maxLength="50"
+                     disabled
+                     v-decorator="['draftingScope', validatorRules.draftingScope]" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <!--   截止时间  -->
+          <a-form-item :label="$t('deadline')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-date-picker :placeholder="$t('pleaseSelect') + $t('deadline')"
+                           v-decorator="['quizTime', validatorRules.quizTime]"
+                           showTime
+                           style="width: 100%" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </j-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+
+export default {
+  name: 'AddEditDrafterDrawer',
+  data () {
+    return {
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      modal: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      longLabelCol: {
+        xs: { span: 24 },
+        sm: { span: 4 }
+      },
+      longWrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 20 }
+      },
+      validatorRules: {
+        draftingUnit: {
+          rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('project') }],
+          validateTrigger: 'change'
+        },
+        drafter: {
+          rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('project') }],
+          validateTrigger: 'change'
+        },
+        draftingScope: {
+          rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('project') }],
+          validateTrigger: 'change'
+        },
+        deadline: {
+          rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('project') }],
+          validateTrigger: 'change'
+        }
+      }
+    }
+  },
+  methods: {
+    add () {
+      this.edit({})
+    },
+    edit (record) {
+      this.visible = true
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'draftingUnit', 'drafter', 'draftingScope', 'deadline'))
+      })
+    },
+    handleOk () {
+      if (this.confirmLoading) return
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.confirmLoading = true
+          this.$emit('ok', values)
+          this.confirmLoading = false
+        }
+      })
+    },
+    handleCancel () {
+      this.close()
+    },
+    close () {
+      this.model = {}
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/workCenter/enterpriseStandardRevision/modules/BaseInfoForm.vue b/src/views/workCenter/enterpriseStandardRevision/modules/BaseInfoForm.vue
new file mode 100644
index 00000000..016592d2
--- /dev/null
+++ b/src/views/workCenter/enterpriseStandardRevision/modules/BaseInfoForm.vue
@@ -0,0 +1,369 @@
+<template>
+  <a-form-model v-if="isFormInline" :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.enterpriseInitChangePlan.typeOfRevision')">
+                  {{ $t('workCenter.enterpriseInitChangePlan.typeOfRevision') }}
+                </span>
+          </div>
+          <a-form-model-item class="item-model" prop="typeOfRevision">
+            <a-select v-model="formInline.typeOfRevision"
+                      :disabled="disabled"
+                      :placeholder="$t('pleaseSelect')+$t('workCenter.enterpriseInitChangePlan.typeOfRevision')">
+              <a-select-option :value="ApplicationCategory.INITIATION.value">{{ $t('workCenter.enterpriseInitChangePlan.standardProjectEstablishment') }}</a-select-option>
+              <a-select-option :value="ApplicationCategory.CHANGE.value">{{ $t('workCenter.enterpriseInitChangePlan.change') }}</a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </div>
+        <!--  是新建流程,新增企标编号字段，从企标计划选择 -->
+        <!--  企标编号，选择企标计划  -->
+        <div v-if="flowInitType === 'newProcess'" class="box-title-text form-flex-item">
+          <div class="title-text">
+            <span class="required">*</span>
+            <span class="title-text-text" :title="$t('workCenter.enterpriseInitChangePlan.enterpriseStandardNum')">
+                  {{ $t('workCenter.enterpriseInitChangePlan.enterpriseStandardNum') }}
+                </span>
+          </div>
+          <a-form-model-item class="item-model" prop="applicationCategory">
+            <enterprise-plan-selection type="radio"
+                                       :placeholder="$t('pleaseSelect')+$t('workCenter.enterpriseInitChangePlan.enterpriseStandardNum')"
+                                       v-model="formInline.standardPlanId"
+                                       :standard-number="formInline.standard_number"
+                                       :disabled="disabled"
+                                       @standardNumberChange="standardNumberChange"
+                                       @listChange="listChange"/>
+          </a-form-model-item>
+        </div>
+        <!--
+            标签管理中企标库的基础信息部分字段
+              1、去掉三个代号一个年代号
+              2、加零部件名称和代替标准号
+              3、企标编号如果是自动发起的就带入，从新建流程点入的话就从企标计划选择
+              4、从企标计划选择企标编号的话，把其他字段也回显
+        -->
+        <template v-for="(item, index) of dataList">
+          <div :key="index" class="box-title-text form-flex-item">
+            <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="applicationCategory">
+              <!--   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="StandardSource.ENTERPRISE.value"
+                                  :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.trim="formInline[item.dbFieldName]"
+                       :maxLength="50"
+                       @change="event => event.target.value = event.target.value.trim()"
+                       :placeholder="$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>
+    <upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
+  </a-form-model>
+</template>
+
+<script>
+import { getEnterpriseStandardAddForm } from '@/api/enterpriseStandardLibraryApi'
+import { StandardSource, FieldType, ApplicationCategory } from '@/enums/commonEnums'
+import { getAction } from '@/api/manage'
+import { getFormDictTreeList } from '@/api/api'
+import UserSelection from '@/components/selection/UserSelection'
+import JMultipleDatePicker from '@/components/JMultipleDatePicker'
+import StandardSelection from '@/components/selection/StandardSelection'
+import UploadFile from '@/components/UploadFile'
+import EnterprisePlanSelection from '@/components/selection/EnterprisePlanSelection'
+
+export default {
+  name: 'BaseInfoForm',
+  components: { UserSelection, JMultipleDatePicker, StandardSelection, UploadFile, EnterprisePlanSelection },
+  props: {
+    // 流程发起类型，是自动发起（auto）的还是从新建流程发起的(newProcess)
+    flowInitType: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      StandardSource,
+      FieldType,
+      ApplicationCategory,
+      isFormInline: false, // 是否展示表单
+      disabledFieldList: ['standard_number'], // 不可修改字段
+      formInline: {},
+      rules: {},
+      disabled: false,
+      optionsData: {} // 标签管理中维护字段的下拉框数据
+    }
+  },
+  mounted () {
+    this.getForm()
+  },
+  methods: {
+    // 获取表单列表
+    getForm (callBack) {
+      this.confirmLoading = true
+      const params = {
+        module: StandardSource.ENTERPRISE.value,
+        type: 2
+      }
+      getEnterpriseStandardAddForm(params).then((res) => {
+        if (res.success) {
+          let dataList = res.result.基础信息
+          // 1、去掉三个代号一个年代号
+          dataList = dataList.filter(item => !['standard_code', 'name_code', 'category_code', 'year_number', 'standard_state'].includes(item.dbFieldName))
+          // 2、加零部件名称和代替标准号
+          dataList.push({
+            dbFieldEnName: 'Part name',
+            dbFieldName: 'part_name',
+            dbFieldNameOld: 'part_name',
+            dbFieldTxt: '零部件名称',
+            dictId: '1696821512600637441',
+            fieldMustInput: '1',
+            fieldShowType: '15'
+          })
+          dataList.push({
+            dbFieldEnName: 'Substitute Standard Number',
+            dbFieldName: 'substitute_standard_number',
+            dbFieldNameOld: 'substitute_standard_number',
+            dbFieldTxt: '代替标准号',
+            fieldMustInput: '0',
+            fieldShowType: '6'
+          })
+          // 3、企标编号如果是自动发起的就带入(文本框)，从新建流程点入的话就从企标计划选择（选择企标计划组件）
+          if (this.flowInitType === 'newProcess') {
+            // 是新建流程,删除企标编号字段,在html中设置显示企标计划选择
+            if (dataList[0].dbFieldName === 'standard_number') {
+              dataList.shift()
+            }
+          }
+          this.dataList = dataList
+          this.ruleList = this.dataList
+          this.integrateData()
+          this.getOptionsData() // 获取下拉数据
+          callBack && callBack()
+        }
+      })
+    },
+    // 设置表单校验
+    integrateData () {
+      this.isFormInline = false
+      const ruleList = this.ruleList
+      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 = this.dataList
+      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)
+              }
+            })
+          }
+        }
+      })
+    },
+    // 4、从企标计划选择企标编号的话，把其他字段也回显
+    standardNumberChange (value) {
+      this.formInline.standard_number = value
+    },
+    // 企标计划选择列表的回调
+    listChange (value) {
+      // 企标名称
+      // 标准英文名称
+      // 标准等级分类
+      // 企标体系
+      // 零部件名称
+      // 授权部门
+      // 代替标准号
+      // 发布日期
+      // 实施日期
+      // 是否试行
+      // 试行周期
+      // 编制说明
+    },
+    // 点击点击上传按钮
+    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 }
+    },
+  }
+}
+</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;
+}
+</style>
diff --git a/src/views/workCenter/enterpriseStandardRevision/modules/MainDrafterSentBaseInfo.vue b/src/views/workCenter/enterpriseStandardRevision/modules/MainDrafterSentBaseInfo.vue
new file mode 100644
index 00000000..c065c444
--- /dev/null
+++ b/src/views/workCenter/enterpriseStandardRevision/modules/MainDrafterSentBaseInfo.vue
@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <base-info-form ref="baseInfoForm" :flowInitType="flowInitType"></base-info-form>
+    <!--  标准文本 -->
+    <div class="box-title-text form-flex-item">
+      <div class="title-text">
+            <span class="title-text-text" :title="$t('workCenter.enStandardRevision.standardText')">
+                  {{ $t('workCenter.enStandardRevision.standardText') }}
+                </span>
+      </div>
+      <a-form-model-item class="item-model">
+        <div class="online-edit-wrapper">
+          <!--  todo: 还不确定这里展示的是什么  -->
+          <p>企业标准</p>
+          <a-button type="primary">{{ $t('workCenter.enStandardRevision.onLineEditing') }}</a-button>
+        </div>
+      </a-form-model-item>
+    </div>
+    <!--  其他起草人  -->
+    <!--  添加其他起草人  -->
+    <p>{{ $t('workCenter.enStandardRevision.addOtherDrafter') }}</p>
+    <!--  操作区域  -->
+    <div v-if="!disabled" class="table-operator">
+      <!--  新增  -->
+      <a-button icon="plus" type="primary" @click="handleAdd" :disabled="disabled">
+        {{ $t('newlyAdded') }}
+      </a-button>
+    </div>
+
+    <div>
+      <j-table
+        :can-drag="true"
+        :scroll="{x: '100%'}"
+        ref="table"
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="false"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
+
+        <!--    操作栏   -->
+        <div slot="action" slot-scope="{record, index}" class="action-span-cell">
+          <a @click="handleEdit(record, index)" class="table-ope-btn" :disabled="disabled">{{ $t('edit') }}</a>
+          <a-divider type="vertical" />
+          <a @click="handleDelete(record.id, index)" class="table-ope-btn" :disabled="disabled">{{ $t('delete') }}</a>
+        </div>
+
+      </j-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import JTable from '@/components/jero/JTable'
+import BaseInfoForm from './BaseInfoForm'
+
+export default {
+  name: 'MainDrafterSentBaseInfo',
+  components: { BaseInfoForm, JTable },
+  props: {
+    // 流程发起类型，是自动发起（auto）的还是从新建流程发起的(newProcess)
+    flowInitType: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      disabled: false,
+      data: {}, // 初始化获取的数据
+    }
+  },
+  methods: {
+    // 拿到外面传进来的数据初始化，因为套了几层就不在外层初始化数据了
+    initData (data) {
+      this.data = data
+      // 给表格赋值,在线编辑不知道要怎么赋值？
+      // this.dataSource =
+      // 给表单赋值
+      this.$nextTick(() => {
+        // this.$refs.baseInfoForm.formInline =
+      })
+    },
+    // 外层要获取数据
+    getData () {
+      // 把数据抛出，在线编辑不知道要不要抛
+      const data = {}
+      data.dataSource = this.dataSource
+      data.formInline = this.$refs.baseInfoForm.formInline
+      return data
+    },
+    // 外层获取数据要过校验,返回false表示没有通过校验
+    getDataValidate () {
+      if (this.dataSource && this.dataSource.length > 0) {
+        // 有数据可以抛出
+        const data = {}
+        data.dataSource = this.dataSource
+        data.formInline = this.$refs.baseInfoForm.formInline
+        return data
+      } else {
+        this.$message.warning(this.$t('addAtLeastOneRowOfData'))
+        return false
+      }
+    },
+    handleAdd () {}
+  }
+}
+</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;
+}
+
+.online-edit-wrapper {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  p {
+    margin-bottom: 0;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/workCenter/enterpriseStandardRevision/modules/MainDrafterUploadMinuteBaseInfo.vue b/src/views/workCenter/enterpriseStandardRevision/modules/MainDrafterUploadMinuteBaseInfo.vue
new file mode 100644
index 00000000..a2d752c3
--- /dev/null
+++ b/src/views/workCenter/enterpriseStandardRevision/modules/MainDrafterUploadMinuteBaseInfo.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <!--  标准文本 -->
+    <div class="box-title-text form-flex-item">
+      <div class="title-text">
+            <span class="title-text-text" :title="$t('workCenter.enStandardRevision.standardText')">
+                  {{ $t('workCenter.enStandardRevision.standardText') }}
+                </span>
+      </div>
+      <a-form-model-item class="item-model">
+        <div class="online-edit-wrapper">
+          <!--  todo: 还不确定这里展示的是什么  -->
+          <p>企业标准</p>
+          <a-button type="primary">{{ $t('workCenter.enStandardRevision.onLineEditing') }}</a-button>
+        </div>
+      </a-form-model-item>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MainDrafterUploadMinuteBaseInfo'
+}
+</script>
+
+<style scoped>
+
+</style>