From 0dc9a56031c8ebbf0eedc20f615635d2a3cd0e3f Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Mon, 31 Jul 2023 17:27:29 +0800
Subject: [PATCH] 2023-7-31

---
 src/components/Reception/Search.vue |  52 ++--
 src/const/formType.js               |   1 +
 src/router/index.js                 |   2 +-
 src/store/modules/reception.js      |  22 +-
 src/views/component/dialog.vue      |   4 +-
 src/views/component/table.vue       |   3 +-
 src/views/reception/list1/index.vue | 361 +++++++++++++++++++---------
 7 files changed, 304 insertions(+), 141 deletions(-)
 create mode 100644 src/const/formType.js

diff --git a/src/components/Reception/Search.vue b/src/components/Reception/Search.vue
index 14b4011..61c6e8c 100644
--- a/src/components/Reception/Search.vue
+++ b/src/components/Reception/Search.vue
@@ -5,14 +5,14 @@
         <template #reference>
           <el-button type="primary" class="dropdown-button" @click="popoverShow = !popoverShow">
             <div class="btn-slot">
-              <i class="el-icon-search el-icon--left"></i><p class="dropdown-button__text">{{selected || '搜索内部资料'}}</p><i class="el-icon-arrow-down el-icon--right"></i>
+              <i class="el-icon-search el-icon--left"></i><p class="dropdown-button__text">搜索内部资料</p><i class="el-icon-arrow-down el-icon--right"></i>
             </div>
           </el-button>
         </template>
         <template>
           <div class="dropdown-box">
             <div class="left">
-              <div class="left-item" v-for="i in typeList" @click="selectLabel = i.label,$store.commit('reception/SET_SELECTED',{ key: 'leixing',value: i.value })">
+              <div class="left-item" :class="{'left-item-active': isSelectedType(i)}" v-for="i in typeList" @click="typeSelect(i)">
                 {{ i.label }}
               </div>
             </div>
@@ -49,7 +49,7 @@
                  </template>
                </el-dropdown>
                <div class="search__bottom--input">
-                 <el-input placeholder="请输入内容" size="" :value="keyword" clearable @input="e => inputValue = e">
+                 <el-input placeholder="请输入内容" size="" :value="$store.state.reception.select.keyword" clearable @input="e => $store.commit('reception/SET_SELECTED',{ key: 'keyword', value: e })">
                    <template #append>
                      <el-button style="background: #247EC3;color: #fff;border: none;border-bottom-left-radius: 0;border-top-left-radius: 0;" @click="search">搜 索</el-button>
                    </template>
@@ -80,40 +80,51 @@
 </template>
 
 <script>
