1

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

@@ -0,0 +1,97 @@
+<template>
+  <div id="detail">
+    <data-form :fields="fields" :data="data" @save="toSave" labelWidth="150px" returns="/adminCenter/policy" 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 === 'desc'">
+          <p v-html="data[item.model]"></p>
+        </template> -->
+        <template>
+          <template v-for="(i, index) in data[item.model]">
+            <img v-if="isImg(i.url)" :key="`${item.model}-${index}`" :src="i.url" width="150px" height="150px" />
+            <el-link v-else :key="`${item.model}-${index}`" type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
+          </template>
+        </template>
+      </template>
+    </data-form>
+  </div>
+</template>
+
+<script>
+const _ = require('lodash');
+const { policyType, policyStatus } = require('@common/dict/index');
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: policy } = createNamespacedHelpers('policy');
+export default {
+  name: 'policyDetail',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      data: {},
+      fields: [
+        { label: '申请单位', model: 'company', type: 'text' },
+        { label: '申请类型', model: 'type', type: 'text' },
+        { label: '申请人', model: 'apply_personal', type: 'text' },
+        { label: '法人复印件', model: 'qyfr', custom: true },
+        { label: '企业营业执照', model: 'yyzz', custom: true },
+        { label: '企业利润表', model: 'qylr', custom: true },
+        { label: '建议', model: 'desc', type: 'textarea' },
+        { label: '审核状态', model: 'status', type: 'radio' },
+      ],
+      statusList: policyStatus,
+      imgList: ['jpg', 'jpeg', 'png', 'bmp', 'gif'],
+    };
+  },
+  created() {
+    if (this.id) this.search();
+  },
+  methods: {
+    ...policy(['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/policy');
+      }
+    },
+    isImg(url) {
+      const arr = url.split('.');
+      const suffix = _.last(arr);
+      return this.imgList.includes(suffix);
+    },
+    toOpen(url) {
+      window.open(url);
+    },
+  },
+  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/policy/detail.vue

@@ -1,48 +1,96 @@
 <template>
   <div id="detail">
-    <data-form :fields="fields" :data="data" @save="toSave" labelWidth="150px" returns="/adminCenter/policy" 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 === 'desc'">
-          <p v-html="data[item.model]"></p>
-        </template> -->
-        <template>
-          <template v-for="(i, index) in data[item.model]">
-            <img v-if="isImg(i.url)" :key="`${item.model}-${index}`" :src="i.url" width="150px" height="150px" />
-            <el-link v-else :key="`${item.model}-${index}`" type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
-          </template>
-        </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" ref="form" label-width="100px">
+              <el-col :span="24" class="text">
+                <el-col :span="2" class="left"> 申请单位</el-col>
+                <el-col :span="22" class="right">
+                  {{ form.company }}
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-col :span="2" class="left"> 申请人</el-col>
+                <el-col :span="22" class="right">
+                  {{ form.apply_personal }}
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-col :span="2" class="left"> 申请类型</el-col>
+                <el-col :span="22" class="right">
+                  {{ form.type }}
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-col :span="2" class="left"> 法人复印件：</el-col>
+                <el-col :span="20" class="right">
+                  <el-col :span="4" v-for="(i, index) in form.qyfr" :key="`medium_material-${index}`">
+                    <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
+                    <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
+                  </el-col>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-col :span="2" class="left"> 企业营业执照：</el-col>
+                <el-col :span="20" class="right">
+                  <el-col :span="4" v-for="(i, index) in form.yyzz" :key="`medium_material-${index}`">
+                    <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
+                    <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
+                  </el-col>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-col :span="2" class="left"> 企业利润表：</el-col>
+                <el-col :span="20" class="right">
+                  <el-col :span="4" v-for="(i, index) in form.qylr" :key="`medium_material-${index}`">
+                    <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
+                    <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
+                  </el-col>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="text">
+                <el-col :span="2" class="left"> 审核状态</el-col>
+                <el-col :span="22" class="right">
+                  <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>
+              <el-col :span="24" class="text">
+                <el-col :span="2" class="left"> 审核意见</el-col>
+                <el-col :span="22" class="right">
+                  <el-input v-model="form.desc" type="textarea" maxlength="300" :autosize="{ minRows: 4, maxRows: 6 }" show-word-limit></el-input>
+                </el-col>
+              </el-col>
+              <el-col :span="24" class="formBtn">
+                <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>
 
 <script>
 const _ = require('lodash');
