1

src/views/adminCenter/expert/detail copy.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="detail">
+    <data-form :fields="fields" :data="data" @save="toSave" returns="/adminCenter/expert" submitText="审核">
+      <template #radios="{ item }">
+        <template v-if="item.model === 'status'">
+          <el-radio v-for="(i, index) in statusList" :key="`status-${index}`" :label="i.value">{{ i.label }}</el-radio>
+        </template>
+      </template>
+      <template #custom="{ item }">
+        <template v-if="item.model === 'img_path'">
+          <!-- <e-upload url="/files/cysci/expert_image/upload" :limit="1" v-model="data[item.model]"></e-upload> -->
+          <img v-for="(i, index) in data[item.model]" :key="`icon-${index}`" :src="i.url" width="150px" height="150px" />
+        </template>
+      </template>
+    </data-form>
+  </div>
+</template>
+
+<script>
+const { status } = require('@common/dict/index');
+const _ = require('lodash');
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: expert } = createNamespacedHelpers('expert');
+export default {
+  name: 'expertDetail',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      data: {
+        img_path: [],
+      },
+      fields: [
+        { label: '姓名', model: 'name', type: 'text' },
+        { label: '电话号码', model: 'phone', options: { maxLength: 11 }, type: 'text' },
+        { label: '邮箱', model: 'email', type: 'text' },
+        { label: '地址', model: 'addr', type: 'text' },
+        { label: '办公电话', model: 'office_phone', type: 'text' },
+        { label: '所属行业', model: 'profession', type: 'text' },
+
+        { label: '头像图片', model: 'img_path', custom: true },
+        { label: 'qq&微信', model: 'qqwx', type: 'text' },
+        { label: '出生日期', model: 'birthDate', type: 'date', type: 'text' },
+        { label: '毕业院校', model: 'school', type: 'text' },
+        { label: '最高学历', model: 'education', type: 'text' },
+        { label: '职务职称', model: 'zwzc', type: 'text' },
+        { label: '擅长领域', model: 'expertise', type: 'text' },
+        { label: '工作单位', model: 'company', type: 'text' },
+
+        { label: '工作经历', model: 'workexperience', type: 'textarea', options: { maxRows: 5, minRows: 3 }, type: 'text' },
+        { label: '科研综述', model: 'scientific', type: 'textarea', options: { maxRows: 5, minRows: 3 }, type: 'text' },
+        { label: '承担项目', model: 'undertakingproject', type: 'text' },
+        { label: '科技奖励', model: 'scienceaward', type: 'text' },
+        { label: '社会任职', model: 'social', type: 'text' },
+        { label: '账号状态', model: 'status', type: 'radio' },
+      ],
+      statusList: status,
+    };
+  },
+  created() {
+    if (this.id) this.search();
+  },
+  methods: {
+    ...expert(['fetch', 'create', 'update']),
+    async search() {
+      const res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `data`, 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/expert');
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user', 'menuParams']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/adminCenter/expert/detail.vue

@@ -1,18 +1,156 @@
 <template>
   <div id="detail">
-    <data-form :fields="fields" :data="data" @save="toSave" returns="/adminCenter/expert" submitText="审核">
-      <template #radios="{ item }">
-        <template v-if="item.model === 'status'">
-          <el-radio v-for="(i, index) in statusList" :key="`status-${index}`" :label="i.value">{{ i.label }}</el-radio>
-        </template>
-      </template>
-      <template #custom="{ item }">
-        <template v-if="item.model === 'img_path'">
-          <!-- <e-upload url="/files/cysci/expert_image/upload" :limit="1" v-model="data[item.model]"></e-upload> -->
-          <img v-for="(i, index) in data[item.model]" :key="`icon-${index}`" :src="i.url" width="150px" height="150px" />
-        </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-col :span="24" class="basic">
+              <el-col :span="24" class="title"> 基本信息 </el-col>
+              <el-col :span="24" class="info">
+                <el-col :span="12" class="text">
+                  <el-col :span="3" class="left"> 姓名 </el-col>
+                  <el-col :span="21" class="left">
+                    {{ form.name || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="12" class="text">
+                  <el-col :span="3" class="left"> 电话号码 </el-col>
+                  <el-col :span="21" class="left">
+                    {{ form.phone || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="12" class="text">
+                  <el-col :span="3" class="left"> 邮箱 </el-col>
+                  <el-col :span="21" class="left">
+                    {{ form.email || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="12" class="text">
+                  <el-col :span="3" class="left"> 地址 </el-col>
+                  <el-col :span="21" class="left">
+                    {{ form.addr || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="12" class="text">
+                  <el-col :span="3" class="left"> 办公电话 </el-col>
+                  <el-col :span="21" class="left">
+                    {{ form.office_phone || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="12" class="text">
+                  <el-col :span="3" class="left"> 所属行业 </el-col>
+                  <el-col :span="21" class="left">
+                    {{ form.profession || '暂无' }}
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="basic">
+              <el-col :span="24" class="title"> 详细信息 </el-col>
+              <el-col :span="24" class="info">
+                <el-col :span="12" class="text">
+                  <el-col :span="3" class="left"> qq&微信 </el-col>
+                  <el-col :span="21" class="left">
+                    {{ form.qqwx || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="12" class="text">
+                  <el-col :span="3" class="left"> 出生日期 </el-col>
+                  <el-col :span="21" class="left">
+                    {{ form.birthDate || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="12" class="text">
+                  <el-col :span="3" class="left"> 毕业院校 </el-col>
+                  <el-col :span="21" class="left">
+                    {{ form.school || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="12" class="text">
+                  <el-col :span="3" class="left"> 最高学历 </el-col>
+                  <el-col :span="21" class="left">
+                    {{ form.education || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="12" class="text">
+                  <el-col :span="3" class="left"> 职务职称 </el-col>
+                  <el-col :span="21" class="left">
+                    {{ form.zwzc || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="12" class="text">
+                  <el-col :span="3" class="left"> 擅长领域 </el-col>
+                  <el-col :span="21" class="left">
+                    {{ form.expertise || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="text">
+                  <el-col :span="2" class="left" style="width: 6.3%"> 工作单位 </el-col>
+                  <el-col :span="22" class="left" style="width: 93.7%">
+                    {{ form.company || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="langtext">
+                  <el-col :span="2" class="left"> 头像图片 </el-col>
+                  <el-col :span="22" class="right">
+                    <template v-if="form.img_path">
+                      <img v-for="(i, index) in form.img_path" :key="`icon-${index}`" :src="i.url" width="150px" height="150px" />
+                    </template>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="langtext">
+                  <el-col :span="2" class="left"> 工作经历 </el-col>
+                  <el-col :span="22" class="right">
+                    {{ form.workexperience || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="langtext">
+                  <el-col :span="2" class="left"> 科研综述 </el-col>
+                  <el-col :span="22" class="right">
+                    {{ form.scientific || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="langtext">
+                  <el-col :span="2" class="left"> 承担项目 </el-col>
+                  <el-col :span="22" class="right">
+                    {{ form.undertakingproject || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="langtext">
+                  <el-col :span="2" class="left"> 科技奖励 </el-col>
+                  <el-col :span="22" class="right">
+                    {{ form.scienceaward || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="langtext">
+                  <el-col :span="2" class="left"> 社会任职 </el-col>
+                  <el-col :span="22" class="right">
+                    {{ form.social || '暂无' }}
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="basic">
+              <el-col :span="24" class="title"> 资料审核 </el-col>
+              <el-col :span="24" class="info">
+                <el-col :span="24" class="radio">
+                  <el-radio-group v-model="form.status">
+                    <el-radio v-for="(i, index) in statusList" :key="`status-${index}`" :label="i.value">{{ i.label }}</el-radio>
+                  </el-radio-group>
+                </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">提交保存</el-button>
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -22,37 +160,12 @@ const _ = require('lodash');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: expert } = createNamespacedHelpers('expert');
 export default {
-  name: 'expertDetail',
+  name: 'detail',
   props: {},
   components: {},
   data: function () {
     return {
-      data: {
-        img_path: [],
-      },
-      fields: [
-        { label: '姓名', model: 'name', type: 'text' },
-        { label: '电话号码', model: 'phone', options: { maxLength: 11 }, type: 'text' },
-        { label: '邮箱', model: 'email', type: 'text' },
-        { label: '地址', model: 'addr', type: 'text' },
-        { label: '办公电话', model: 'office_phone', type: 'text' },
-        { label: '所属行业', model: 'profession', type: 'text' },
-
-        { label: '头像图片', model: 'img_path', custom: true },
-        { label: 'qq&微信', model: 'qqwx', type: 'text' },
-        { label: '出生日期', model: 'birthDate', type: 'date', type: 'text' },
-        { label: '毕业院校', model: 'school', type: 'text' },
-        { label: '最高学历', model: 'education', type: 'text' },
-        { label: '职务职称', model: 'zwzc', type: 'text' },
-        { label: '擅长领域', model: 'expertise', type: 'text' },
-        { label: '工作单位', model: 'company', type: 'text' },
-        { label: '工作经历', model: 'workexperience', type: 'textarea', options: { maxRows: 5, minRows: 3 }, type: 'text' },
-        { label: '科研综述', model: 'scientific', type: 'textarea', options: { maxRows: 5, minRows: 3 }, type: 'text' },
-        { label: '承担项目', model: 'undertakingproject', type: 'text' },
-        { label: '科技奖励', model: 'scienceaward', type: 'text' },
-        { label: '社会任职', model: 'social', type: 'text' },
-        { label: '账号状态', model: 'status', type: 'radio' },
-      ],
+      form: {},
       statusList: status,
     };
   },
@@ -64,11 +177,14 @@ 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);
+    back() {
+      this.$router.push('/adminCenter/expert');
+    },
+    async onSubmit() {
+      let dup = _.cloneDeep(this.form);
       let res;
       if (_.get(dup, 'id')) {
         res = await this.update(dup);
@@ -76,15 +192,12 @@ export default {
         res = await this.create(dup);
       }
       if (this.$checkRes(res, '保存成功', '保存失败')) {
-        if (!this.$dev_mode) this.$router.push('/adminCenter/expert');
+        if (this.$dev_mode) this.back();
       }
     },
   },
   computed: {
-    ...mapState(['user', 'menuParams']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
+    ...mapState(['user']),
     id() {
       return this.$route.query.id;
     },
@@ -92,7 +205,86 @@ 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;
+  .one {
+    .top {
+      text-align: right;
+      margin: 0 0 10px 0;
+    }
+    .down {
+      .basic {
+        .title {
+          font-size: 18px;
+          font-weight: bold;
+          color: #000;
+          border-bottom: 1px dashed #ccc;
+          padding: 10px 0;
+          margin: 0 0 10px 0;
+        }
+        .info {
+          border: 1px solid #ccc;
+          border-radius: 5px;
+          padding: 10px;
+          .text {
+            .left {
+              border: 1px solid #000;
+              padding: 10px;
+            }
+            .left:nth-child(1) {
+              text-align: center;
+              padding: 10px 0;
+            }
+          }
+          .langtext {
+            .left {
+              border: 1px solid #000;
+              padding: 0 10px;
+              width: 6.3%;
+              text-align: center;
+              height: 106px;
+              line-height: 106px;
+            }
+            .right {
+              border: 1px solid #000;
+              width: 93.7%;
+              height: 106px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              -webkit-line-clamp: 4;
+              word-break: break-all;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              line-height: 25px;
+              padding: 0 10px;
+              img {
+                width: 100px;
+                height: 100px;
+              }
+            }
+          }
+          .radio {
+            margin: 0 0 10px 0;
+          }
+        }
+      }
+    }
+  }
+}
+.main:hover {
+  box-shadow: 0 0 5px #409eff;
+}
+</style>

src/views/adminCenter/expert/index.vue

@@ -1,10 +1,12 @@
 <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"> </data-table>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -87,4 +89,13 @@ export default {
 };
 </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>