+import typeList from "@/const/formType"
 export default {
   data() {
     return {
       searchTypeText: '任意词',
       searchType: 'keyword',
       popoverShow: false,
-      selectLabel: '',
       selectValue: '',
       inputValue: '',
-      typeList: [{label:'制度文件',value:5},{label:'工作流程',value:1},{label:'岗位工作及标准',value:3},{label:'表单中心',value:2},{label:'部门工作职责',value:4}]
+      typeList,
     }
   },
   methods: {
+    typeSelect (i) {
+      if (this.$store.state.reception.select.leixing == i.value) {
+        this.$store.commit('reception/SET_SELECTED',{ key: 'leixing',value: '' })
+      } else {
+        this.$store.commit('reception/SET_SELECTED',{ key: 'leixing',value: i.value })
+        this.$router.push('/index/list1')
+      }
+    },
+
     searchCommand (e) {
       this.searchTypeText = e.label
       this.searchType = e.key
     },
     search () {
-      if (this.searchType === 'keyword') {
-        this.$store.commit('reception/SET_SELECTED',{ key: 'jianshu', value: '' })
-        this.$store.commit('reception/SET_SELECTED',{ key: 'keyword', value: this.inputValue })
-      }
-      if (this.searchType === 'jianshu') {
-        this.$store.commit('reception/SET_SELECTED',{ key: 'keyword', value: '' })
-        this.$store.commit('reception/SET_SELECTED',{ key: 'jianshu', value: this.inputValue })
-      }
-
-      this.$router.push(`/index/list1?${this.$store.getters.select}`)
+      this.$router.push('/index/list1')
+      // if (this.searchType === 'keyword') {
+      //   this.$store.commit('reception/SET_SELECTED',{ key: 'jianshu', value: '' })
+      //   this.$store.commit('reception/SET_SELECTED',{ key: 'keyword', value: this.inputValue })
+      // }
+      // if (this.searchType === 'jianshu') {
+      //   this.$store.commit('reception/SET_SELECTED',{ key: 'keyword', value: '' })
+      //   this.$store.commit('reception/SET_SELECTED',{ key: 'jianshu', value: this.inputValue })
+      // }
     }
   },
   computed: {
-    selected () {
-      return this.selectLabel ? this.selectLabel : (this.typeList.find(i => i.value == this.$route.query.leixing)?.label || '搜索内部资料')
+    isSelectedType () {
+      return function (i) {
+        return i.value == this.$store.state.reception.select.leixing
+      }
     },
+
     keyword () {
       return this.inputValue ? this.inputValue : (this.$route.query.keyword || '')
     }
@@ -148,6 +159,10 @@ export default {
         color: #fff;
         background: #247EC3;
       }
+      &-active {
+        color: #fff;
+        background: #247EC3;
+      }
     }
   }
   & .right {
@@ -257,6 +272,9 @@ export default {
   &__text {
     flex: 1;
     font-size: 16px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 }
 
diff --git a/src/const/formType.js b/src/const/formType.js
new file mode 100644
index 0000000..ec44464
--- /dev/null
+++ b/src/const/formType.js
@@ -0,0 +1 @@
+export default [{label:'制度文件',value:5},{label:'工作流程',value:1},{label:'岗位工作及标准',value:3},{label:'表单中心',value:2},{label:'部门工作职责',value:4}]
diff --git a/src/router/index.js b/src/router/index.js
index a91b17a..83e8e09 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -88,7 +88,7 @@ export const constantRoutes = [
   {
     path: '/',
     component: Layout,
-    redirect: '/dashboard',
+    redirect: '/index',
     children: [{
       path: 'dashboard',
       name: '系统首页',
diff --git a/src/store/modules/reception.js b/src/store/modules/reception.js
index 3f28874..48c7f3e 100644
--- a/src/store/modules/reception.js
+++ b/src/store/modules/reception.js
@@ -1,12 +1,22 @@
+import { materials } from '@/api/reception'
 const state = {
   select: {
+    page: 1,
+    page_size: 10,
+    table_name: "materials",
     tag_id: '',
     dept_id: '',
     keyword: '',
     jianshu: '',
     leixing: '',
     sort_name: '',
-  }
+    sort_type: "desc"
+  },
+  materials: {
+    total: 0,
+    list: []
+  },
+
 }
 
 const mutations = {
@@ -19,11 +29,19 @@ const mutations = {
     if (state.select.hasOwnProperty(key)) {
       state.select[key] = value
     }
+  },
+  SET_MATERIALS: (state, { list, total }) => {
+    state.materials.list = list;
+    state.materials.total = total;
   }
 }
 
 const actions = {
-
+  // getMaterials ({ commit, state }) {
+  //   materials(state.select).then(res => {
+  //     commit('SET_MATERIALS',{ list: res.data, total: res.total })
+  //   })
+  // }
 }
 
 export default {
diff --git a/src/views/component/dialog.vue b/src/views/component/dialog.vue
index 2b2de51..f121b41 100644
--- a/src/views/component/dialog.vue
+++ b/src/views/component/dialog.vue
@@ -229,8 +229,8 @@ export default {
           ? info._params.map((i) =>
               h("el-option", {
                 props: {
-                  label: i.key || i.value || i.name || i.no || i.mingcheng || i.id,
-                  value: i.id,
+                  label: i.name || i.mingcheng || i.label || i.key || i.value || i.id || i.no,
+                  value: i.id || i.value,
                 },
               })
             )
diff --git a/src/views/component/table.vue b/src/views/component/table.vue
index 4b71700..945ad66 100644
--- a/src/views/component/table.vue
+++ b/src/views/component/table.vue
@@ -538,9 +538,10 @@ export default {
           i._params = keys.map((key) => {
             return {
               key,
-              value: i.select_item[key],
+              value: /^\d*$/.test(i.select_item[key]) ? Number(i.select_item[key]) : i.select_item[key],
             };
           });
+          console.log('pp',i._params)
         }
         if (i.edit_input === "file" || i.edit_input === "files") {
           return;
diff --git a/src/views/reception/list1/index.vue b/src/views/reception/list1/index.vue
index 4e8eb2e..6f18d94 100644
--- a/src/views/reception/list1/index.vue
+++ b/src/views/reception/list1/index.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="list1">
-    <el-page-header class="header" @back="$router.replace('/index')" :content="type+'：共搜索到'+total+'条'">
+    <el-page-header
+      class="header"
+      @back="$router.replace('/index')"
+      :content="type + '：共搜索到' + total + '条'"
+    >
     </el-page-header>
 
     <div class="container">
@@ -8,7 +12,11 @@
         <template #template>
           <div class="list">
             <div class="list__item" v-for="i in 8" :key="i">
-              <el-skeleton-item class="list__item--name" variant="text" style="height: 36px;margin-right: 40px;"></el-skeleton-item>
+              <el-skeleton-item
+                class="list__item--name"
+                variant="text"
+                style="height: 36px; margin-right: 40px"
+              ></el-skeleton-item>
               <div class="list__item--btn">预览</div>
             </div>
           </div>
@@ -17,43 +25,63 @@
           <div>
             <div class="list" v-if="list.length > 0">
               <div class="list__item" v-for="i in list" :key="i.id">
-                <div class="list__item--pre" v-if="$route.query.leixing == 5">{{i.wenjian}}【{{i.nianfen}}】{{i.bianhao}}号</div>
-                <div class="list__item--name">{{i.biaoti}}</div>
-                <div class="list__item--date">{{ $moment(new Date(i.created_at)).format('YYYY-MM-DD') }}</div>
-                <el-dropdown trigger="click" placement="bottom-start" @command="open">
+                <div class="list__item--pre" v-if="$store.state.reception.select.leixing == 5">
+                  {{ i.wenjian }}【{{ i.nianfen }}】{{ i.bianhao }}号
+                </div>
+                <div class="list__item--name">{{ i.biaoti }}</div>
+                <div class="list__item--date">
+                  {{ $moment(new Date(i.created_at)).format("YYYY-MM-DD") }}
+                </div>
+                <el-dropdown
+                  trigger="click"
+                  placement="bottom-start"
+                  @command="open"
+                >
                   <div class="list__item--btn" @click="getDetail(i)">预览</div>
                   <template #dropdown>
                     <el-dropdown-menu v-if="load">
-                      <div style="width: 100px;position: relative;height: 60px;">
+                      <div
+                        style="width: 100px; position: relative; height: 60px"
+                      >
                         <Spin fix></Spin>
                       </div>
                     </el-dropdown-menu>
                     <el-dropdown-menu v-else>
                       <template v-if="uploadsList.length > 0">
-                        <el-dropdown-item :command="item" v-for="item in uploadsList">
+                        <el-dropdown-item
+                          :command="item"
+                          v-for="item in uploadsList"
+                        >
                           {{ item.name }}
                         </el-dropdown-item>
                       </template>
                       <template v-else>
-                        <el-dropdown-item disabled>
-                          暂无内容
-                        </el-dropdown-item>
+                        <el-dropdown-item disabled> 暂无内容 </el-dropdown-item>
                       </template>
                     </el-dropdown-menu>
                   </template>
                 </el-dropdown>
                 <div class="list__item--download">
-                  <el-dropdown trigger="click" placement="bottom-start" @command="down">
-                    <i class="el-icon-download"  @click="getDetail(i)"></i>
+                  <el-dropdown
+                    trigger="click"
+                    placement="bottom-start"
+                    @command="down"
+                  >
+                    <i class="el-icon-download" @click="getDetail(i)"></i>
                     <template #dropdown>
                       <el-dropdown-menu v-if="load">
-                        <div style="width: 100px;position: relative;height: 60px;">
+                        <div
+                          style="width: 100px; position: relative; height: 60px"
+                        >
                           <Spin fix></Spin>
                         </div>
                       </el-dropdown-menu>
                       <el-dropdown-menu v-else>
                         <template v-if="uploadsList.length > 0">
-                          <el-dropdown-item :command="item" v-for="item in uploadsList">
+                          <el-dropdown-item
+                            :command="item"
+                            v-for="item in uploadsList"
+                          >
                             {{ item.name }}
                           </el-dropdown-item>
                         </template>
@@ -78,13 +106,16 @@
         class="page"
         background
         layout="prev, pager, next"
-        :page-size.sync="select.page_size"
+        :page-size.sync="$store.state.reception.select.page_size"
         :total="total"
-        :current-page.sync="select.page"
-        @current-change="e => {
-          select.page = e
-          getMaterial()
-        }">
+        :current-page.sync="$store.state.reception.select.page"
+        @current-change="
+          (e) => {
+            $store.commit('reception/SET_SELECTED', { key: 'page', value: e });
+            getMaterial();
+          }
+        "
+      >
       </el-pagination>
     </div>
 
@@ -94,119 +125,211 @@
       :z-index="6000"
       v-model="showModal"
       :footer-hide="true"
-      title="预览">
+      title="预览"
+    >
       <template>
-        <iframe style="width: 100%;height: 57vh;" :src="codeUri" border="0"></iframe>
+        <iframe
+          style="width: 100%; height: 57vh"
+          :src="codeUri"
+          border="0"
+        ></iframe>
       </template>
     </Modal>
+
+    <div
+      class="type-select"
+      :class="{ 'type-select-hidden': !isTypeSelectShow }"
+    >
+      <div
+        v-for="item in formType"
+        class="type-select__item"
+        :class="{ 'type-select__item-active': isSelectedType(item) }"
+        @click="typeSelect(item)"
+      >
+        {{ item.label }}
+      </div>
+
+      <p class="close" @click="isTypeSelectShow = !isTypeSelectShow">
+        <i
+          :class="
+            isTypeSelectShow ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'
+          "
+        ></i>
+      </p>
+    </div>
   </div>
 </template>
 
 <script>
-import { download } from '@/utils/downloadRequest'
-import { materials, detail } from "@/api/reception"
+import formType from "@/const/formType";
+import { download } from "@/utils/downloadRequest";
+import { materials, detail } from "@/api/reception";
 export default {
   data() {
     return {
-      codeUri: '',
+      formType,
+      isTypeSelectShow: true,
+      codeUri: "",
       showModal: false,
       loading: false,
-      select: {
-        keyword: '',
-        page: 1,
-        leixing: '',
-        jianshu: '',
-        page_size: 10,
-        table_name: 'materials',
-        tag_id: '',
-        dept_id: '',
-        sort_name: '',
-        sort_type: 'desc',
-      },
       list: [],
       total: 0,
 
       load: false,
       uploadsList: [],
-    }
+    };
   },
   methods: {
-    async getMaterial () {
-      this.loading = true
-      const res = await materials(this.select)
-      this.total = res.tags.total
-      this.list = res.tags.data
-      this.loading = false
+    typeSelect(i) {
+      if (this.$store.state.reception.select.leixing == i.value) {
+        this.$store.commit("reception/SET_SELECTED", {
+          key: "leixing",
+          value: "",
+        });
+      } else {
+        this.$store.commit("reception/SET_SELECTED", {
+          key: "leixing",
+          value: i.value,
+        });
+      }
+
+      this.getMaterial()
+    },
+
+    async getMaterial() {
+      this.loading = true;
+      const res = await materials(this.$store.state.reception.select);
+      this.total = res.tags.total;
+      this.list = res.tags.data;
+      this.loading = false;
     },
 
-    async getDetail (i) {
-      this.load = true
+    async getDetail(i) {
+      this.load = true;
       const res = await detail({
-        table_name: 'materials',
-        id: i.id
-      })
-      this.uploadsList = res.detail?.id_material_fujian_uploads_material_id_relation || []
-      this.load = false
+        table_name: "materials",
+        id: i.id,
+      });
+      this.uploadsList =
+        res.detail?.id_material_fujian_uploads_material_id_relation || [];
+      this.load = false;
     },
 
-    open (e) {
-      this.codeUri =  `http://view.ali251.langye.net:8012/onlinePreview?url=${encodeURIComponent(new Buffer(e.url).toString('base64'))}`
+    open(e) {
+      this.codeUri = `http://view.ali251.langye.net:8012/onlinePreview?url=${encodeURIComponent(
+        new Buffer(e.url).toString("base64")
+      )}`;
 
-      this.showModal = true
+      this.showModal = true;
       //window.open(`http://view.ali251.langye.net:8012/onlinePreview?url=${codeUri}`)
     },
-    down (e) {
-      download (e.url, 'get', {}, e.name)
-    }
+    down(e) {
+      download(e.url, "get", {}, e.name);
+    },
   },
   computed: {
-    type () {
-      if (this.select.leixing == 1) {
-        return '流程文件'
-      }
-      if (this.select.leixing == 2) {
-        return '表单文件'
-      }
-      if (this.select.leixing == 3) {
-        return '岗位工作及标准'
-      }
-      if (this.select.leixing == 4) {
-        return '部门工作职责'
-      }
-      if (this.select.leixing == 5) {
-        return '规章制度管理'
-      }
-      return '全部文件'
-    }
+    isSelectedType() {
+      return function (i) {
+        return i.value == this.$store.state.reception.select.leixing;
+      };
+    },
+
+    type() {
+      return (
+        this.formType.find(
+          (i) => i.value === this.$store.state.reception.select.leixing
+        )?.label || "全部文件"
+      );
+    },
   },
-  watch: {
-    "$route.query": {
-      handler (newVal) {
-        this.select.page = 1;
-        this.select.leixing = newVal.leixing;
-        this.select.keyword = newVal.keyword;
-        this.select.sort_name = newVal.sort_name;
-        this.select.jianshu = newVal.jianshu;
-        this.getMaterial()
-      },
-      deep: true
-    }
+  mounted() {
+    this.getMaterial();
   },
-  created() {
-    this.select.page = 1;
-    let { leixing, keyword , tag_id, dept_id, sort_name, jianshu } = this.$route.query
-    this.select.leixing = leixing;
-    this.select.keyword = keyword;
-    this.select.tag_id = tag_id;
-    this.select.dept_id = dept_id;
-    this.select.sort_name = sort_name;
-    this.select.jianshu = jianshu;
-    this.getMaterial()
-  }
-}
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      vm.getMaterial()
+    })
+  },
+};
 </script>
 
 <style scoped lang="scss">
+.type-select {
+  border-radius: 4px;
+  background: #fff;
+  text-align: center;
+  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.04));
+  line-height: 3.5;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  transform: translateY(-50%);
+  position: fixed;
+  top: 50%;
+  left: 16px;
+
+  &-hidden {
+    transform: translate(calc(-100% - 16px), -50%);
+  }
+  &__item {
+    color: #333;
+    font-size: 13.5px;
+    font-weight: 600;
+    transition: all 0.3s;
+
+    padding: 0 4px;
+    position: relative;
+    &::after {
+      content: "";
+      height: 1px;
+      background: rgba(160, 160, 160, 0.3);
+
+      position: absolute;
+      left: 8px;
+      right: 8px;
+      top: -0.5px;
+    }
+    &:hover {
+      color: #fff;
+      background: #247ec3;
+    }
+    &-active {
+      color: #fff;
+      background: #247ec3;
+    }
+  }
+  & > div:nth-child(1) {
+    border-radius: 4px 4px 0 0;
+    &::after {
+      display: none;
+    }
+  }
+  & > div:nth-last-child(2) {
+    border-radius: 0 0 4px 4px;
+  }
+
+  .close {
+    width: 20px;
+    cursor: pointer;
+    background: #fff;
+    color: #333;
+    box-sizing: border-box;
+    font-size: 12px;
+    line-height: 2;
+    border-radius: 0 4px 4px 0;
+    transition: all 0.3s;
+
+    padding: 10px 4px 10px 2px;
+    transform: translate(100%, -50%);
+    position: absolute;
+    top: 50%;
+    right: 0%;
+    &:hover {
+      color: #fff;
+      background: #247ec3;
+    }
+  }
+}
 ::v-deep .el-page-header__content {
   font-size: 15px;
 }
@@ -214,10 +337,11 @@ export default {
   background: #f8f8f8;
 
   padding: 31px 18.75%;
+  position: relative;
 }
 .header {
   background: #fff;
-  box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
+  box-shadow: 0 0 15px 0 rgba(130, 127, 126, 0.1);
 
   padding: 16px 23px 16px 22px;
   margin-bottom: 20px;
@@ -225,17 +349,15 @@ export default {
 .container {
   background: #fff;
   border-radius: 2px;
-  box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
+  box-shadow: 0 0 15px 0 rgba(130, 127, 126, 0.1);
 
   padding: 24px 23px 44px 22px;
-
 }
 .list {
-
   &__item {
     display: flex;
     align-items: center;
-    border-bottom: 1px solid #F8F8F8;
+    border-bottom: 1px solid #f8f8f8;
 
     padding: 11px 9px 11px 27px;
     position: relative;
@@ -243,15 +365,15 @@ export default {
     &--pre {
       font-size: 13px;
       font-weight: 500;
-      color: #398AC9;
+      color: #398ac9;
 
       padding-right: 10px;
       position: relative;
 
       &::after {
-        content:'';
+        content: "";
         width: 2px;
-        background: #398AC9;
+        background: #398ac9;
 
         position: absolute;
         top: 2px;
@@ -260,7 +382,7 @@ export default {
       }
     }
     &::before {
-      content: '';
+      content: "";
       height: 6px;
       width: 6px;
       border-radius: 6px;
@@ -287,24 +409,24 @@ export default {
     &--btn {
       cursor: pointer;
       font-size: 13px;
-      color: #247EC3;
+      color: #247ec3;
       border-radius: 30px;
-      border: 1px solid #247EC3;
-      transition: all .2s;
+      border: 1px solid #247ec3;
+      transition: all 0.2s;
 
       padding: 7px 17px;
       margin-right: 23px;
 
       &:hover {
         color: #fff;
-        background: #247EC3;
+        background: #247ec3;
       }
     }
     &--download {
       cursor: pointer;
-      & > i{
+      & > i {
         font-size: 16px;
-        color: #247EC3;
+        color: #247ec3;
       }
 
       padding-right: 9px;
@@ -318,17 +440,20 @@ export default {
 
   margin-top: 30px;
 
-  & ::v-deep .btn-prev, ::v-deep .btn-next ,::v-deep .el-pager > li {
+  & ::v-deep .btn-prev,
+  ::v-deep .btn-next,
+  ::v-deep .el-pager > li {
     width: 39px;
     height: 39px;
     line-height: 39px;
     text-align: center;
     border-radius: 100px;
     background: #fff;
-    transition: all .2s;
+    transition: all 0.2s;
   }
 
-  & ::v-deep .btn-prev, ::v-deep .btn-next {
+  & ::v-deep .btn-prev,
+  ::v-deep .btn-next {
     background: #fff;
     border: 1px solid #e7e7e7;
   }