-const { policyType, policyStatus } = require('@common/dict/index');
+const { policyStatus } = require('@common/dict/index');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: policy } = createNamespacedHelpers('policy');
 export default {
-  name: 'policyDetail',
+  name: 'detail',
   props: {},
   components: {},
   data: function () {
     return {
-      data: {},
-      fields: [
-        { label: '申请单位', model: 'company', type: 'text' },
-        { label: '申请类型', model: 'type', type: 'text' },
-        { label: '申请人', model: 'apply_personal', type: 'text' },
-        { label: '法人复印件', model: 'qyfr', custom: true },
-        { label: '企业营业执照', model: 'yyzz', custom: true },
-        { label: '企业利润表', model: 'qylr', custom: true },
-        { label: '建议', model: 'desc', type: 'textarea' },
-        { label: '审核状态', model: 'status', type: 'radio' },
-      ],
+      form: {},
       statusList: policyStatus,
       imgList: ['jpg', 'jpeg', 'png', 'bmp', 'gif'],
     };
@@ -55,20 +103,26 @@ 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/policy');
-      }
+    onSubmit(formName) {
+      this.$refs[formName].validate(async (valid) => {
+        if (valid) {
+          let data = this.form;
+          let res = await this.update(data);
+          if (this.$checkRes(res)) {
+            this.$message({
+              message: '政策服务审核成功',
+              type: 'success',
+            });
+            this.back();
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
     },
     isImg(url) {
       const arr = url.split('.');
@@ -78,12 +132,12 @@ export default {
     toOpen(url) {
       window.open(url);
     },
+    back() {
+      this.$router.push('/adminCenter/policy');
+    },
   },
   computed: {
-    ...mapState(['user', 'menuParams']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
+    ...mapState(['user']),
     id() {
       return this.$route.query.id;
     },
@@ -91,7 +145,50 @@ 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 {
+      padding: 10px 0;
+      border-bottom: 1px dashed #333;
+      .left {
+        text-align: left;
+      }
+      .right {
+        img {
+          width: 200px;
+          height: 200px;
+          border: 1px solid #ccc;
+        }
+      }
+      .desc {
+        margin: 10px 0 0 0;
+      }
+    }
+    .formBtn {
+      text-align: center;
+      padding: 10px 0;
+    }
+  }
+}
+.main:hover {
+  box-shadow: 0 0 5px #409eff;
+}
+</style>

src/views/adminCenter/policy/index.vue

@@ -1,15 +1,18 @@
 <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>
-      <template #options="{ item }">
-        <template v-if="item.prop === 'type'">
-          <el-option v-for="(i, index) in typeList" :key="`type-${index}`" :label="i" :value="i"></el-option>
-        </template>
-      </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">
+            <template #options="{ item }">
+              <template v-if="item.prop === 'type'">
+                <el-option v-for="(i, index) in typeList" :key="`type-${index}`" :label="i" :value="i"></el-option>
+              </template>
+            </template>
+          </data-table>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -18,7 +21,7 @@ const { policyType, policyStatus } = require('@common/dict/index');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: policy } = createNamespacedHelpers('policy');
 export default {
-  name: 'policyIndex',
+  name: 'index',
   props: {},
   components: {},
   data: function () {
@@ -29,12 +32,11 @@ export default {
         {
           label: '审核',
           method: 'edit',
-          // display: (i) => i.status === '0',
         },
       ],
       fields: [
-        { label: '申请单位', prop: 'company' },
-        { label: '申请类型', prop: 'type', filter: 'select' },
+        { label: '申请单位', prop: 'company', filter: 'input' },
+        { label: '申请类型', prop: 'type' },
         { label: '申请人', prop: 'apply_personal' },
         { label: '联系电话', prop: 'phone' },
         {
@@ -57,35 +59,45 @@ export default {
   methods: {
     ...policy(['query', 'delete']),
     async search({ skip = 0, limit = 10, ...info } = {}) {
+      info.type = this.type;
       const res = await this.query({ skip, limit, ...info });
       if (this.$checkRes(res)) {
         this.$set(this, `list`, res.data);
         this.$set(this, `total`, res.total);
       }
     },
-    toAdd() {
-      this.$router.push('/adminCenter/policy/detail');
-    },
     toEdit({ data }) {
       this.$router.push({ path: '/adminCenter/policy/detail', query: { id: data._id } });
     },
-    async toDelete({ data }) {
-      const res = await this.delete(data._id);
-      if (this.$checkRes(res, '删除成功', '删除失败')) {
-        this.search();
-      }
-    },
   },
   computed: {
-    ...mapState(['user', 'menuParams']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
+    ...mapState(['user']),
+    type() {
+      return this.$route.query.type;
     },
   },
   metaInfo() {
     return { title: this.$route.meta.title };
   },
+  watch: {
+    type: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        this.search();
+      },
+    },
+  },
 };
 </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>