master
xy 3 years ago
parent 1ab8d13dfe
commit 0dc9a56031

@ -5,14 +5,14 @@
<template #reference> <template #reference>
<el-button type="primary" class="dropdown-button" @click="popoverShow = !popoverShow"> <el-button type="primary" class="dropdown-button" @click="popoverShow = !popoverShow">
<div class="btn-slot"> <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> </div>
</el-button> </el-button>
</template> </template>
<template> <template>
<div class="dropdown-box"> <div class="dropdown-box">
<div class="left"> <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 }} {{ i.label }}
</div> </div>
</div> </div>
@ -49,7 +49,7 @@
</template> </template>
</el-dropdown> </el-dropdown>
<div class="search__bottom--input"> <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> <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> <el-button style="background: #247EC3;color: #fff;border: none;border-bottom-left-radius: 0;border-top-left-radius: 0;" @click="search"> </el-button>
</template> </template>
@ -80,40 +80,51 @@
</template> </template>
<script> <script>
import typeList from "@/const/formType"
export default { export default {
data() { data() {
return { return {
searchTypeText: '任意词', searchTypeText: '任意词',
searchType: 'keyword', searchType: 'keyword',
popoverShow: false, popoverShow: false,
selectLabel: '',
selectValue: '', selectValue: '',
inputValue: '', inputValue: '',
typeList: [{label:'制度文件',value:5},{label:'工作流程',value:1},{label:'岗位工作及标准',value:3},{label:'表单中心',value:2},{label:'部门工作职责',value:4}] typeList,
} }
}, },
methods: { 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) { searchCommand (e) {
this.searchTypeText = e.label this.searchTypeText = e.label
this.searchType = e.key this.searchType = e.key
}, },
search () { search () {
if (this.searchType === 'keyword') { this.$router.push('/index/list1')
this.$store.commit('reception/SET_SELECTED',{ key: 'jianshu', value: '' }) // if (this.searchType === 'keyword') {
this.$store.commit('reception/SET_SELECTED',{ key: 'keyword', value: this.inputValue }) // 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: '' }) // if (this.searchType === 'jianshu') {
this.$store.commit('reception/SET_SELECTED',{ key: 'jianshu', value: this.inputValue }) // 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}`)
} }
}, },
computed: { computed: {
selected () { isSelectedType () {
return this.selectLabel ? this.selectLabel : (this.typeList.find(i => i.value == this.$route.query.leixing)?.label || '搜索内部资料') return function (i) {
return i.value == this.$store.state.reception.select.leixing
}
}, },
keyword () { keyword () {
return this.inputValue ? this.inputValue : (this.$route.query.keyword || '') return this.inputValue ? this.inputValue : (this.$route.query.keyword || '')
} }
@ -148,6 +159,10 @@ export default {
color: #fff; color: #fff;
background: #247EC3; background: #247EC3;
} }
&-active {
color: #fff;
background: #247EC3;
}
} }
} }
& .right { & .right {
@ -257,6 +272,9 @@ export default {
&__text { &__text {
flex: 1; flex: 1;
font-size: 16px; font-size: 16px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }
} }

@ -0,0 +1 @@
export default [{label:'制度文件',value:5},{label:'工作流程',value:1},{label:'岗位工作及标准',value:3},{label:'表单中心',value:2},{label:'部门工作职责',value:4}]

@ -88,7 +88,7 @@ export const constantRoutes = [
{ {
path: '/', path: '/',
component: Layout, component: Layout,
redirect: '/dashboard', redirect: '/index',
children: [{ children: [{
path: 'dashboard', path: 'dashboard',
name: '系统首页', name: '系统首页',

@ -1,12 +1,22 @@
import { materials } from '@/api/reception'
const state = { const state = {
select: { select: {
page: 1,
page_size: 10,
table_name: "materials",
tag_id: '', tag_id: '',
dept_id: '', dept_id: '',
keyword: '', keyword: '',
jianshu: '', jianshu: '',
leixing: '', leixing: '',
sort_name: '', sort_name: '',
} sort_type: "desc"
},
materials: {
total: 0,
list: []
},
} }
const mutations = { const mutations = {
@ -19,11 +29,19 @@ const mutations = {
if (state.select.hasOwnProperty(key)) { if (state.select.hasOwnProperty(key)) {
state.select[key] = value state.select[key] = value
} }
},
SET_MATERIALS: (state, { list, total }) => {
state.materials.list = list;
state.materials.total = total;
} }
} }
const actions = { const actions = {
// getMaterials ({ commit, state }) {
// materials(state.select).then(res => {
// commit('SET_MATERIALS',{ list: res.data, total: res.total })
// })
// }
} }
export default { export default {

@ -229,8 +229,8 @@ export default {
? info._params.map((i) => ? info._params.map((i) =>
h("el-option", { h("el-option", {
props: { props: {
label: i.key || i.value || i.name || i.no || i.mingcheng || i.id, label: i.name || i.mingcheng || i.label || i.key || i.value || i.id || i.no,
value: i.id, value: i.id || i.value,
}, },
}) })
) )

@ -538,9 +538,10 @@ export default {
i._params = keys.map((key) => { i._params = keys.map((key) => {
return { return {
key, 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") { if (i.edit_input === "file" || i.edit_input === "files") {
return; return;

@ -1,6 +1,10 @@
<template> <template>
<div class="list1"> <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> </el-page-header>
<div class="container"> <div class="container">
@ -8,7 +12,11 @@
<template #template> <template #template>
<div class="list"> <div class="list">
<div class="list__item" v-for="i in 8" :key="i"> <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 class="list__item--btn">预览</div>
</div> </div>
</div> </div>
@ -17,43 +25,63 @@
<div> <div>
<div class="list" v-if="list.length > 0"> <div class="list" v-if="list.length > 0">
<div class="list__item" v-for="i in list" :key="i.id"> <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--pre" v-if="$store.state.reception.select.leixing == 5">
<div class="list__item--name">{{i.biaoti}}</div> {{ i.wenjian }}{{ i.nianfen }}{{ i.bianhao }}
<div class="list__item--date">{{ $moment(new Date(i.created_at)).format('YYYY-MM-DD') }}</div> </div>
<el-dropdown trigger="click" placement="bottom-start" @command="open"> <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> <div class="list__item--btn" @click="getDetail(i)"></div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu v-if="load"> <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> <Spin fix></Spin>
</div> </div>
</el-dropdown-menu> </el-dropdown-menu>
<el-dropdown-menu v-else> <el-dropdown-menu v-else>
<template v-if="uploadsList.length > 0"> <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 }} {{ item.name }}
</el-dropdown-item> </el-dropdown-item>
</template> </template>
<template v-else> <template v-else>
<el-dropdown-item disabled> <el-dropdown-item disabled> 暂无内容 </el-dropdown-item>
暂无内容
</el-dropdown-item>
</template> </template>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
<div class="list__item--download"> <div class="list__item--download">
<el-dropdown trigger="click" placement="bottom-start" @command="down"> <el-dropdown
<i class="el-icon-download" @click="getDetail(i)"></i> trigger="click"
placement="bottom-start"
@command="down"
>
<i class="el-icon-download" @click="getDetail(i)"></i>
<template #dropdown> <template #dropdown>
<el-dropdown-menu v-if="load"> <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> <Spin fix></Spin>
</div> </div>
</el-dropdown-menu> </el-dropdown-menu>
<el-dropdown-menu v-else> <el-dropdown-menu v-else>
<template v-if="uploadsList.length > 0"> <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 }} {{ item.name }}
</el-dropdown-item> </el-dropdown-item>
</template> </template>
@ -78,13 +106,16 @@
class="page" class="page"
background background
layout="prev, pager, next" layout="prev, pager, next"
:page-size.sync="select.page_size" :page-size.sync="$store.state.reception.select.page_size"
:total="total" :total="total"
:current-page.sync="select.page" :current-page.sync="$store.state.reception.select.page"
@current-change="e => { @current-change="
select.page = e (e) => {
getMaterial() $store.commit('reception/SET_SELECTED', { key: 'page', value: e });
}"> getMaterial();
}
"
>
</el-pagination> </el-pagination>
</div> </div>
@ -94,119 +125,211 @@
:z-index="6000" :z-index="6000"
v-model="showModal" v-model="showModal"
:footer-hide="true" :footer-hide="true"
title="预览"> title="预览"
>
<template> <template>
<iframe style="width: 100%;height: 57vh;" :src="codeUri" border="0"></iframe> <iframe
style="width: 100%; height: 57vh"
:src="codeUri"
border="0"
></iframe>
</template> </template>
</Modal> </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> </div>
</template> </template>
<script> <script>
import { download } from '@/utils/downloadRequest' import formType from "@/const/formType";
import { materials, detail } from "@/api/reception" import { download } from "@/utils/downloadRequest";
import { materials, detail } from "@/api/reception";
export default { export default {
data() { data() {
return { return {
codeUri: '', formType,
isTypeSelectShow: true,
codeUri: "",
showModal: false, showModal: false,
loading: 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: [], list: [],
total: 0, total: 0,
load: false, load: false,
uploadsList: [], uploadsList: [],
} };
}, },
methods: { methods: {
async getMaterial () { typeSelect(i) {
this.loading = true if (this.$store.state.reception.select.leixing == i.value) {
const res = await materials(this.select) this.$store.commit("reception/SET_SELECTED", {
this.total = res.tags.total key: "leixing",
this.list = res.tags.data value: "",
this.loading = false });
} 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) { async getDetail(i) {
this.load = true this.load = true;
const res = await detail({ const res = await detail({
table_name: 'materials', table_name: "materials",
id: i.id id: i.id,
}) });
this.uploadsList = res.detail?.id_material_fujian_uploads_material_id_relation || [] this.uploadsList =
this.load = false res.detail?.id_material_fujian_uploads_material_id_relation || [];
this.load = false;
}, },
open (e) { open(e) {
this.codeUri = `http://view.ali251.langye.net:8012/onlinePreview?url=${encodeURIComponent(new Buffer(e.url).toString('base64'))}` 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}`) //window.open(`http://view.ali251.langye.net:8012/onlinePreview?url=${codeUri}`)
}, },
down (e) { down(e) {
download (e.url, 'get', {}, e.name) download(e.url, "get", {}, e.name);
} },
}, },
computed: { computed: {
type () { isSelectedType() {
if (this.select.leixing == 1) { return function (i) {
return '流程文件' return i.value == this.$store.state.reception.select.leixing;
} };
if (this.select.leixing == 2) { },
return '表单文件'
} type() {
if (this.select.leixing == 3) { return (
return '岗位工作及标准' this.formType.find(
} (i) => i.value === this.$store.state.reception.select.leixing
if (this.select.leixing == 4) { )?.label || "全部文件"
return '部门工作职责' );
} },
if (this.select.leixing == 5) {
return '规章制度管理'
}
return '全部文件'
}
}, },
watch: { mounted() {
"$route.query": { this.getMaterial();
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
}
}, },
created() { beforeRouteEnter(to, from, next) {
this.select.page = 1; next(vm => {
let { leixing, keyword , tag_id, dept_id, sort_name, jianshu } = this.$route.query vm.getMaterial()
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()
}
}
</script> </script>
<style scoped lang="scss"> <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 { ::v-deep .el-page-header__content {
font-size: 15px; font-size: 15px;
} }
@ -214,10 +337,11 @@ export default {
background: #f8f8f8; background: #f8f8f8;
padding: 31px 18.75%; padding: 31px 18.75%;
position: relative;
} }
.header { .header {
background: #fff; 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; padding: 16px 23px 16px 22px;
margin-bottom: 20px; margin-bottom: 20px;
@ -225,17 +349,15 @@ export default {
.container { .container {
background: #fff; background: #fff;
border-radius: 2px; 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; padding: 24px 23px 44px 22px;
} }
.list { .list {
&__item { &__item {
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid #F8F8F8; border-bottom: 1px solid #f8f8f8;
padding: 11px 9px 11px 27px; padding: 11px 9px 11px 27px;
position: relative; position: relative;
@ -243,15 +365,15 @@ export default {
&--pre { &--pre {
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
color: #398AC9; color: #398ac9;
padding-right: 10px; padding-right: 10px;
position: relative; position: relative;
&::after { &::after {
content:''; content: "";
width: 2px; width: 2px;
background: #398AC9; background: #398ac9;
position: absolute; position: absolute;
top: 2px; top: 2px;
@ -260,7 +382,7 @@ export default {
} }
} }
&::before { &::before {
content: ''; content: "";
height: 6px; height: 6px;
width: 6px; width: 6px;
border-radius: 6px; border-radius: 6px;
@ -287,24 +409,24 @@ export default {
&--btn { &--btn {
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
color: #247EC3; color: #247ec3;
border-radius: 30px; border-radius: 30px;
border: 1px solid #247EC3; border: 1px solid #247ec3;
transition: all .2s; transition: all 0.2s;
padding: 7px 17px; padding: 7px 17px;
margin-right: 23px; margin-right: 23px;
&:hover { &:hover {
color: #fff; color: #fff;
background: #247EC3; background: #247ec3;
} }
} }
&--download { &--download {
cursor: pointer; cursor: pointer;
& > i{ & > i {
font-size: 16px; font-size: 16px;
color: #247EC3; color: #247ec3;
} }
padding-right: 9px; padding-right: 9px;
@ -318,17 +440,20 @@ export default {
margin-top: 30px; 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; width: 39px;
height: 39px; height: 39px;
line-height: 39px; line-height: 39px;
text-align: center; text-align: center;
border-radius: 100px; border-radius: 100px;
background: #fff; 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; background: #fff;
border: 1px solid #e7e7e7; border: 1px solid #e7e7e7;
} }

Loading…
Cancel
Save