1

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

@@ -0,0 +1,84 @@
+<template>
+  <div id="detail">
+    <data-form :fields="fields" :data="data" @save="toSave" returns="/adminCenter/mechanism" 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/mechanism_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: mechanism } = createNamespacedHelpers('mechanism');
+export default {
+  name: 'mechanismDetail',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      data: {
+        img_path: [],
+      },
+      fields: [
+        { label: '机构名称', model: 'name', type: 'text' },
+        { label: '联系人', model: 'contacts', type: 'text' },
+        { label: '联系电话', model: 'phone', type: 'text' },
+        { label: '电子邮箱', model: 'email', type: 'text' },
+        { label: '联系地址', model: 'address', type: 'text' },
+        { label: '所属行业', model: 'industry', type: 'text' },
+        { label: '账号状态', model: 'status', type: 'radio' },
+      ],
+      statusList: status,
+    };
+  },
+  created() {
+    if (this.id) this.search();
+  },
+  methods: {
+    ...mechanism(['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/mechanism');
+      }
+    },
+  },
+  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/mechanism/detail.vue

@@ -1,18 +1,77 @@
 <template>
   <div id="detail">
-    <data-form :fields="fields" :data="data" @save="toSave" returns="/adminCenter/mechanism" 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/mechanism_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="24" class="text">
+                  <el-col :span="2" class="left"> 机构名称 </el-col>
+                  <el-col :span="22" class="left">
+                    {{ form.name || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="text">
+                  <el-col :span="2" class="left"> 联系人 </el-col>
+                  <el-col :span="22" class="left">
+                    {{ form.contacts || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="text">
+                  <el-col :span="2" class="left"> 联系电话 </el-col>
+                  <el-col :span="22" class="left">
+                    {{ form.phone || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="text">
+                  <el-col :span="2" class="left"> 电子邮箱 </el-col>
+                  <el-col :span="22" class="left">
+                    {{ form.email || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="text">
+                  <el-col :span="2" class="left"> 联系地址 </el-col>
+                  <el-col :span="22" class="left">
+                    {{ form.address || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="text">
+                  <el-col :span="2" class="left"> 所属行业 </el-col>
+                  <el-col :span="22" class="left">
+                    {{ form.industry || '暂无' }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="text">
+                  <el-col :span="2" class="left"> 所属辖区 </el-col>
+                  <el-col :span="22" class="left">
+                    {{ form.juris || '暂无' }}
+                  </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,23 +81,12 @@ const _ = require('lodash');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: mechanism } = createNamespacedHelpers('mechanism');
 export default {
-  name: 'mechanismDetail',
+  name: 'detail',
   props: {},
   components: {},
   data: function () {
     return {
-      data: {
-        img_path: [],
-      },
-      fields: [
-        { label: '机构名称', model: 'name', type: 'text' },
-        { label: '联系人', model: 'contacts', type: 'text' },
-        { label: '联系电话', model: 'phone', type: 'text' },
-        { label: '电子邮箱', model: 'email', type: 'text' },
-        { label: '联系地址', model: 'address', type: 'text' },
-        { label: '所属行业', model: 'industry', type: 'text' },
-        { label: '账号状态', model: 'status', type: 'radio' },
-      ],
+      form: {},
       statusList: status,
     };
   },
@@ -50,11 +98,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/mechanism');
+    },
+    async onSubmit() {
+      let dup = _.cloneDeep(this.form);
       let res;
       if (_.get(dup, 'id')) {
         res = await this.update(dup);
@@ -62,15 +113,12 @@ export default {
         res = await this.create(dup);
       }
       if (this.$checkRes(res, '保存成功', '保存失败')) {
-        if (!this.$dev_mode) this.$router.push('/adminCenter/mechanism');
+        if (this.$dev_mode) this.back();
       }
     },
   },
   computed: {
-    ...mapState(['user', 'menuParams']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
+    ...mapState(['user']),
     id() {
       return this.$route.query.id;
     },
@@ -78,7 +126,59 @@ 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;
+            }
+          }
+          .radio {
+            margin: 0 0 10px 0;
+          }
+        }
+      }
+    }
+  }
+}
+.main:hover {
+  box-shadow: 0 0 5px #409eff;
+}
+</style>

src/views/adminCenter/mechanism/index.vue

@@ -1,15 +1,23 @@
 <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 #options="{ item }">
+              <template v-if="item.prop === 'juris'">
+                <el-option v-for="(i, index) in jurisList" :key="`juris-${index}`" :label="i" :value="i"></el-option>
+              </template>
+            </template>
+          </data-table>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-const { status } = require('@common/dict/index');
+const { status, jusic } = require('@common/dict/index');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: mechanism } = createNamespacedHelpers('mechanism');
 export default {
@@ -32,6 +40,7 @@ export default {
         },
       ],
       fields: [
+        { label: '辖区', prop: 'juris', filter: 'select' },
         { label: '机构名称', prop: 'name', filter: true },
         { label: '联系人', prop: 'contacts' },
         { label: '联系电话', prop: 'phone' },
@@ -49,6 +58,7 @@ export default {
         },
       ],
       statusList: status,
+      jurisList: jusic,
     };
   },
   created() {
@@ -88,4 +98,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>

vue.config.js

@@ -23,7 +23,7 @@ module.exports = {
         target: 'http://broadcast.waityou24.cn',
       },
       '/api': {
-        target: 'http://192.168.1.19:9200', //http://192.168.1.19:9200
+        target: 'http://192.168.1.19:9200', //http://192.168.1.19:9200//http://broadcast.waityou24.cn
         changeOrigin: true,
         ws: false,
       },