227

project/qujing/app/AppCertificateManage/components/Add.vue

@@ -8,14 +8,19 @@
         <template #content>
           <el-form class="ai-form" :model="form" label-width="120px" ref="form">
             <el-form-item label="证书名称" style="width: 100%" prop="certificateName" :rules="[{required: true, message: '请输入证书名称', trigger: 'blur'}]">
-              <el-input size="small" v-model="form.certificateName" clearable placeholder="请输入证书名称" :maxlength="200"></el-input>
+              <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateName" clearable placeholder="请输入证书名称" :maxlength="50"></el-input>
             </el-form-item>
-            <el-form-item label="上传证书" prop="imageUrl" style="width: 100%;" :rules="[{required: true, message: '请上传证书', trigger: 'change'}]">
-              <ai-uploader
-                :instance="instance"
-                v-model="form.imageUrl"
-                :limit="1">
-              </ai-uploader>
+            <el-form-item label="证书封面名称" style="width: 100%" prop="certificateTitle" :rules="[{required: true, message: '请输入证书封面名称', trigger: 'blur'}]">
+              <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateTitle" clearable placeholder="请输入证书封面名称" :maxlength="20"></el-input>
+            </el-form-item>
+            <el-form-item label="证书描述" style="width: 100%" prop="certificateContent" :rules="[{required: true, message: '请输入证书描述', trigger: 'blur'}]">
+              <div class="input-wrapper">
+                <el-button type="text" style="width: fit-content;" @click="append">插入获得证书序号</el-button>
+                <el-input :rows="4" type="textarea" size="small" style="width: 100%;" v-model="form.certificateContent" clearable placeholder="恭喜您成为曲靖市第 [#获得证书序号]，位知法明理人。特颁此证，以资鼓励!!"></el-input>
+              </div>
+            </el-form-item>
+            <el-form-item label="证书颁发单位" prop="certificateIssueUnit" style="width: 100%;" :rules="[{required: true, message: '请输入证书颁发单位', trigger: 'change'}]">
+              <el-input size="small" show-word-limit style="width: 50%;" v-model="form.certificateName" clearable placeholder="请输入证书颁发单位" :maxlength="50"></el-input>
             </el-form-item>
           </el-form>
         </template>
@@ -42,7 +47,9 @@
         info: {},
         form: {
           certificateName: '',
-          imageUrl: []
+          certificateIssueUnit: '',
+          certificateTitle: '',
+          certificateContent: ''
         },
         id: ''
       }
@@ -69,6 +76,12 @@
         })
       },
 
+      append () {
+        if (this.form.certificateContent.indexOf('[#获得证书序号]') === -1) {
+          this.form.certificateContent = this.form.certificateContent + '[#获得证书序号]'
+        }
+      },
+
       confirm () {
         this.$refs.form.validate((valid) => {
           if (valid) {
@@ -99,5 +112,10 @@
 
 <style scoped lang="scss">
   .AppCertificateManage {
+    .input-wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 50%;
+    }
   }
 </style>