Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 9a6034ef by peiqiQQQ
Options

收集资料 督查材料 架构督查

1 parent 6798a6f8
Expand all
Inline Side-by-side
Showing with 2021 additions and 3 deletions
src/api/architectureInspection.js 0 → 100644
/* guo
架构督查 api
*/
// 收集资料配置 查询
export const collectDataSearch = '/Collect/CollectInformation/'
// 弹框内表格查询 prjCode: 不传 查全部 选择传,拼接的id
export const collectDataConfiguration = '/Collect/information/'
// 督查材料收集 查询
export const supervisionData = '/Collect/supervisionData/'
// 架构督查分析 查询
export const architectureInspectionAnalysis = '/supervindex/selectSupervindex'
src/api/index.js
......@@ -752,3 +752,6 @@ export function addOrgInfo(params) {
export function updOrgInfo(params) {
return post(EADC_ARRCHITECTURE + '/org-info/upd', params)
}
export function postRequest(url, params){
return post(url, params)
}
\ No newline at end of file
src/main.js
......@@ -8,10 +8,12 @@ import 'element-ui/lib/theme-chalk/index.css'
import './styles/element-variables.scss'
import initDirective from './directive'
import { postRequest } from '@/api/index'
initDirective(Vue)
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
Vue.prototype.$postRequest = postRequest
Vue.use(ElementUI)
Date.prototype.format = function (fmt) {
......
src/router/index.js
......@@ -300,6 +300,22 @@ const routes = [
name: 'artPolicyExamine',
component: () => import('@/views/artPolicyExamine/index.vue'),
},
{
path:'/main/collectDataConfiguration',// 架构督查 - 收集资料配置
name:'collectDataConfiguration',
component:()=> import('@/views/collectDataConfiguration/index.vue'),
},
{
path:'/main/supervisionDatacollection', // 架构督查 - 督查资料收集
name:'supervisionDataCollection',
component:()=>import('@/views/supervisionDataCollection/index.vue')
},
{
path:'/main/architectureInspectionAnalysis',// 架构督查 - 架构督查分析
name:'architectureInspectionAnalysis',
component:()=> import('@/views/architectureInspectionAnalysis/index.vue'),
},
],
},
]
......
src/utils/architectureInspectionDis.js 0 → 100644
/*
架构督查 收集资料配置
*/
// 状态
export const stateCode = [
{ label: '未发布', value: 0 },
{ label: '已发布', value: 1 },
]
// 材料类型
export const materialTypeList = [
{ label: '项目可行性研究报告', id: '0'},
{ label: '技术规范书', id: '1'},
{ label: '项目启动文件', id: '2'},
{ label: '业务需求说明书', id: '3'},
{ label: '软件需求说明书', id: '4'},
{ label: '概要设计说明书', id: '5'},
{ label: '详细设计说明书', id: '6'},
{ label: '数据库设计说明书', id: '7'},
{ label: '实施方案', id: '8'},
{ label: '安全防护方案', id: '9'},
{ label: '系统部署方案', id: '10'},
{ label: '系统应急预案及快速恢复方案', id: '11'},
]
export const superStateCode = [
{ label: '未发布', value: 0 },
{ label: '已发布', value: 1 },
]
\ No newline at end of file
src/views/Main/menu.js
......@@ -194,15 +194,15 @@ export const menuOptions = [
children: [
{
name: '收集资料配置',
path: '',
path: '/main/collectDataConfiguration',
},
{
name: '督查材料收集',
path: '',
path: '/main/supervisionDataCollection',
},
{
name: '架构督查分析',
path: '',
path: '/main/architectureInspectionAnalysis',
},
{
name: '督查通报管理',
......
src/views/architectureInspectionAnalysis/index.vue 0 → 100644
<template>
<div class="searchTable">
<list-page>
<template #tabWrap>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane
:label="item.label"
:name="item.name"
v-for="item in tabOptions"
:key="item.name"
>
</el-tab-pane>
</el-tabs>
</template>
<!-- 查询表单插槽 -->
<template #formWrap>
<SearchForm @onSearch="querySearch" :form-options="formOptions" />
</template>
<!-- 中部操作按钮 -->
<template #operationWrap>
<el-button type="primary" icon="el-icon-document-add" size="medium" plain @click="fnAdd" >新建</el-button >
<el-button type="primary" icon="el-icon-download" size="medium" plain @click="exportFile">导出</el-button >
</template>
<!-- 表格插槽 -->
<template #tableWrap>
<table-config
ref="searchTable"
:query="query"
:columns="columns"
id-key="elementId"
>
</table-config>
</template>
</list-page>
</div>
</template>
<script>
import ListPage from '@/components/ListPage.vue'
import SearchForm from '@/components/SearchForm.vue'
import TableConfig from '@/views/collectDataConfiguration/TableConfig.vue'
import { architectureInspectionAnalysis } from '@/api/architectureInspection'
import { materialTypeList, superStateCode } from '@/utils/architectureInspectionDis'
export default {
name: 'architectureInspectionAnalysis',
components: { ListPage, SearchForm, TableConfig },
computed: {
formOptions() {
if (this.activeName === '1') {
return [
{
label: '督查方案名称', // label文字
prop: 'prjName', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
},
]
}else{
return [
{
label: '项目名称', // label文字
prop: 'prjName', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
},
]
}
},
columns() {
if(this.activeName === '1'){
return [
{ label: '序号', type: 'index', width: '80px' },
{ label: '督查方案名称', prop: 'supervName', },
{ label: '督查编码', prop: 'supervCode', },
{ label: '指标名称', prop: 'indexName', },
{ label: '指标级别', prop: 'indexLevel', },
{ label: '指标权重', prop: 'weight', },
{ label: '创建时间', prop: 'createTime', },
{ label: '状态', prop: 'state', },
{
label: '操作', type: 'operation', width: '200px',
actionButtons: [
{
title: '编辑',
type: 'primary',
size: 'mini',
plain: true,
icon: 'el-icon-edit',
},
{
title: '删除',
type: 'danger',
size: 'mini',
plain: true,
icon: 'el-icon-delete',
},
],
callback: (row, title) => {
this.fnOperation(row, title)
},
},
]
}else{
return [
{ label: '序号', type: 'index', width: '80px' },
{ label: '项目名称', prop: 'prjName', },
{ label: '承建单位', prop: 'createTime', },
{ label: '是否符合指示', prop: 'zhibiao', },
{ label: '是否符合模型', prop: 'moxing', },
{ label: '是否符合技术政策', prop: 'zhengce', },
{ label: '修改意见', prop: 'yiijian', },
{
label: '操作', type: 'operation', width: '200px',
actionButtons: [
{
title: '编辑',
type: 'primary',
size: 'mini',
plain: true,
icon: 'el-icon-edit',
},
{
title: '删除',
type: 'danger',
size: 'mini',
plain: true,
icon: 'el-icon-delete',
},
],
callback: (row, title) => {
this.fnOperation(row, title)
},
},
]
}
},
},
data(){
return {
query: {
url: architectureInspectionAnalysis,
method: 'post',
queryParam: {
prjName: ''
},
},
rowData: {},
activeName: '1',
tabOptions: [
{ label: '督查指标模型管理', name: '1' },
{ label: '架构督查管理', name: '2' },
],
}
},
methods: {
querySearch(data) {
this.query.queryParam = {
...this.query.queryParam,
...data,
}
this.$refs.searchTable.queryData()
},
/**
* @description: 操作按钮
* @param {Object} row 当前操作行数据
* @param {String} title 当前操作按钮名称
* @author: pan
*/
fnOperation(row, title) {
switch (title) {
case '上传':
this.fnEdit(row)
break
case '归档':
this.fnFile(row)
break
case '提醒':
this.fnRemind(row)
default:
break
}
},
fnRemind(row) {
this.$confirm('是否确认提醒?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
this.$postRequest('/Collect/tx', {id: row.id}).then(res => {
if (res.code === 200) {
this.$message.success('提醒成功')
this.$refs.searchTable.queryData()
} else {
this.$message.error(res.msg)
}
})
})
.catch(() => {})
},
fnFile(row) {
this.$confirm('是否确认归档?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
this.$postRequest('/Collect/gd', {...row}).then(res => {
if (res.code === 200) {
this.$message.success('归档成功')
this.$refs.searchTable.queryData()
} else {
this.$message.error(res.msg)
}
})
})
.catch(() => {})
},
fnEdit(row) {
this.rowData = row
// this.visible = true
},
handleClick(tab, event) {
console.log(tab, event)
this.querySearch()
},
exportFile(){
}
}
}
</script>
<style>
</style>
\ No newline at end of file
src/views/collectDataConfiguration/Add.vue 0 → 100644
<template>
<el-dialog
:title="title"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="80%"
@close="handleClose()"
@open="handleOpen"
>
<Form
ref="addForm"
:form-options="formOptions"
label-width="120px"
>
<!-- 收集材料类型自定义 -->
<template slot="materialType" slot-scope="{ data }">
<el-checkbox-group v-model="formInfo.materialType">
<el-checkbox v-for="item in materialTypeList" :key="item.label" :label="item.id">{{item.label}}</el-checkbox>
</el-checkbox-group>
</template>
<template slot="supervision" slot-scope="{ data }">
<el-button v-if="Object.keys(rowData).length != 0" class="addBtn" type="primary" size="mini" @click="addTabelList">添加</el-button >
<table-config
ref="searchTable"
@selection-change="selectionChange"
:query="query"
:columns="columns"
id-key="elementId"
>
</table-config>
</template>
</Form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSubmit" size="mini" >保 存</el-button >
<el-button @click="handleClose()" size="mini">取 消</el-button>
</span></el-dialog>
</template>
<script>
import Form from './Form.vue'
import TableConfig from '@/components/TableConfig.vue'
import AddTabelList from './AddTabelList.vue'
import { materialTypeList } from '@/utils/architectureInspectionDis'
import { collectDataConfiguration } from '@/api/architectureInspection'
export default {
components: { Form, TableConfig, AddTabelList },
props: {
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
rowData: {
type: Object,
default: () => {},
},
edit:{
type: Boolean,
default: false
}
},
data() {
return {
formInfo: {
materialType: [],
},
materialTypeList,
query: {
url: collectDataConfiguration,
method: 'post',
queryParam: {
prjCode: ''
},
},
selectId: '',
prjCodeDetail: '',
isDetail: true
}
},
watch: {
rowData: {
handler(v){
this.query.queryParam.prjCode = v.supervision ? v.supervision : ''
this.$nextTick(() => {
this.$refs.searchTable.queryData()
})
},
deep: true
},
},
computed: {
formOptions() {
return [
{
label: '督查方案名称', // label文字
prop: 'supervName', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
// rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
},
{
label: '收集材料类型', // label文字
prop: 'materialType', // 字段名
__slotName: 'materialType',
// rules: [{ required: true, trigger: 'change', message: '不能为空' }],
},
{
label: '开始时间', // label文字
prop: 'createTime', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: new Date().format('yyyy-MM-dd'), // 字段初始值
placeholder: '请选择', // elementui组件属性
},
{
label: '截止时间', // label文字
prop: 'endTime', // 字段名
type: 'date',
valueFormat: 'yyyy-MM-dd',
element: 'el-date-picker', // 指定elementui组件
initValue: new Date().format('yyyy-MM-dd'), // 字段初始值
placeholder: '请选择', // elementui组件属性
},
{
label: '督查清单', // label文字
prop: 'supervision', // 字段名
__slotName: 'supervision',
// rules: [{ required: true, trigger: 'change', message: '不能为空' }],
},
{
label: '备注', // label文字
prop: 'notes', // 字段名
type: 'textarea',
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
span: 24,
// rules: [{ required: true, trigger: 'blur', message: '不能为空' }],
},
]
},
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
isEdit() {
if (this.title === '修改批次计划') {
return true
} else {
return false
}
},
columns() {
let arr = [
{ label: '序号', type: 'index', prop: '序号', width: '80px' },
{ label: '单位', prop: 'manageDeptId', width: '150px' },
{ label: '项目名称', prop: 'prjName', },
{ label: '项目经理', prop: 'projectManager', width: '200px' },
{ label: '创建人', prop: 'createMan', width: '150px' },
]
if(Object.keys(this.rowData).length != 0){
arr = [
{ label: '序号', type: 'index', prop: '序号', width: '80px' },
{ label: '单位', prop: 'manageDeptId', width: '150px' },
{ label: '项目名称', prop: 'prjName', },
{ label: '项目经理', prop: 'projectManager', width: '200px' },
{ label: '创建人', prop: 'createMan', width: '150px' },
]
}else{
arr = [
{ type: 'selection', prop: 'selection', width: '55px' },
...arr
]
}
return [...arr]
},
},
mounted() {},
methods: {
handleSubmit() {
this.$refs['addForm'].onValidate(() => {
const loading = this.$loading({
lock: true,
text: '保存中',
spinner: 'el-icon-loading',
})
const formInfo = this.$refs['addForm'].getData()
let materialType = this.formInfo.materialType.filter(item => !!item).join(',')
let params = {
...formInfo,
materialType,
supervision: this.selectId
}
let url = !this.edit ? 'Collect/ad' : 'Collect/upd' // 编辑
this.$postRequest(url, params).then(res => {
if (res.code === 200) {
loading.close()
this.$message.success('保存成功')
this.showDialog = false
this.handleClose()
this.$emit('querySearch')
}
})
})
},
handleClose() {
this.showDialog = false
this.formOptions.forEach((v) => {
if (v.prop === 'createTime' || v.prop === 'endTime' ) {
v.initValue = new Date().format('yyyy-MM-dd')
}
})
this.$refs['addForm'].addInitValue()
this.$refs['addForm'].onReset()
},
handleOpen() {
if (Object.keys(this.rowData).length) {
this.formOptions.forEach((v) => {
v.initValue = this.rowData[v.prop]
if(v.label == "收集材料类型"){
let val = this.rowData["materialType"]
this.formInfo.materialType = val.split(',')
}
if(v.label == "督查清单"){
this.selectId = v.initValue
}
})
this.$nextTick(() => {
this.$refs['addForm'].addInitValue()
})
} else {
this.$nextTick(() => {
this.$refs['addForm'].onReset()
this.$refs['addForm'].addInitValue()
this.formInfo.materialType = []
})
}
},
addTabelList() {
this.$emit('addList')
},
selectionChange(data) {
this.selectRows = data
let idArr = []
data.forEach(item => {
idArr.push(item.prjCode)
})
this.selectId = idArr.join(',')
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/elementui.scss';
::v-deep .el-checkbox-group{
text-align: left;
}
.iconAdd{
color: #0d867f;
}
.addBtn{
float: left;
margin-bottom: 10px;
}
::v-deep .el-form{
.el-form-item:nth-last-child(2){
.el-form-item__content{
height: 32vh !important;
}
}
}
</style>
src/views/collectDataConfiguration/AddTabelList.vue 0 → 100644
<template>
<div :class="{'addTabelList': isDetail}">
<table-config
ref="searchTable"
@selection-change="selectionChange"
:query="query"
:columns="columns"
id-key="elementId"
>
</table-config>
</div>
</template>
<script>
import TableConfig from '@/components/TableConfig.vue'
import { collectDataConfiguration } from '@/api/architectureInspection'
export default {
components: { TableConfig },
props: {
prjCode: {
type: String,
default: '',
},
isEdit: {
type: Boolean,
default: false
},
isDetail: {
type: Boolean,
default: false
}
},
watch: {
prjCode: {
handler(v){
console.log(v, 'prjCode');
this.query.queryParam.prjCode = v
this.$refs.searchTable.queryData()
},
deep: true
},
isEdit: {
handler(v){
if(v){
this.columns = [
{ label: '序号', type: 'index', width: '80px' },
{ label: '单位', prop: 'manageDeptId', width: '150px' },
{ label: '项目名称', prop: 'prjName', },
{ label: '项目经理', prop: 'projectManager', width: '200px' },
{ label: '创建人', prop: 'createMan', width: '150px' },
]
}else{
this.columns = [
{ type: 'selection', width: '55px' },
{ label: '序号', type: 'index', width: '80px' },
{ label: '单位', prop: 'manageDeptId', width: '150px' },
{ label: '项目名称', prop: 'prjName', },
{ label: '项目经理', prop: 'projectManager', width: '200px' },
{ label: '创建人', prop: 'createMan', width: '150px' },
]
}
},
}
},
data(){
return {
query: {
url: collectDataConfiguration,
method: 'post',
queryParam: {
prjCode: this.prjCode
},
},
columns: [],
}
},
methods: {
// 表格勾选的数据
selectionChange(data) {
this.selectRows = data
this.$emit('selectRows', data)
},
search(){
this.$refs.searchTable.queryData()
}
}
}
</script>
<style lang="scss" scoped>
.addTabelList{
height: 38vh;
}
</style>
\ No newline at end of file
src/views/collectDataConfiguration/Detail.vue 0 → 100644
<template>
<el-dialog
:title="title"
:visible.sync="showDialog"
width="80%"
@close="handleClose()"
>
<table-config
ref="searchTable"
:query="query"
:columns="columns"
id-key="elementId"
@selection-change="selectionChange"
>
</table-config>
<span slot="footer" class="dialog-footer">
<el-button v-if="title == '督查清单'" type="primary" @click="handleSubmit" size="mini" >保 存</el-button >
<el-button @click="handleClose()" size="mini">取 消</el-button>
</span>
</el-dialog>
</template>
<script>
import { collectDataConfiguration } from '@/api/architectureInspection'
import TableConfig from './TableConfig.vue'
export default {
components: { TableConfig },
props: {
prjCodeDetail: {
type: String,
default: '',
},
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
},
watch: {
prjCodeDetail(v){
console.log(v);
this.query.queryParam.prjCode = v
this.search()
},
},
data(){
return {
query: {
url: collectDataConfiguration,
method: 'post',
queryParam: {
prjCode: ''
},
},
selectId: ''
}
},
computed: {
columns() {
let arr = [
{ label: '序号', type: 'index', prop: '序号',width: '80px' },
{ label: '单位', prop: 'manageDeptId', width: '150px' },
{ label: '项目名称', prop: 'prjName', },
{ label: '项目经理', prop: 'projectManager', width: '200px' },
{ label: '创建人', prop: 'createMan', width: '150px' },
]
if(this.title != '督查清单'){
arr = [
{ label: '序号', type: 'index',prop: '序号', width: '80px' },
{ label: '单位', prop: 'manageDeptId', width: '150px' },
{ label: '项目名称', prop: 'prjName', },
{ label: '项目经理', prop: 'projectManager', width: '200px' },
{ label: '创建人', prop: 'createMan', width: '150px' },
]
}else{
arr = [
{ type: 'selection',prop: 'selection', width: '55px' },
...arr,
]
}
return [...arr]
},
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
}
},
methods: {
handleClose() {
this.showDialog = false
},
async search(){
this.$nextTick(() => {
this.$refs.searchTable.queryData()
})
},
selectionChange(data) {
let idArr = []
data.forEach(item => {
idArr.push(item.prjCode)
})
this.selectId = idArr.join(',')
},
handleSubmit(){
this.$emit('selectTabel', this.selectId)
this.handleClose()
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body{
height: 36vh;
}
</style>
\ No newline at end of file
src/views/collectDataConfiguration/Form.vue 0 → 100644
<!--
* @Description: 表单组件
* @Version: 2.0
* @Autor: pan
* @Date: 2024-03-12 14:55:59
* @LastEditors: pan
* @LastEditTime: 2024-03-20 09:29:25
-->
<!-- /**
* 搜索栏公共组件
*/ -->
<template>
<div class="form-box">
<el-form
:model="formData"
ref="formRef"
:label-width="labelWidth"
:label-position="labelPosition"
>
<el-form-item v-for="(item, index) in formOptions"
:key="newKeys[index]" :prop="item.prop" :label="item.label" :rules="item.rules">
<!-- 自定义插槽，可用于特殊表单块 -->
<template v-if="item.__slotName">
<slot :name="item.__slotName" :data="item"></slot>
</template>
<SearchFormItem
v-else
v-model="formData[item.prop]"
:itemOptions="item"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
import SearchFormItem from '@/components/SearchFormItem.vue'
export default {
props: {
/**
* 表单配置
* 示例：
* [{
* label: '用户名', // label文字
* prop: 'username', // 字段名
* element: 'el-input', // 指定elementui组件
* initValue: '阿黄', // 字段初始值
* placeholder: '请输入用户名', // elementui组件属性
* rules: [{ required: true, message: '必填项', trigger: 'blur' }], // elementui组件属性
* events: { // elementui组件方法
* input (val) {
* console.log(val)
* },
* ...... // 可添加任意elementui组件支持的方法
* }
* ...... // 可添加任意elementui组件支持的属性
* }]
*/
formOptions: {
type: Array,
required: true,
default() {
return []
},
},
labelWidth: {
type: String,
default: '80px',
},
labelPosition: {
type: String,
default: 'right',
},
},
data() {
return {
formData: {},
}
},
computed: {
newKeys() {
return this.formOptions.map((v) => {
return this.createUniqueString()
})
},
},
created() {
this.addInitValue()
},
methods: {
createUniqueString() {
const timestamp = +new Date() + ''
const randomNum = parseInt((1 + Math.random()) * 65536) + ''
return (+(randomNum + timestamp)).toString(32)
},
// 校验
onValidate(callback) {
this.$refs.formRef.validate((valid) => {
if (valid) {
console.log(this.formData)
callback()
}
})
},
// 获取表单数据
getData() {
return this.formData
// this.onValidate(() => {
// this.$emit('getData', this.formData)
// })
},
// 导出
onExport() {
this.onValidate(() => {
this.$emit('onExport', this.formData)
})
},
onReset() {
this.$refs.formRef.resetFields()
},
// 添加初始值
addInitValue() {
const obj = {}
this.formOptions.forEach((v) => {
if (v.initValue !== undefined) {
obj[v.prop] = v.initValue
}
})
this.formData = obj
},
},
components: { SearchFormItem },
}
</script>
<style lang="scss" scoped>
.form-box {
margin-top: 10px;
.btn-box {
display: flex;
height: 38px;
}
.el-form {
// display: flex;
flex-wrap: wrap;
/deep/ .el-form-item__label {
flex-shrink: 0;
color: #000;
}
// el-input宽度
/deep/ .form-item {
text-align: left;
.el-input,
.el-select {
width: 30% !important;
}
}
}
}
</style>
src/views/collectDataConfiguration/TableConfig.vue 0 → 100644
<!--
* @Description: elementui表格组件二次封装
* @Version: 2.0
* @Autor: pan
* @Date: 2024-03-11 14:53:40
* @LastEditors: pan
* @LastEditTime: 2024-03-22 17:17:18
-->
<!-- 示例
columns: [{ label: '头像', prop: 'avatar', align: 'center', __slotName: 'avatar',callback: (row, title) => {
// console.log(row)
if (title) {
switch (title) {
case "查看":
return this.dialogShow(row);
}
}
},
}]
使用TableConfig组件
<table-config @fetchData="fetchData" :query="query" :columns="columns">
<template slot="icon" v-slot="scope">
<img slot="icon" width="40" :src="scope.data.row.avatar" />
</template>
</table-config> -->
<template>
<div class="tableConfig">
<el-table
ref="tableConfig"
class="config-table"
v-loading="loading"
v-bind="$attrs"
v-on="listeners"
:data="tableData"
:row-key="idKey"
stripe
border
height="100%"
>
<!-- <el-table-column
v-if="isCheck"
align="center"
width="70"
type="selection"
:reserve-selection="isCheckMemory"
>
</el-table-column> -->
<template v-for="item in columns">
<!-- v-html存在安全问题暂时弃用 -->
<!-- 如果接口返回的内容需要我们解析出来并渲染到页面中 比如：0 代表 已停用 1 代表 已发布 2 代表 暂存 -->
<!-- <el-table-column
v-if="item.type === 'function'"
v-bind="item"
:key="item.prop"
align="center"
>
<template slot-scope="scope">
<span v-html="item.callback && item.callback(scope.row)"></span>
</template>
</el-table-column> -->
<!-- 操作列 -->
<el-table-column
v-if="item.type === 'operation'"
:key="item.prop"
v-bind="item"
align="center"
>
<template #default="scope">
<el-button
class="btn"
v-for="items in item.actionButtons"
:key="items.title"
v-bind="items"
:disabled="
items.disabledCallback
? items.disabledCallback(scope.row, items.title)
: false
"
@click="item.callback(scope.row, items.title)"
><span v-if="!items.circle">{{ items.title }}</span></el-button
>
</template>
</el-table-column>
<!-- 普通渲染 -->
<el-table-column
v-else
:key="item.prop"
v-bind="item"
show-overflow-tooltip
align="center"
>
<!-- 自定义插槽 -->
<template v-if="item.__slotName" #default="scope">
<slot :name="item.__slotName" :data="scope"></slot>
</template>
<!-- 字典值匹配 如后端给state: 0 页面要渲染成已停用-->
<template v-else-if="item.collectionType" #default="scope">
<span> {{ handleToText(item, scope.row[item.prop]) }}</span>
</template>
</el-table-column>
</template>
</el-table>
<div class="config-pagenation">
<el-pagination
class="pagination"
background
v-if="hasPagination"
@size-change="sizeChange"
@current-change="currentChange"
:total="pagination.totalRow"
:current-page="pagination.current"
:page-size="pagination.pageSize"
:page-sizes="pageSizes"
:layout="layout"
>
</el-pagination>
</div>
</div>
</template>
<script>
import { get, post } from '@/utils/http'
export default {
name: 'tableConfig',
props: {
// columns: [{ label: '头像', prop: 'avatar', align: 'center', __slotName: 'avatar' }]
// 配置项
columns: {
type: Array,
default: () => [],
},
/**
* 分页需要传入后台的字段
*/
pageParam: {
type: Object,
default() {
return {
pageOffset: 'current',
pageSize: 'pageSize',
}
},
},
// 接口参数
query: {
type: Object,
default() {
return {
url: '',
method: '',
queryParam: {},
}
},
},
/**
* 是否需要跨页勾选
*/
// isCheckMemory: {
// type: Boolean,
// default: false,
// },
// /**
// * 表格行数据的唯一键
// */
idKey: {
type: String,
default: 'id',
},
// 是否显示分页组件
hasPagination: {
type: Boolean,
default: true,
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper',
},
pageSizes: {
type: Array,
default() {
return [10, 20, 50, 100, 200]
},
},
},
data() {
return {
tableData: [],
pagination: {
current: 1,
pageSize: 10,
totalRow: 0,
},
loading: false,
}
},
computed: {
listeners: function () {
var vm = this
return Object.assign({}, this.$listeners, {
'selection-change': function (val) {
// dosomething
vm.selectData = val
vm.$emit('selection-change', val)
},
})
},
},
created() {
this.queryData()
},
methods: {
clearSelection() {
this.$refs.tableConfig.clearSelection()
},
handleToText(item, state='') {
if(!state) return
if(state.indexOf(',') > -1){
let stateVal = state.split(',')
let labelValue = ''
stateVal.forEach(valItem => {
const arr = item.options.find((v) => v.id == valItem) || {}
labelValue += `,${arr.label}`
});
return labelValue.slice(1, labelValue.length)
}{
let val = state
if (!val) {
val = item.emptyToNum || 0
}
const obj = item.options.find((v) => v.value ? v.value : v.id == val) || {}
return obj['label']
}
},
/**
* 切换分页数量
* @param { Number } pageSize 页数
*/
sizeChange(pageSize) {
this.pagination.current = 1
this.pagination.pageSize = pageSize
this.queryData()
},
/**
* 切换页码
* @param { Number } current 页码
*/
currentChange(current) {
this.pagination.current = current
this.queryData(true)
},
async queryData(isReset) {
if (this.query && this.query.url) {
this.tableData = []
this.loading = true
this.pagination.current = isReset ? this.pagination.current : 1
let param = Object.assign({}, this.query.queryParam, {
[this.pageParam.pageOffset]: this.pagination.current,
[this.pageParam.pageSize]: this.pagination.pageSize,
})
// if (this.order.sortName && this.order.sortOrder) {
// param.sortName = this.order.sortName
// param.sortOrder = this.order.sortOrder
// }
let result = null
try {
switch (this.query.method) {
case 'get':
result = await get(this.query.url, param)
break
case 'post':
result = await post(this.query.url, param)
break
default:
result = await get(this.query.url, param)
break
}
} catch (e) {
console.warn(e)
} finally {
this.loading = false
// console.log('result', result)
const { data } = result
if (result && result.code === 200) {
this.pagination.totalRow = data.total
this.tableData = data.records
this.$emit('fetchData', data)
} else {
this.$message({
type: 'warning',
message: result ? result.msg : '查询失败!',
})
this.tableData = []
this.pagination.current = 1
this.pagination.totalRow = 0
}
}
}
},
},
}
</script>
<style lang="scss" scoped>
.tableConfig {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.config-table {
flex: 1;
}
.config-pagenation {
margin-top: 20px;
margin-bottom: 30px;
}
}
</style>
src/views/collectDataConfiguration/editSearchTabel.vue 0 → 100644
<template>
<!-- 新增 -->
<el-dialog
:title="title"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="80%"
@close="handleClose()"
>
<AddTabelList @selectRows='selectRows' />
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSubmit" size="mini" >保 存</el-button >
<el-button @click="handleClose()" size="mini">取 消</el-button>
</span></el-dialog>
</template>
<script>
import AddTabelList from './AddTabelList.vue'
export default {
components: { AddTabelList },
props: {
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
},
computed: {
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
selectRows() {
return (rows) => {
let idArr = []
rows.forEach(item => {
idArr.push(item.prjCode)
})
this.selectId = idArr.join(',')
}
}
},
data(){
return {
selectId: '',
}
},
methods: {
handleClose() {
this.showDialog = false
},
// selectRows(v){
// console.log(v);
// },
handleSubmit() {
const loading = this.$loading({
lock: true,
text: '保存中',
spinner: 'el-icon-loading',
})
// const formInfo = this.$refs['addForm'].getData()
// const typeApi = this.isEdit ? editBatchPlan : addBatchPlan
// const params = {
// ...this.rowData,
// ...formInfo,
// state: 1,
// }
// typeApi(params).then((res) => {
// if (res.code === 200) {
// loading.close()
// this.$message.success('保存成功')
// this.showDialog = false
// this.handleClose()
// this.$emit('querySearch')
// }
// })
},
}
}
</script>
<style>
</style>
\ No newline at end of file
src/views/collectDataConfiguration/index.vue 0 → 100644
<template>
<div class="searchTable">
<list-page>
<!-- 查询表单插槽 -->
<template #formWrap>
<SearchForm @onSearch="querySearch" :form-options="formOptions" />
</template>
<!-- 中部操作按钮 -->
<template #operationWrap>
<el-button type="primary" icon="el-icon-document-add" size="medium" plain @click="fnAdd">新建</el-button >
</template>
<!-- 表格插槽 -->
<template #tableWrap>
<table-config
ref="searchTable"
:query="query"
:columns="columns"
id-key="elementId"
>
<template #supervision="{ data }">
<el-button v-if="data.row.supervision" class="detailBtn" size="medium" @click="detailBtn( data.row)">{{data.row.supervision}}</el-button >
<span v-else>{{data.row.supervision}}</span>
<!-- <el-button class="detailBtn" size="medium" @click="fnAdd('detail')">{{JSON.stringify(data)}}</el-button > -->
</template>
</table-config>
</template>
</list-page>
<!-- 新增弹窗 -->
<Add
@querySearch="querySearch"
:visible.sync="visible"
:row-data="rowData"
:title="dialogTitle"
@addList='addList'
:edit='isEdit'
></Add>
<!-- 详情 -->
<Detail ref="Detail" :prjCodeDetail='detailPrjCode' :visible.sync="visibleDetail" @selectTabel='selectTabel' :title="detailTitle"/>
</div>
</template>
<script>
import AddTabelList from './AddTabelList.vue'
import ListPage from '@/components/ListPage.vue'
import SearchForm from '@/components/SearchForm.vue'
import TableConfig from './TableConfig.vue'
import { collectDataSearch } from '@/api/architectureInspection'
import Add from './Add.vue'
import Detail from './Detail.vue'
import { materialTypeList, stateCode } from '@/utils/architectureInspectionDis'
export default {
name: 'collectDataConfiguration',
components: { ListPage, SearchForm, TableConfig, Add, AddTabelList, Detail },
computed: {
formOptions() {
return [
{
label: '督查方案名称', // label文字
prop: 'prjCode', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
},
]
},
columns() {
return [
{ label: '序号', type: 'index', width: '80px' },
{ label: '督查方案名称', prop: 'supervName', },
{ label: '创建时间', prop: 'createTime', width: '120px' },
{ label: '材料类型', prop: 'materialType',
collectionType: 'materialTypeList',
options: materialTypeList
},
{ label: '截止时间', prop: 'endTime', width: '120px' },
{ label: '督查清单', prop: 'supervision', __slotName: 'supervision', },
{
label: '状态',
prop: 'state',
width: '120px',
collectionType: 'stateCode',
options: stateCode,
},
{ label: '备注', prop: 'notes', width: '100px' },
{
label: '操作',
type: 'operation',
width: '360px',
actionButtons: [
{
title: '编辑',
type: 'primary',
size: 'mini',
plain: true,
icon: 'el-icon-edit',
},
{
title: '删除',
type: 'danger',
size: 'mini',
plain: true,
icon: 'el-icon-delete',
},
{
title: '发布',
size: 'mini',
icon: 'el-icon-circle-check',
type: 'primary',
plain: true,
},
],
callback: (row, title) => {
this.fnOperation(row, title)
},
},
]
},
},
data(){
return {
query: {
url: collectDataSearch,
method: 'post',
queryParam: {
supervName: ''
},
},
visible: false,
rowData: {},
dialogTitle: '',
approvalVisible: false,
selectRows: [],
selectId: '',
prjCode: '',
detailTitle: '详情',
visibleDetail: false,
detailPrjCode: '',
isEdit: false
}
},
methods: {
querySearch(data) {
this.query.queryParam = {
...this.query.queryParam,
...data,
}
this.$refs.searchTable.queryData()
},
fnAdd() {
this.visible = true
this.rowData = {}
this.dialogTitle = '收集资料配置'
this.isEdit = false
},
/**
* @description: 操作按钮
* @param {Object} row 当前操作行数据
* @param {String} title 当前操作按钮名称
* @author: pan
*/
fnOperation(row, title) {
console.log('1111');
switch (title) {
case '编辑':
this.fnEdit(row)
break
case '删除':
this.fnDel(row)
break
case '发布':
this.fnSubmit(row)
default:
break
}
},
fnSubmit(row) {
this.$confirm('是否确认发布?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
const params = {
...row,
state: 2,
}
this.$postRequest('/Collect/fb', {...row}).then(res => {
if (res.code === 200) {
this.$message.success('发布成功')
this.$refs.searchTable.queryData()
} else {
this.$message.error(res.msg)
}
})
})
.catch(() => {})
},
fnDel(row) {
this.$confirm('是否确认删除?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
const params = {
...row,
delFlag: 1,
}
this.$postRequest('/Collect/del', {supervId: row.supervId}).then(res => {
if (res.code === 200) {
this.$message.success('删除成功')
this.$refs.searchTable.queryData()
} else {
this.$message.error('删除失败')
}
})
})
.catch(() => {})
},
fnEdit(row) {
this.dialogTitle = '收集资料配置'
this.rowData = row
this.visible = true
this.isEdit = true
},
addList(){
this.detailTitle = '督查清单'
this.detailPrjCode = ''
this.visibleDetail = true
},
// 督查清单 详情
detailBtn(v){
console.log(v);
this.detailTitle = '详情'
this.detailPrjCode = v.supervision
this.visibleDetail = true
},
selectTabel(v){
let id = this.rowData.supervision
this.rowData.supervision = !v ? v +','+id : id
}
}
}
</script>
<style lang="scss" scoped>
.detailBtn{
border: none;
background: none;
color: #0d867f;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
\ No newline at end of file
src/views/supervisionDataCollection/UploadDialog.vue 0 → 100644
<!--
* @Description: 需求提报-保存state 2 提交approveState 2
* @Version: 2.0
* @Autor: pan
* @Date: 2024-03-20 17:53:35
* @LastEditors: pan
* @LastEditTime: 2024-03-21 16:03:23
-->
<template>
<div>
<el-dialog
:title="title"
:visible.sync="showDialog"
:close-on-click-modal="false"
width="60%"
@close="handleClose()"
@open="fnQueryPrjNeedFile()"
>
<div>
<div style="text-align: left; margin-left: 10px">资料清单:</div>
<el-table :data="tableData" stripe border>
<el-table-column
type="index"
label="序号"
width="80"
align="center"
></el-table-column>
<el-table-column
prop="busiFileName"
label="资料类型"
align="center"
></el-table-column>
<el-table-column label="资料名称" align="center">
<template slot-scope="scope">
<el-upload
class="upload-demo"
action="/api/file/oss/upload"
ref="upload"
:on-remove="
(file, fileList) => handleRemove(file, fileList, scope.row)
"
:on-success="
(res, file, fileList) =>
handleFileUploadSuccess(res, file, fileList, scope.row)
"
:limit="1"
:file-list="scope.row.fileUrl ? [scope.row] : []"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
</el-table-column>
</el-table>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose()" size="mini">取 消</el-button>
<el-button @click="fnOperation('save')" size="mini">保 存</el-button>
<el-button type="primary" @click="fnOperation('submit')" size="mini"
>提 交</el-button
>
</span></el-dialog
>
</div>
</template>
<script>
import { editNeedInfo, queryPrjNeedFile } from '@/api'
export default {
props: {
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
rowData: {
type: Object,
default: () => {},
},
},
data() {
return {
tableData: [],
}
},
components: {},
computed: {
showDialog: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
},
},
},
mounted() {},
methods: {
fnOperation(type) {
const loading = this.$loading({
lock: true,
text: '保存中',
spinner: 'el-icon-loading',
})
let params = {
approveState: this.rowData.approveState,
needId: this.rowData.needId,
state: this.rowData.state,
}
if (type === 'save') {
params = {
...params,
state: 2,
}
} else {
params = {
...params,
approveState: 2,
}
}
editNeedInfo(params).then((res) => {
loading.close()
if (res.code === 200) {
this.$message.success('保存成功')
this.showDialog = false
this.handleClose()
this.$emit('querySearch')
} else {
this.$message.error(res.msg)
}
})
},
handleClose() {
this.showDialog = false
},
// 文件上传逻辑
handleRemove(file, fileList, row) {
//文件移出
row = []
},
handleFileUploadSuccess(res, file, fileList, row) {
//文件上传
row = {
fileName: file.name,
fileId: file.response.data.fileId,
fileUrl: file.response.data.viewUrl,
}
console.log('file', row)
},
fnQueryPrjNeedFile() {
console.log('this.rowData', this.rowData)
let busiFileNameList = this.rowData.fileList?.split(',')
const params = {
busiFileNameList,
busiId: this.rowData.prjId,
busiIdType: 1,
}
queryPrjNeedFile(params).then((res) => {
if (res.code === 200) {
this.tableData = res.data.map((v) => {
return {
...v,
name: v.fileName,
url: v.fileUrl,
}
})
}
})
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/elementui.scss';
</style>
src/views/supervisionDataCollection/index.vue 0 → 100644
<template>
<div class="searchTable">
<list-page>
<!-- 查询表单插槽 -->
<template #formWrap>
<SearchForm @onSearch="querySearch" :form-options="formOptions" />
</template>
<!-- 表格插槽 -->
<template #tableWrap>
<table-config
ref="searchTable"
:query="query"
:columns="columns"
id-key="elementId"
>
</table-config>
</template>
</list-page>
<UploadDialog
:row-data="rowData"
@querySearch="querySearch"
title="上传"
:visible.sync="demandSubVisible"
/>
</div>
</template>
<script>
import ListPage from '@/components/ListPage.vue'
import SearchForm from '@/components/SearchForm.vue'
import TableConfig from '@/views/collectDataConfiguration/TableConfig.vue'
import { supervisionData } from '@/api/architectureInspection'
import { materialTypeList, superStateCode } from '@/utils/architectureInspectionDis'
import UploadDialog from './UploadDialog'
export default {
name: 'supervisionDataCollection',
components: { ListPage, SearchForm, TableConfig, UploadDialog },
computed: {
formOptions() {
return [
{
label: '项目名称', // label文字
prop: 'prjName', // 字段名
element: 'el-input', // 指定elementui组件
placeholder: '请输入内容', // elementui组件属性
},
]
},
columns() {
return [
{ type: 'selection', width: '55px' },
{ label: '序号', type: 'index', width: '80px' },
{ label: '项目名称', prop: 'prjName', },
{ label: '承建单位', prop: 'buildOrg', width: '120px' },
{ label: '督查方案', prop: 'supervName', width: '120px' },
{ label: '材料类型', prop: 'materialType',
collectionType: 'materialTypeList',
options: materialTypeList
},
{ label: '上传时间', prop: 'uploadedTime', width: '120px' },
{ label: '版本', prop: 'version', width: '120px' },
// {
// label: '状态',
// prop: 'state',
// width: '120px',
// collectionType: 'superStateCode',
// options: superStateCode,
// },
{ label: '备注', prop: 'notes', width: '100px' },
{
label: '操作',
type: 'operation',
width: '360px',
actionButtons: [
{
title: '上传',
type: 'primary',
size: 'mini',
plain: true,
icon: 'el-icon-edit',
},
{
title: '归档',
type: 'warning',
size: 'mini',
plain: true,
icon: 'el-icon-circle-check',
},
{
title: '提醒',
size: 'mini',
icon: 'el-icon-circle-check',
type: 'warning',
plain: true,
},
],
callback: (row, title) => {
this.fnOperation(row, title)
},
},
]
},
},
data(){
return {
query: {
url: supervisionData,
method: 'post',
queryParam: {
prjName: ''
},
},
rowData: {},
demandSubVisible: false,
}
},
methods: {
querySearch(data) {
this.query.queryParam = {
...this.query.queryParam,
...data,
}
this.$refs.searchTable.queryData()
},
/**
* @description: 操作按钮
* @param {Object} row 当前操作行数据
* @param {String} title 当前操作按钮名称
* @author: pan
*/
fnOperation(row, title) {
switch (title) {
case '上传':
this.fnEdit(row)
break
case '归档':
this.fnFile(row)
break
case '提醒':
this.fnRemind(row)
default:
break
}
},
fnRemind(row) {
this.$confirm('是否确认提醒?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
this.$postRequest('/Collect/tx', {id: row.id}).then(res => {
if (res.code === 200) {
this.$message.success('提醒成功')
this.$refs.searchTable.queryData()
} else {
this.$message.error(res.msg)
}
})
})
.catch(() => {})
},
fnFile(row) {
this.$confirm('是否确认归档?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
this.$postRequest('/Collect/gd', {...row}).then(res => {
if (res.code === 200) {
this.$message.success('归档成功')
this.$refs.searchTable.queryData()
} else {
this.$message.error(res.msg)
}
})
})
.catch(() => {})
},
fnEdit(row) {
// this.dialogTitle = '收集资料配置'
this.rowData = row
this.demandSubVisible = true
// this.visible = true
},
}
}
</script>
<style>
</style>
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!