布局知识库

2022-08-04 09:33:46 +08:00
parent 21ce2d4790
commit c81bea2dea
3 changed files with 530 additions and 101 deletions
@@ -0,0 +1,215 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="700"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    :maskClosable="false"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+    <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <div class="box-title-text">
+            <div class="title-text">
+              <span class="Required">*</span>
+              <span class="title-text-text"
+                    :title="$t('name')">{{$t('name')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="name">
+              <a-input class="box-input"
+                       v-model="formInline.name"
+                       :placeholder="$t('PleaseEnter')+$t('name')"/>
+            </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 class="Required">*</span>
+              <span class="title-text-text"
+                    :title="$t('enName')">{{$t('enName')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="enName">
+              <a-input class="box-input"
+                       v-model="formInline.enName"
+                       :placeholder="$t('PleaseEnter')+$t('enName')"/>
+            </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 class="Required">*</span>
+              <span class="title-text-text"
+                    :title="$t('DisplayOrder')">{{$t('DisplayOrder')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="DisplayOrder">
+              <a-input-number class="box-input"
+                              v-model="formInline.DisplayOrder"
+                              :placeholder="$t('PleaseEnter')+$t('DisplayOrder')"/>
+            </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 class="title-text-text"
+                    :title="$t('describe')">{{$t('describe')}}</span>
+            </div>
+            <a-form-model-item class="itemModel" prop="describe">
+              <a-textarea
+                :placeholder="$t('PleaseEnter')+$t('describe')"
+                :disabled="disabled"
+                v-model="formInline.describe" :rows="4"/>
+            </a-form-model-item>
+          </div>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+  import { getAction, postAction, downloadFile } from '@/api/manage'
+
+  export default {
+    name: 'optionMaintenanceAdd',
+    data() {
+      return {
+        visible: false,
+        confirmLoading: false,
+        formInline: {},
+        disabled: false,
+        rules: {
+          name: [
+            {
+              required: true,
+              message: this.$t('name') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            },
+            {
+              max: 100,
+              message: this.$t('name') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ],
+          enName: [
+            {
+              required: true,
+              message: this.$t('enName') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            },
+            {
+              max: 100,
+              message: this.$t('enName') + this.$t('cannotExceed') + 100 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ],
+          DisplayOrder: [
+            {
+              required: true,
+              message: this.$t('DisplayOrder') + this.$t('cannotEmpty'),
+              trigger: 'blur'
+            }
+          ],
+          describe: [
+            {
+              max: 300,
+              message: this.$t('describe') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
+              trigger: 'blur'
+            }
+          ]
+        },
+        title: ''
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      add() {
+        this.visible = true
+        this.title = this.$t('newlyAdded')
+        this.$nextTick(() => {
+          this.formInline = {}
+          this.$refs.ruleForm.clearValidate()
+        })
+      },
+      edit(data) {
+        this.visible = true
+        this.title = this.$t('edit')
+        this.$nextTick(() => {
+          this.formInline = data
+          this.$refs.ruleForm.clearValidate()
+        })
+      },
+      PersonnelSelectionChange(value, id) {
+        this.formInline[value] = id
+        this.formInline = { ...this.formInline }
+      },
+      handleOk() {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+
+          }
+        })
+      },
+      handleCancel() {
+        this.visible = false
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+  }
+
+  .title-text {
+    width: 84px;
+    text-align: right;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 42px;
+    line-height: 42px;
+  }
+
+  .box-input {
+    display: inline-block;
+    height: 38px;
+    width: 100%;
+  }
+
+  .itemModel {
+    width: calc(100% - 130px);
+    display: inline-block;
+    margin-top: 2px;
+  }
+
+  .title-text-text {
+    margin-top: 9px;
+  }
+
+  .formAdd {
+    margin-bottom: 40px;
+  }
+
+  .Required {
+    color: red;
+    margin-right: 4px;
+  }
+</style>