1

src/views/adminCenter/organization/detail.vue

@@ -1,12 +1,154 @@
 <template>
   <div id="detail">
-    <data-form :fields="fields" :data="data" @save="toSave" labelWidth="150px" returns="/adminCenter/organization" 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>
-    </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.institution_code || '暂无' }}
+                  </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 :span="12" class="text">
+                  <el-col :span="3" class="left"> 所属辖区 </el-col>
+                  <el-col :span="21" 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="12" class="text">
+                  <el-col :span="3" class="left"> 注册类型 </el-col>
+                  <el-col :span="21" class="left">
+                    {{ form.companytype || '暂无' }}
+                  </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.companydate || '暂无' }}
+                  </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.companycapital || '暂无' }}
+                  </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.companyperson || '暂无' }}
+                  </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.sndqyzsr || '暂无' }}
+                  </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.sndyffy || '暂无' }}
+                  </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.companytotal || '暂无' }}
+                  </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.zjzyfrs || '暂无' }}
+                  </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.companybrief || '暂无' }}
+                  </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.mainproduct || '暂无' }}
+                  </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.qualifications || '暂无' }}
+                  </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>
 
@@ -16,34 +158,12 @@ const _ = require('lodash');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: organization } = createNamespacedHelpers('organization');
 export default {
-  name: 'organizationDetail',
+  name: 'detail',
   props: {},
   components: {},
   data: function () {
     return {
-      data: {},
-      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: 'institution_code', type: 'text' },
-
-        { label: '注册类型', model: 'companytype', type: 'text' },
-        { label: '注册时间', model: 'companydate', type: 'text' },
-        { label: '注册资金', model: 'companycapital', type: 'text' },
-        { label: '企业法人', model: 'companyperson', type: 'text' },
-        { label: '上年度企业总收入', model: 'sndqyzsr', type: 'text' },
-        { label: '上年度研发费用', model: 'sndyffy', type: 'text' },
-        { label: '企业总人数', model: 'companytotal', type: 'text' },
-        { label: '专&兼职研发人数', model: 'zjzyfrs', type: 'text' },
-        { label: '企业简介', model: 'companybrief', type: 'textarea', options: { maxRows: 5, minRows: 3 }, type: 'text' },
-        { label: '主要产品', model: 'mainproduct', type: 'textarea', options: { maxRows: 5, minRows: 3 }, type: 'text' },
-        { label: '企业资质&荣誉', model: 'qualifications', type: 'text' },
-        { label: '账号状态', model: 'status', type: 'radio' },
-      ],
+      form: {},
       statusList: status,
     };
   },
@@ -55,11 +175,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/organization');
+    },
+    async onSubmit() {
+      let dup = _.cloneDeep(this.form);
       let res;
       if (_.get(dup, 'id')) {
         res = await this.update(dup);
@@ -67,15 +190,12 @@ export default {
         res = await this.create(dup);
       }
       if (this.$checkRes(res, '保存成功', '保存失败')) {
-        if (!this.$dev_mode) this.$router.push('/adminCenter/organization');
+        if (this.$dev_mode) this.$router.push('/adminCenter/organization');
       }
     },
   },
   computed: {
-    ...mapState(['user', 'menuParams']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
+    ...mapState(['user']),
     id() {
       return this.$route.query.id;
     },
@@ -83,7 +203,82 @@ 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;
+            }
+          }
+          .radio {
+            margin: 0 0 10px 0;
+          }
+        }
+      }
+    }
+  }
+}
+.main:hover {
+  box-shadow: 0 0 5px #409eff;
+}
+</style>

src/views/adminCenter/organization/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: organization } = createNamespacedHelpers('organization');
 export default {
@@ -32,6 +40,7 @@ export default {
         },
       ],
       fields: [
+        { label: '辖区', prop: 'juris', filter: 'select' },
         { label: '企业名称', prop: 'name', filter: true },
         { label: '机构代码', prop: 'institution_code', filter: true },
         { 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>