[update] 文档库的弹框拆分出来

2023-08-21 11:38:15 +08:00
parent e331340e55
commit b3b1b1f94d
7 changed files with 529 additions and 526 deletions
@@ -0,0 +1,173 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="900"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    :maskClosable="false"
+    @cancel="visible = false"
+  >
+    <a-form-model :rules="rules" :model="tableDataGrad"
+                  ref="tableRuleForm">
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="required">*</span>
+              <span :title="$t('docLibrary.statuteNumberClause')">{{$t('docLibrary.statuteNumberClause')}}</span>
+            </div>
+            <a-form-model-item class="item-model" prop="standNumberOrClause">
+              <a-input class="box-input" v-model.trim="tableDataGrad.standNumberOrClause"
+                       :placeholder="$t('pleaseEnter')+$t('docLibrary.statuteNumberClause')"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+        <a-col :span="12">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="required">*</span>
+              <span :title="$t('docLibrary.typeofImplementation')">{{$t('docLibrary.typeofImplementation')}}</span>
+            </div>
+            <a-form-model-item class="item-model" prop="implementationType">
+              <j-multi-select-tag class="box-input" v-model="tableDataGrad.implementationType"
+                                  :placeholder="$t('pleaseSelect')+$t('docLibrary.typeofImplementation')"
+                                  :type="'select'"
+                                  @changeQuery='implementationTypeChange'
+                                  :triggerChange="false" dictCode="shi2_shi1_lei4_xing2"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="required">*</span>
+              <span :title="$t('docLibrary.implementationDateTwo')">{{$t('docLibrary.implementationDateTwo')}}</span>
+            </div>
+            <a-form-model-item class="item-model" prop="implementationDate">
+              <a-date-picker class="box-input" v-model="tableDataGrad.implementationDate"
+                             :placeholder="$t('pleaseSelect')+$t('docLibrary.implementationDateTwo')"
+                             format="YYYY-MM-DD"
+                             value-format="YYYY-MM-DD"
+                             style="width: 100%"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span :title="$t('remarks')">{{$t('remarks')}}</span>
+            </div>
+            <a-form-model-item class="item-model" style="height: auto" prop="remarks">
+              <a-textarea :placeholder="$t('pleaseEnter')+$t('remarks')"
+                          :rows="4" v-model="tableDataGrad.remarks"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+    </a-form-model>
+    <template slot="footer">
+      <a-button key="back" @click="visible = false">
+        {{ $t('cancel') }}
+      </a-button>
+      <a-button key="submit" type="primary" @click="handleTableSubmit">
+        {{ $t('determine') }}
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
+
+export default {
+  name: 'PhasedImplementationModal',
+  components: { JMultiSelectTag },
+  data () {
+    return {
+      visible: false,
+      title: '',
+      confirmLoading: false,
+      rules: {
+        standNumberOrClause: [
+          {
+            required: true,
+            message: this.$t('docLibrary.statuteNumberClause') + this.$t('cannotEmpty'),
+            trigger: 'blur'
+          },
+          {
+            // required: true,
+            max: 200,
+            message: this.$t('docLibrary.statuteNumberClause') + this.$t('cannotExceed') + 200 + this.$t('characters'),
+            trigger: 'blur'
+          }
+        ],
+        implementationType: [
+          {
+            required: true,
+            message: this.$t('docLibrary.typeofImplementation') + this.$t('cannotEmpty'),
+            trigger: 'change'
+          }
+        ],
+        implementationDate: [
+          {
+            required: true,
+            message: this.$t('docLibrary.implementationDateTwo') + this.$t('cannotEmpty'),
+            trigger: 'change'
+          }
+        ],
+        remarks: [
+          {
+            // required: true,
+            max: 1000,
+            message: this.$t('remarks') + this.$t('cannotExceed') + 1000 + this.$t('characters'),
+            trigger: 'blur'
+          }
+        ]
+      },
+      tableDataGrad: {},
+      index: 0,
+      isEdit: false
+    }
+  },
+  methods: {
+    add () {
+      this.title = this.$t('newlyAdded')
+      this.visible = true
+      this.isEdit = false
+      this.tableDataGrad = {}
+    },
+    edit (record, index) {
+      this.title = this.$t('edit')
+      this.visible = true
+      this.isEdit = true
+      this.index = index
+      this.tableDataGrad = Object.assign({}, record)
+    },
+    // 实施类型下拉框改变
+    implementationTypeChange (val) {
+      this.tableDataGrad.implementationTypeText = val
+    },
+    // 分阶段实施详情的新增弹框
+    handleTableSubmit () {
+      this.$refs.tableRuleForm.validate(valid => {
+        if (valid) {
+          if (this.isEdit) {
+            this.$emit('submit', this.tableDataGrad, this.index)
+          } else {
+            this.$emit('submit', this.tableDataGrad)
+          }
+          this.visibleGrad = false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>