1

src/views/adminCenter/patent/detail.vue

@@ -1,17 +1,92 @@
 <template>
   <div id="detail">
-    <data-form :fields="fields" :data="data" @save="toSave" returns="/adminCenter/patent">
-      <template #options="{ item }">
-        <template v-if="item.model === 'column_name'">
-          <el-option v-for="(i, index) in typeList" :key="`columns-name-${index}`" :label="i" :value="i"></el-option>
-        </template>
-      </template>
-      <template #custom="{ item }">
-        <template v-if="item.model === 'img_url'">
-          <e-upload url="/files/cysci/patent_image/upload" v-model="data[item.model]"></e-upload>
-        </template>
-      </template>
-    </data-form>
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="24" class="top">
+            <el-button type="primary" size="mini" @click="back"> 返回 </el-button>
+          </el-col>
+          <el-col :span="24" class="down">
+            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+              <el-col :span="12" class="text">
+                <el-form-item label="申请号" prop="create_number">
+                  <el-input v-model="form.create_number"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" class="text">
+                <el-form-item label="申请日" prop="create_date">
+                  <el-date-picker v-model="form.create_date" placeholder="请选择" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date"> </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" class="text">
+                <el-form-item label="公开(公告)号" prop="success_number">
+                  <el-input v-model="form.success_number"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" class="text">
+                <el-form-item label="公开(公告)日" prop="success_date">
+                  <el-date-picker v-model="form.success_date" placeholder="请选择" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date"> </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" class="text">
+                <el-form-item label="标题" prop="name">
+                  <el-input v-model="form.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" class="text">
+                <el-form-item label="发明人" prop="inventor">
+                  <el-input v-model="form.inventor"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" class="text">
+                <el-form-item label="发明人地址" prop="address">
+                  <el-input v-model="form.address"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" class="text">
+                <el-form-item label="申请人" prop="apply_personal">
+                  <el-input v-model="form.apply_personal"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" class="text">
+                <el-form-item label="专利有效性" prop="term">
+                  <el-input v-model="form.term"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" class="text">
+                <el-form-item label="专利类型" prop="type">
+                  <el-input v-model="form.type"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" class="text">
+                <el-form-item label="代理人" prop="agent_personal">
+                  <el-input v-model="form.agent_personal"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" class="text">
+                <el-form-item label="代理机构" prop="agent">
+                  <el-input v-model="form.agent"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-form-item label="摘要" prop="abstract">
+                  <el-input v-model="form.abstract" type="textarea" maxlength="300" :autosize="{ minRows: 4, maxRows: 6 }" show-word-limit></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-form-item label="图片(6)" prop="img_url">
+                  <e-upload url="/files/cysci/patent_image/upload" :limit="6" v-model="form.img_url"></e-upload>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24" class="btn">
+                <el-button type="danger" size="mini" @click="back">取消保存</el-button>
+                <el-button type="primary" size="mini" @click="onSubmit('form')">提交信息</el-button>
+              </el-col>
+            </el-form>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -19,31 +94,15 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: patent } = createNamespacedHelpers('patent');
 export default {
-  name: 'patentDetail',
+  name: 'detail',
   props: {},
   components: {},
   data: function () {
     return {
-      data: {
+      form: {
         img_url: [],
       },
-      fields: [
-        { label: '申请号', model: 'create_number' },
-        { label: '申请日', model: 'create_date', type: 'date' },
-        { label: '公开（公告）号', model: 'success_number' },
-        { label: '公开（公告）日', model: 'success_date', type: 'date' },
-        { label: '标题', model: 'name' },
-        { label: '发明人', model: 'inventor' },
-        { label: '发明人地址', model: 'address' },
-        { label: '申请人', model: 'apply_personal' },
-        { label: '专利有效性', model: 'term' },
-        { label: '专利类型', model: 'type' },
-        { label: '代理人', model: 'agent_personal' },
-        { label: '代理机构', model: 'agent' },
-        { label: '摘要', model: 'abstract', type: 'textarea', options: { maxRows: 5, minRows: 3 } },
-        { label: '图片', model: 'img_url', custom: true },
-        { label: '数据来源', model: 'origin' },
-      ],
+      rules: {},
     };
   },
   created() {
@@ -54,27 +113,45 @@ export default {
     async search() {
       const res = await this.fetch(this.id);
       if (this.$checkRes(res)) {
-        this.$set(this, `data`, res.data);
+        this.$set(this, `form`, res.data);
       }
     },
-    async toSave({ data }) {
-      let dup = _.cloneDeep(data);
-      let res;
-      if (_.get(dup, 'id')) {
-        res = await this.update(dup);
-      } else {
-        res = await this.create(dup);
-      }
-      if (this.$checkRes(res, '保存成功', '保存失败')) {
-        if (!this.$dev_mode) this.$router.push('/adminCenter/patent');
-      }
+    async onSubmit(formName) {
+      this.$refs[formName].validate(async (valid) => {
+        if (valid) {
+          let data = this.form;
+          if (this.id) {
+            let res = await this.update(data);
+            if (this.$checkRes(res)) {
+              this.$message({
+                message: '信息修改成功',
+                type: 'success',
+              });
+              this.back();
+            }
+          } else {
+            let res = await this.create(data);
+            if (this.$checkRes(res)) {
+              this.$message({
+                message: '信息发布成功',
+                type: 'success',
+              });
+              this.back();
+            }
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    // 返回
+    back() {
+      this.$router.push('/adminCenter/patent');
     },
   },
   computed: {
-    ...mapState(['user', 'menuParams']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
+    ...mapState(['user']),
     id() {
       return this.$route.query.id;
     },
@@ -82,7 +159,52 @@ export default {
   metaInfo() {
     return { title: this.$route.meta.title };
   },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  border-radius: 10px;
+  box-shadow: 0 0 5px #cccccc;
+  padding: 20px;
+  .top {
+    text-align: right;
+    margin: 0 0 10px 0;
+  }
+  .down {
+    .text {
+      border-bottom: 1px dashed #ccc;
+      padding: 15px 0;
+    }
+    .btn {
+      text-align: center;
+      padding: 15px 0;
+    }
+    /deep/.el-form-item {
+      margin: 0;
+    }
+    .el-select {
+      width: 100%;
+    }
+  }
+}
+/deep/.el-input__inner {
+  border: 1px solid #333;
+}
+/deep/.el-textarea__inner {
+  border: 1px solid #333;
+}
+/deep/.el-date-editor.el-input {
+  width: 100%;
+}
+.main:hover {
+  box-shadow: 0 0 5px #409eff;
+}
+</style>

src/views/adminCenter/patent/index.vue

@@ -1,10 +1,16 @@
 <template>
   <div id="index">
-    <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @edit="toEdit" @delete="toDelete">
-      <template #selfbtn>
-        <el-button type="primary" size="mini" @click="toAdd">添加专利</el-button>
-      </template>
-    </data-table>
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @edit="toEdit" @delete="toDelete">
+            <template #selfbtn>
+              <el-button type="primary" size="mini" @click="toAdd">添加专利</el-button>
+            </template>
+          </data-table>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -12,7 +18,7 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: patent } = createNamespacedHelpers('patent');
 export default {
-  name: 'patentIndex',
+  name: 'index',
   props: {},
   components: {},
   data: function () {
@@ -69,15 +75,28 @@ export default {
     },
   },
   computed: {
-    ...mapState(['user', 'menuParams']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
+    ...mapState(['user']),
   },
   metaInfo() {
     return { title: this.$route.meta.title };
   },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  border-radius: 10px;
+  box-shadow: 0 0 5px #cccccc;
+  padding: 20px;
+}
+.main:hover {
+  box-shadow: 0 0 5px #409eff;
+}
+</style>