<template>
<div class="contact">
<div>
<div>
<el-form ref="form" :model="queryParams">
<div class="input-box">
<el-form-item class="ipt-item" v-for="(item, index) of expandTableList" :key="index"
:label="item.tableName" v-if="item.ifSearch == 0">
<!-- input类型 -->
<el-input v-if="item.type == 0" :placeholder="'请输入' + item.tableName"
v-model="queryParams[item.tableKey]" clearable />
<!-- data类型 -->
<el-date-picker v-if="item.type == 1" v-model="data_range[item.tableKey]"
:type="(item.datFormatRule == null || !item.datFormatRule) ? 'daterange' : 'month'"
placeholder="请选择时间" start-placeholder="请选择开始时间"
:format="(item.datFormatRule == null || !item.datFormatRule) ? 'yyyy-MM-dd' : item.datFormatRule"
:value-format="(item.datFormatRule == null || !item.datFormatRule) ? 'yyyy-MM-dd' : item.datFormatRule"
end-placeholder="请选择结束时间" :clearable="false" @change="handlerChangeTimes(item)" />
<!-- select类型 -->
<el-select v-if="(item.type == 3 || item.type == 5) && item.dictList != null"
v-model="queryParams[item.tableKey]" placeholder="请选择">
<el-option v-for="(itm, idx) in item.dictList" :key="idx" :label="itm.dictLabel"
:value="itm.dictValue">
</el-option>
</el-select>
</el-form-item>
<el-form-item class="ipt-item" label="请选择服务站">
<el-cascader class="ipt-select" v-model="queryParams.serviceStationId" :options="dept_list"
:props="{ label: 'label', value: 'id', children: 'children' }" :show-all-levels="false"
@change="handlerSelectDept">
</el-cascader>
</el-form-item>
<div class="ipt-item">
<el-button class="ipt-btn" @click="handlerSearch">搜索</el-button>
<el-button class="ipt-btn" @click="handlerResert">重置</el-button>
<el-button class="ipt-btn" type="primary" @click="handlerCreateNew">新建</el-button>
</div>
</div>
</el-form>
</div>
</div>
<div class="content-box">
<div class="content-top">
<div class="top-l"><span>建议上传周期：</span><span>{{ upload_period }}</span></div>
<div class="top-r"><span>本年已上传次数：</span> <span>{{ (year_number == null || year_number == '') ? 0 :
year_number }}</span></div>
</div>
<div class="content-text" v-if="upload_type == 0">
<p @click="handlerCkickLink">存在于三天后上传失效的考核项，请及时上传(点击链接可定位至该菜单上传文件)</p>
</div>
<div class="content-table">
<el-table :data="init_list" :header-cell-style="{ background: '#F3F4F7', color: '#20262E' }">
<el-table-column v-if="item.ifShow == 0" v-for="(item, index) of expandTableList" :key="index"
:label="item.tableName" align="center" :prop="item.tableKey" min-width="120">
<template slot-scope="scope">
<span v-if="item.type == 3 || item.type == 5">{{ getDictLabel(item.dictList,
scope.row[item.tableKey]) }}</span>
<span v-else-if='item.type == 2'>{{ scope.row[item.tableKey] == undefined ||
scope.row[item.tableKey] == null ? '×' : '√' }}</span>
<span v-else>{{ scope.row[item.tableKey] }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width"
width="200">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-view"
@click="handlerViewDetail(scope.row)">查看</el-button>
<el-button size="mini" type="text" icon="el-icon-edit"
@click="handlerEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="text" icon="el-icon-delete"
@click="handlerDetail(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="table-bottom-box">
<div class="bottom-l">本页显示第 {{ ((queryParams.current - 1) * queryParams.size) + 1 }} - {{
queryParams.current * queryParams.size }} 条</div>
<div class="bottom-r">
<pagination :total="total" :page.sync="queryParams.current" :limit.sync="queryParams.size"
@pagination="initList" />
</div>
</div>
</div>
</div>
<!-- ----------------- 查看详情 draw -0-0-0-0- ------------ -->
<el-drawer :visible.sync="create_show" :with-header="false" size="60%">
<div class="draw-box">
<div class="draw-top">
<div class="top-left draw-title">{{ draw_title }}</div>
<div class="top-right">
<el-button class="btn" @click="create_show = false" type="primary">关闭</el-button>
</div>
</div>
<el-form ref="form" :model="form" :rules="rules">
<div class="draw-input-box">
<el-form-item v-for="(item, index) of expandTableList" :key="index" class="ipt-item"
:label="item.tableName" v-if="item.ifForm == 0" :prop="item.tableKey">
<!-- item.type == 0 正常的input类型 -->
<el-input :disabled="isView" v-if="item.type == 0" :placeholder="'请输入' + item.tableName"
prefix-icon="el-icon-search" v-model="form[item.tableKey]" clearable />
<!-- item.type == 1 date类型 -->
<el-date-picker :disabled="isView" v-if="item.type == 1" v-model="form[item.tableKey]"
:type="(item.datFormatRule == null || !item.datFormatRule || item.datFormatRule == 'yyyy-MM-dd') ? 'date' : (item.datFormatRule == 'yyyy-MM' ? 'month' : 'year')"
:clearable="false" placeholder="请选择时间"
:format="(item.datFormatRule == null || !item.datFormatRule) ? 'yyyy-MM-dd' : item.datFormatRule"
:value-format="(item.datFormatRule == null || !item.datFormatRule) ? 'yyyy-MM-dd' : item.datFormatRule" />
<!-- item.type == 2 文件上传类型 -->
<div class="draw-content" v-if="item.type == 2">
<div class="file-box">
<!-- 文件上传 若依文件上传组件 -->
<fileUpload v-if="isView == false" @input="input" @click.native="handlerSubmitFile(item)" />
<el-form-item class="ipt-item">
<div class="draw-tablebox">
<el-table :data="form[item.tableKey]" :key="key"
:header-cell-style="{ background: '#F3F4F7', color: '#20262E', }">
<el-table-column label="序号" align="center" type="index" />
<el-table-column label="附件" align="center" prop="filename"
:show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" fixed="right"
class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-delete"
v-if="isView == false"
@click="handlerDrawDelete(scope.row)">删除</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" v-else
@click="handlerViewFile(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-form-item>
</div>
</div>
<!-- item.type == 3 select类型 -->
<el-select :disabled="isView" v-if="item.type == 3 && item.dictList != null"
v-model="form[item.tableKey]" placeholder="请选择">
<el-option v-for="(itm, idx) in item.dictList" :key="idx" :label="itm.dictLabel"
:value="itm.dictValue">
</el-option>
</el-select>
<!-- item.type == 4 多选类型 -->
<div class="file-box" v-if="item.type == 4">
<div class="draw-treebox">
<div class="treebox-l">
<el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu"
v-model="form[item.tableKey]" node-key="id" empty-text="加载中，请稍候"
:props="defaultProps"
@check-change="handlerGetCheckedKeys(item.tableKey)"></el-tree>
</div>
</div>
</div>
<!-- item.type == 5 单选类型 -->
<!-- <div class="radio-box" v-if="item.type == 5"> -->
<el-radio :disabled="isView" v-show="item.type == 5" v-for="(itm, idx) of item.dictList"
:key="idx" v-model="form[item.tableKey]" :label="itm.dictValue">{{ itm.dictLabel
}}</el-radio>
<!-- </div> -->
</el-form-item>
</div>
</el-form>
<div class="draw-btnbox" v-show="isView == false">
<el-button class="draw-btn" @click="handlerDrawSubmit('form')" type="primary">提交</el-button>
</div>
</div>
</el-drawer>
<!-- 删除draw -->
<el-dialog title="删除" :visible.sync="dedlete_show" width="50%">
<span>确定要删除该项么？</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dedlete_show = false">取 消</el-button>
<el-button type="primary" @click="handlerDrawDeleteConfirm">确 定</el-button>
</span>
</el-dialog>
<!-- 提醒链接跳转 -->
<el-dialog :visible.sync="link_show">
<el-table :data="link_list">
<el-table-column property="routerPath" align="center" label="菜单路径"></el-table-column>
<el-table-column property="noticeContent" align="center" label="上传规定期限" width="200"></el-table-column>
<el-table-column align="center" label="操作" width="200">
<template slot-scope="scope">
<div>
<el-button type="text" @click="handlerSkipLink(scope.row)">跳转</el-button>
</div>
</template>
</el-table-column>
</el-table>
<pagination :total="link_total" :page.sync="linkParams.current" :limit.sync="linkParams.size"
@pagination="handlerInitLinkList" />
</el-dialog>
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { getDicts } from "@/api/system/dict/data"
import { expandtableListAll, generalYearNumber, generalUploadPeriod, rootsGeneral, allMenuTreeList, addGeneralData, updateGeneralData, deleteGeneralData, viewGeneralInfo, scoreNoticeList, scoreNoticeOverdueUnapproved } from "@/api/grassrootsServices/cpcbuild/index"
import { roleMenuTreeselect } from "@/api/system/menu";
import fileUpload from "@/components/FileUpload"
import { Base64 } from 'js-base64';
export default {
data() {
return {
create_show: false, // 创建show
dedlete_show: false, // 删除show
form: {},
defaultProps: { // 树形组件 - 格式校验
children: "children",
label: "label"
},
menuOptions: [], // 暂用
template_fileUrl: null, // 暂用 传递文件url
total: 0,
queryParams: { // 初始列表传参
current: 1,
size: 10,
routerPath: null,//路由地址
serviceStationId: null//服务站ID
},
init_list: [],// 初始列表
routerPath: "", // 路由地址
expandTableList: [],//响应数据列表
dept_list: [],//部门树列表
template_file_list: [],
rules: {},
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
// updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/common/upload",
},
upload_accept_file: '.gif, .jpg, .jpeg, .png, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt , .pdf, .zip, .gz, .bz2, .mp4, .avi',
fileList: [],
data_range: {},
ids: null, // 删除 查看 编辑 通用id
isView: false,
draw_title: null, // draw 中的 title 区分新建 查看 编辑
year_number: null,
upload_period: null,
key: null,
link_show: false,
linkParams: {
current: 1,
size: 10
},
link_list: [], // 跳转列表
link_total: 0, // 跳转条数
upload_type: null // 是否存需要上传选项即将超时 0存在1不存在
};
},
mounted() {
// 获取当前路由
let rout = this.$route.path
// 获取路由最后一节
this.routerPath = rout.split('/')[rout.split('/').length - 1]
this.queryParams.routerPath = this.routerPath
this.handlerInitExpandtable()
this.handlerInitDepttreeList()
this.handlerInitRoleMenuTree()
this.handlerGenerYearNumber()
this.handlerGetYear()
this.handlerInitIsUpload()
},
watch: {
// 监听 查看 - 编辑 draw
create_show(newValue, oldValue) {
if (newValue == false) {
this.isView = false
// 新建 draw弹出层关闭的时候 清除新建里面的内容
this.form = {}
this.template_file_list = {}
this.$refs.form.resetFields();
}
},
upload: {
deep: true,
handler(newValue) {
if (!newValue.open) {
this.template_file_list = {}
}
}
}
},
computed: {
getDictLabel() {
return function (dictList, dictValue) {
if (dictList == undefined) {
return
} else {
let a = dictList.filter(item => {
return item.dictValue == dictValue
})
return a[0].dictLabel
}
}
},
},
methods: {
// 是否需要上传
handlerInitIsUpload() {
scoreNoticeOverdueUnapproved().then(res => {
this.upload_type = res.data
})
},
// 初始化本年上传次数 - 上传周期
handlerGenerYearNumber() {
generalUploadPeriod(this.routerPath).then(res => {
this.upload_period = res.data
})
},
handlerGetYear() {
generalYearNumber(this.routerPath, '').then(res => {
this.year_number = res.data
})
},
// 初始化获取checkout树形组件数据
handlerInitRoleMenuTree() {
this.$nextTick(() => {
roleMenuTreeselect(109).then(response => {
this.menuOptions = response.data.menus;
});
})
},
// 初始化查询响应数据
handlerInitExpandtable() {
expandtableListAll({ routerPath: this.routerPath }).then(res => {
// checkbox-初始化-过滤
const template_optionlist = res.data.filter(rs => {
return rs.type == 3 || rs.type == 5
})
// checkbox-初始化-赋值
template_optionlist.map(rs => {
getDicts(rs.selectDict).then(res => {
rs.dictList = res.data
})
})
this.expandTableList = res.data
// 初始化添加校验
this.expandTableList.forEach(rs => {
if (rs.ifRequired == 0) {
this.rules[rs.tableKey] = [{ required: true, message: rs.tableName + "不能为空", trigger: "blur" }]
}
})
this.initList()
})
},
// 初始化列表
initList() {
setTimeout(() => {
rootsGeneral(this.queryParams).then(res => {
this.init_list = res.data.records
this.total = res.data.total
})
}, 100);
},
// 初始化部门树
handlerInitDepttreeList() {
allMenuTreeList().then(res => {
this.dept_list = res.data
})
},
// 选择服务站
handlerSelectDept(e) {
this.queryParams.serviceStationId = e[e.length - 1]
},
// 新建按钮
handlerCreateNew() {
this.draw_title = '新建'
this.create_show = true
},
// 搜索按钮
handlerSearch() {
this.queryParams.current = 1;
this.initList()
this.handlerGenerYearNumber()
generalYearNumber(this.routerPath, this.queryParams.serviceStationId).then(res => {
this.year_number = res.data
})
this.$modal.msgSuccess('搜索成功')
},
// 搜索重置按钮
handlerResert() {
this.data_range = {}
this.queryParams = {
current: 1,
size: 10,
routerPath: this.routerPath,//路由地址
serviceStationId: null//服务站ID
}
// 重置完之后 重置按钮
this.initList()
this.handlerGetYear()
this.handlerGenerYearNumber()
this.$modal.msgSuccess('重置成功')
},
// 搜索初始化时间
handlerChangeTimes(item) {
if (item.ifHard == 0) {
this.queryParams.beginTime = this.data_range[item.tableKey][0]
this.queryParams.endTime = this.data_range[item.tableKey][1]
} else {
this.queryParams['begin' + item.tableKey] = this.data_range[item.tableKey][0]
this.queryParams['end' + item.tableKey] = this.data_range[item.tableKey][1]
}
},
// 查看详情
handlerViewDetail(item) {
this.$nextTick(() => {
this.draw_title = '查看'
this.isView = true
let params = {
id: item.id,
routerPath: this.routerPath
}
this.handlerInitDetail(params)
})
},
// 编辑
handlerEdit(item) {
this.draw_title = '编辑'
let params = {
id: item.id,
routerPath: this.routerPath
}
this.handlerInitDetail(params)
},
// 获取详情接口
handlerInitDetail(params) {
let _that = this
_that.form = {}
_that.handlerInitRoleMenuTree()
_that.$nextTick(() => {
viewGeneralInfo(params).then(res => {
_that.form = res.data
console.log('@@@@_that.form',_that.form);
if (res.data.routePathList) {
res.data.routePathList.forEach(rs => {
_that.$nextTick(() => {
_that.$refs.menu[0].setChecked(rs.menuId, true, false);
})
})
}
})
})
_that.create_show = true;
},
// 删除
handlerDetail(item) {
this.ids = item.id
this.dedlete_show = true;
},
// 删除确定
handlerDrawDeleteConfirm() {
deleteGeneralData(this.ids).then(res => {
if (res.code == 200) {
this.$modal.msgSuccess('删除成功')
this.initList()
this.dedlete_show = false;
}
})
},
// 文件查看按钮
handlerViewFile(e) {
// console.log('@@@e',e);
// return
let type = e.filename.split('.')[1]
if (type == 'png' || type == 'jpg') {
window.open(e.fileUrls)
} else {
window.open('http://10.60.128.195:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(e.fileUrls)));
}
},
// 点击checkoutbox 获取所选id
handlerGetCheckedKeys(e) {
let checkedKeys = this.$refs.menu[0].getCheckedKeys();
// // 半选中的菜单节点
let halfCheckedKeys = this.$refs.menu[0].getHalfCheckedKeys();
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
this.form[e] = checkedKeys
},
// 新建-编辑提交按钮
handlerDrawSubmit(form) {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.routerPath = this.routerPath
if (this.draw_title == '新建') {
addGeneralData(this.form).then(res => {
if (res.code == 200) {
this.$modal.msgSuccess('提交成功')
this.initList()
this.create_show = false
}
})
} else {
updateGeneralData(this.form).then(res => {
if (res.code == 200) {
this.$modal.msgSuccess('提交成功')
this.initList()
this.create_show = false
}
})
}
this.handlerGenerYearNumber()
this.handlerGetYear()
}else{
this.$modal.msgWarning('请完善表单信息')
return
}
});
},
/** 导入按钮操作 */
handlerSubmitFile(e) {
this.template_fileUrl = e.tableKey
},
// draw中文件table删除按钮
handlerDrawDelete(e) {
this.form[e.tableKey] = this.form[e.tableKey].filter(rs => {
return rs.fileUrls != e.fileUrls
})
this.key = Math.random()
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit()
},
input(e) {
e.map(rs => {
rs.tableKey = this.template_fileUrl
})
if(this.form[this.template_fileUrl]){
this.form[this.template_fileUrl] = [ ...this.form[this.template_fileUrl] , ...e ]
}else{
this.form[this.template_fileUrl] = [ ...e ]
}
this.key = Math.random()
},
// 初始化链接列表
handlerInitLinkList() {
scoreNoticeList(this.linkParams).then(res => {
if (res.code == 200) {
this.link_list = res.data.records
this.link_total = res.data.total
} else {
this.$modal.msgWarning(res.msg)
return
}
})
},
// 点击链接
handlerCkickLink() {
this.handlerInitLinkList()
this.link_show = true
},
// 点击跳转
handlerSkipLink(e) {
this.$router.push({ path: `/${e.mainRouter}` })
},
},
};
</script>
<style scoped lang="scss">
.contact {
padding: 1px 20px 20px;
box-sizing: border-box;
background-color: #f5f8fa;
min-height: calc(100vh - 85px);
.input-box {
display: flex;
margin-top: 20px;
flex-wrap: wrap;
.ipt-item {
display: flex;
margin: 0 0 16px 10px;
align-items: center;
.time-box {
width: 270px;
}
.ipt-select {
width: 150px;
}
}
.ipt-btn {
width: 108px;
}
}
.content-box {
width: 100%;
background-color: #fff;
padding: 20px;
box-sizing: border-box;
.content-top,
.content-text {
display: flex;
color: #20262e;
font-size: 14px;
.top-l {
margin-right: 21px;
}
.top-r {}
}
.content-text {
color: #409AFD;
margin-bottom: 0;
}
.content-table {
border: 1px solid #e9ebee;
}
.table-bottom-box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px 20px;
width: 100%;
.bottom-l {
color: #737d93;
font-size: 12px;
margin-top: 2.5%;
width: 50%;
}
.bottom-r {
width: 50%;
}
}
}
}
.draw-box {
.draw-top {
width: 100%;
height: 72px;
background-color: #f5f8fa;
padding: 26px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
.top-left {}
.top-right {
display: flex;
.btn {
// width: 88px;
height: 32px;
border-radius: 4px;
font-size: 14px;
padding: 8px 16px;
}
}
}
.draw-input-box {
padding: 26px 26px 0;
}
.draw-content {
padding: 0 26px;
box-sizing: border-box;
.file-box {
.file-ipt-box {
display: flex;
margin: 30px 0 10px;
justify-content: space-between;
align-items: center;
.file-left {
display: flex;
font-weight: bold;
font-size: 14px;
color: #606266;
.ipt-item {
margin-right: 16px;
}
}
}
.draw-tablebox {
border-bottom: none;
}
.draw-treebox {
display: flex;
justify-content: left;
// .treebox-l {
// width: 40%;
// margin: 0 20px;
// }
// .treebox-r {
// width: 40%;
// margin: 0 20px;
// }
}
}
}
}
.file-box {
.file-ipt-box {
display: flex;
margin: 10px 0;
justify-content: space-between;
align-items: center;
.file-left {
display: flex;
font-weight: bold;
font-size: 14px;
color: #606266;
.ipt-item {
margin-right: 16px;
}
}
}
.draw-tablebox {
border-bottom: none;
}
.draw-treebox {
display: flex;
justify-content: left;
margin-top: 40px;
.treebox-l {
width: 40%;
margin: 0 20px;
}
.treebox-r {
width: 40%;
margin: 0 20px;
}
}
}
.radio-box {
display: flex;
margin-top: 20px;
}
.draw-btnbox {
padding-left: 26px;
.draw-btn {
padding: 8px 30px;
}
}
.draw-title {
font-size: 20px;
font-weight: bold;
}
</style>
扫一扫
879
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
