数据分类管理
This commit is contained in:
parent
83f84b8888
commit
848a172fbe
|
|
@ -37,6 +37,7 @@
|
||||||
"js-beautify": "1.13.0",
|
"js-beautify": "1.13.0",
|
||||||
"js-cookie": "3.0.1",
|
"js-cookie": "3.0.1",
|
||||||
"jsencrypt": "3.0.0-rc.1",
|
"jsencrypt": "3.0.0-rc.1",
|
||||||
|
"lodash": "^4.17.21",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"quill": "2.0.2",
|
"quill": "2.0.2",
|
||||||
"screenfull": "5.0.2",
|
"screenfull": "5.0.2",
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import request from '@/utils/request'
|
||||||
// 新增数据类型
|
// 新增数据类型
|
||||||
export function addDataClassAPI(data) {
|
export function addDataClassAPI(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/smartArchives/***',
|
url: '/smartArchives/data/classify/addKyDataClassify',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data: data,
|
data: data,
|
||||||
})
|
})
|
||||||
|
|
@ -12,7 +12,7 @@ export function addDataClassAPI(data) {
|
||||||
// 修改数据类型
|
// 修改数据类型
|
||||||
export function updateDataClassAPI(data) {
|
export function updateDataClassAPI(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/smartArchives/***',
|
url: '/smartArchives/data/classify/updateKyDataClassify',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data: data,
|
data: data,
|
||||||
})
|
})
|
||||||
|
|
@ -21,8 +21,8 @@ export function updateDataClassAPI(data) {
|
||||||
// 删除数据类型
|
// 删除数据类型
|
||||||
export function deleteDataClassAPI(data) {
|
export function deleteDataClassAPI(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/smartArchives/***',
|
url: '/smartArchives/data/classify/delKyDataClassify',
|
||||||
method: 'DELETE',
|
method: 'POST',
|
||||||
data: data,
|
data: data,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -30,7 +30,7 @@ export function deleteDataClassAPI(data) {
|
||||||
// 查询数据类型列表
|
// 查询数据类型列表
|
||||||
export function getListDataClassAPI(data) {
|
export function getListDataClassAPI(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/smartArchives/***',
|
url: '/smartArchives/data/classify/list',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params: data,
|
params: data,
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
<template>
|
||||||
|
<!-- 弹框组件 -->
|
||||||
|
<div>
|
||||||
|
<el-dialog
|
||||||
|
append-to-body
|
||||||
|
:title="dialogConfig.outerTitle"
|
||||||
|
v-if="dialogConfig.outerVisible"
|
||||||
|
:width="dialogConfig.outerWidth"
|
||||||
|
:before-close="handleCloseOuter"
|
||||||
|
:visible.sync="dialogConfig.outerVisible"
|
||||||
|
:style="{
|
||||||
|
'--el-dialog-min-height': dialogConfig.minHeight,
|
||||||
|
'--el-dialog-max-height': dialogConfig.maxHeight,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- 外层弹框内容 -->
|
||||||
|
<slot name="outerContent"> </slot>
|
||||||
|
|
||||||
|
<!-- 内层对话框 -->
|
||||||
|
<el-dialog
|
||||||
|
append-to-body
|
||||||
|
:title="dialogConfig.innerTitle"
|
||||||
|
:width="dialogConfig.innerWidth"
|
||||||
|
v-if="dialogConfig.innerVisible"
|
||||||
|
:before-close="handleCloseInner"
|
||||||
|
:visible.sync="dialogConfig.innerVisible"
|
||||||
|
:style="{
|
||||||
|
'--el-dialog-min-height': dialogConfig.innerMinHeight,
|
||||||
|
'--el-dialog-max-height': dialogConfig.innerMaxHeight,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- 内层弹框内容 -->
|
||||||
|
<slot name="innerContent"></slot>
|
||||||
|
</el-dialog>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
/* 配置项 */
|
||||||
|
dialogConfig: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/* 右上角关闭外层 */
|
||||||
|
handleCloseOuter() {
|
||||||
|
/* 通知父组件更改弹框显示值 */
|
||||||
|
this.$emit('closeDialogOuter', false)
|
||||||
|
},
|
||||||
|
/* 右上角关闭内层 */
|
||||||
|
handleCloseInner() {
|
||||||
|
/* 通知父组件更改弹框显示值 */
|
||||||
|
this.$emit('closeDialogInner', false)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
::v-deep .el-dialog {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
position: absolute !important;
|
||||||
|
top: 50% !important;
|
||||||
|
left: 50% !important;
|
||||||
|
transform: translate(-50%, -50%) !important;
|
||||||
|
height: var(--el-dialog-max-height) !important;
|
||||||
|
min-height: var(--el-dialog-min-height) !important;
|
||||||
|
max-height: var(--el-dialog-max-height) !important;
|
||||||
|
.el-dialog__body {
|
||||||
|
flex: 1 !important;
|
||||||
|
overflow-y: scroll !important;
|
||||||
|
padding: 20px 20px !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,601 @@
|
||||||
|
<template>
|
||||||
|
<!-- 表格公共组件 -->
|
||||||
|
<div>
|
||||||
|
<!-- 表单搜索 -->
|
||||||
|
<el-form
|
||||||
|
:inline="true"
|
||||||
|
size="small"
|
||||||
|
ref="queryFormRef"
|
||||||
|
:rules="formRules"
|
||||||
|
v-show="showSearch"
|
||||||
|
:model="queryParams"
|
||||||
|
label-width="auto"
|
||||||
|
>
|
||||||
|
<el-form-item
|
||||||
|
:key="v"
|
||||||
|
:prop="item.f_model"
|
||||||
|
v-for="(item, v) in formLabel"
|
||||||
|
:label="item.isShow ? item.f_label : ''"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
clearable
|
||||||
|
:maxlength="item.f_max || 50"
|
||||||
|
v-if="item.f_type === 'ipt'"
|
||||||
|
v-model.trim="queryParams[item.f_model]"
|
||||||
|
:placeholder="`请输入${item.f_label}`"
|
||||||
|
:style="{ width: item.f_width || '180px' }"
|
||||||
|
/>
|
||||||
|
<el-select
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
v-if="item.f_type === 'sel'"
|
||||||
|
v-model="queryParams[item.f_model]"
|
||||||
|
:placeholder="`请选择${item.f_label}`"
|
||||||
|
:style="{ width: item.f_width || '180px' }"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
:key="v"
|
||||||
|
:label="sel.label"
|
||||||
|
:value="sel.value"
|
||||||
|
v-for="(sel, v) in item.f_selList"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
<el-cascader
|
||||||
|
clearable
|
||||||
|
style="width: 180px"
|
||||||
|
:show-all-levels="false"
|
||||||
|
:props="item.optionProps"
|
||||||
|
:options="item.f_selList"
|
||||||
|
v-if="item.f_type === 'selCasAdd'"
|
||||||
|
v-model="queryParams[item.f_model]"
|
||||||
|
@change="
|
||||||
|
handleCasAdd(
|
||||||
|
$event,
|
||||||
|
item.f_model,
|
||||||
|
cascadeFunc,
|
||||||
|
extraTableProp,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<el-cascader
|
||||||
|
style="width: 180px"
|
||||||
|
:show-all-levels="false"
|
||||||
|
:options="item.f_selList"
|
||||||
|
:props="item.optionProps"
|
||||||
|
v-if="item.f_type === 'selCas'"
|
||||||
|
v-model="queryParams[item.f_model]"
|
||||||
|
@change="handleCas($event, item.f_model)"
|
||||||
|
/>
|
||||||
|
<el-date-picker
|
||||||
|
type="date"
|
||||||
|
style="width: 240px"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
v-if="item.f_type === 'date'"
|
||||||
|
v-model="queryParams[item.f_model]"
|
||||||
|
:placeholder="`请选择${item.f_label}`"
|
||||||
|
/>
|
||||||
|
<el-date-picker
|
||||||
|
type="daterange"
|
||||||
|
style="width: 240px"
|
||||||
|
range-separator="至"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
v-if="item.f_type === 'dateRange'"
|
||||||
|
v-model="queryParams[item.f_model]"
|
||||||
|
@change="onChangeTime($event, item.dateType)"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
|
/>
|
||||||
|
<el-input-number
|
||||||
|
:min="0"
|
||||||
|
style="width: 240px"
|
||||||
|
v-if="item.f_type === 'num'"
|
||||||
|
v-model="queryParams[item.f_model]"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="showBtnCrews">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-search"
|
||||||
|
@click="handleQuery"
|
||||||
|
>
|
||||||
|
查询
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
size="mini"
|
||||||
|
type="warning"
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
@click="resetQuery"
|
||||||
|
>
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<slot name="btn" :queryParams="queryParams"></slot>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<!-- 按钮集群 -->
|
||||||
|
<el-row class="btn-container">
|
||||||
|
<ToolbarModel
|
||||||
|
v-if="showRightTools"
|
||||||
|
:columns="columnCheckList"
|
||||||
|
@queryTable="getTableList"
|
||||||
|
:showSearch.sync="showSearch"
|
||||||
|
:handleShow.sync="handleShow"
|
||||||
|
:indexNumShow.sync="indexNumShow"
|
||||||
|
:selectionShow.sync="selectionShow"
|
||||||
|
:isSelectShow="isSelectShow"
|
||||||
|
:showOperation="showOperation"
|
||||||
|
/>
|
||||||
|
</el-row>
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table
|
||||||
|
border
|
||||||
|
ref="tableRef"
|
||||||
|
:data="tableList"
|
||||||
|
style="width: 100%"
|
||||||
|
v-loading="loading"
|
||||||
|
select-on-indeterminate
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
width="45"
|
||||||
|
align="center"
|
||||||
|
type="selection"
|
||||||
|
:selectable="selectable"
|
||||||
|
v-if="selectionShow && isSelectShow"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
fixed
|
||||||
|
width="55"
|
||||||
|
label="序号"
|
||||||
|
type="index"
|
||||||
|
align="center"
|
||||||
|
:index="
|
||||||
|
(index) =>
|
||||||
|
(queryParams.pageNum - 1) * queryParams.pageSize +
|
||||||
|
index +
|
||||||
|
1
|
||||||
|
"
|
||||||
|
v-if="indexNumShow"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
:key="v"
|
||||||
|
align="center"
|
||||||
|
:label="item.t_label"
|
||||||
|
:prop="item.t_props"
|
||||||
|
:width="item.t_width"
|
||||||
|
show-overflow-tooltip
|
||||||
|
v-for="(item, v) in tableColumCheckProps"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<!-- 判断当前列数据是否需要使用插槽的数据 -->
|
||||||
|
<template v-if="item.t_slot">
|
||||||
|
<slot :data="scope.row" :name="item.t_slot"></slot>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ scope.row[item.t_props] || '-' }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
label="操作"
|
||||||
|
:min-width="dynamicWidth"
|
||||||
|
:show-overflow-tooltip="false"
|
||||||
|
v-if="handleShow && showOperation"
|
||||||
|
>
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<div class="optionDivRef">
|
||||||
|
<slot :data="row" name="handle">-</slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<pagination
|
||||||
|
:total="total"
|
||||||
|
@pagination="getTableList"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ToolbarModel from '../ToolbarModel'
|
||||||
|
export default {
|
||||||
|
components: { ToolbarModel },
|
||||||
|
props: {
|
||||||
|
// 表单查询条件
|
||||||
|
formLabel: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
// 列表请求接口
|
||||||
|
requestApi: {
|
||||||
|
type: Function,
|
||||||
|
default: () => function () {},
|
||||||
|
},
|
||||||
|
// 列表配置项
|
||||||
|
columnsList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
// 传递的额外参数
|
||||||
|
sendParams: {
|
||||||
|
type: Object,
|
||||||
|
default: () => null,
|
||||||
|
},
|
||||||
|
// 是否显示查询按钮 默认显示
|
||||||
|
showBtnCrews: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
// 级联选择
|
||||||
|
cascadeFunc: {
|
||||||
|
type: Function,
|
||||||
|
default: () => null,
|
||||||
|
},
|
||||||
|
// 级联选择 额外参数
|
||||||
|
extraTableProp: {
|
||||||
|
type: Object,
|
||||||
|
default: () => null,
|
||||||
|
},
|
||||||
|
// 是否显示操作列 默认不显示
|
||||||
|
showOperation: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 是否显示右侧工具栏 默认不显示
|
||||||
|
showRightTools: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
// 复选框是否勾选
|
||||||
|
selectable: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 是否显示复选框 由父组件传递 默认不显示
|
||||||
|
isSelectShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 测试时使用的数据源
|
||||||
|
testTableList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
// 是否显示当天日期
|
||||||
|
isCurrentDate: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 是否只可选择一个月的范围
|
||||||
|
isOneMonth: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
/* 根据操作栏控制表头是否显示 */
|
||||||
|
tableColumCheckProps() {
|
||||||
|
return this.columnCheckList.filter((e) => {
|
||||||
|
return e.checked != false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
columnsList: {
|
||||||
|
handler(nv, ov) {
|
||||||
|
if (nv !== ov) {
|
||||||
|
this.columnsList = nv
|
||||||
|
this.columnCheckList = this.columnsList.map((e) => {
|
||||||
|
this.$set(e, 'checked', true)
|
||||||
|
return e
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 表单校验
|
||||||
|
formRules: {},
|
||||||
|
loading: false,
|
||||||
|
// 列表接口查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
// 列表数据源
|
||||||
|
tableList: [],
|
||||||
|
// 选中数据
|
||||||
|
selectedData: [],
|
||||||
|
// 列表数据条数
|
||||||
|
total: 0,
|
||||||
|
// 搜索区域是否隐藏
|
||||||
|
showSearch: true,
|
||||||
|
// 是否显示复选框
|
||||||
|
selectionShow: true,
|
||||||
|
// 是否显示序号
|
||||||
|
indexNumShow: true,
|
||||||
|
// 是否显示操作列
|
||||||
|
handleShow: true,
|
||||||
|
// 列表每列 label
|
||||||
|
columnCheckList: [],
|
||||||
|
// 操作列最小宽度
|
||||||
|
dynamicWidth: 0,
|
||||||
|
// 自增id
|
||||||
|
idCount: 1,
|
||||||
|
// 日期查询条件 字段名称
|
||||||
|
typeList: [],
|
||||||
|
|
||||||
|
// 日期选择器配置
|
||||||
|
pickerOptions: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.columnCheckList = this.columnsList.map((e) => {
|
||||||
|
this.$set(e, 'checked', true)
|
||||||
|
return e
|
||||||
|
})
|
||||||
|
/* 生成查询参数 */
|
||||||
|
this.formLabel.map((e) => {
|
||||||
|
if (e.f_type === 'dateRange') {
|
||||||
|
this.$set(this.queryParams, e.dateType[0], '')
|
||||||
|
this.$set(this.queryParams, e.dateType[1], '')
|
||||||
|
this.typeList = e.dateType
|
||||||
|
|
||||||
|
if (this.isOneMonth) {
|
||||||
|
this.pickerOptions = {
|
||||||
|
disabledDate: (time) => {
|
||||||
|
// 禁用今天之后的日期
|
||||||
|
return time.getTime() > Date.now()
|
||||||
|
},
|
||||||
|
onPick: ({ maxDate, minDate }) => {
|
||||||
|
// 当选择第一个日期后，设置第二个日期的可选范围
|
||||||
|
this.pickerOptions.minDate = minDate
|
||||||
|
if (minDate) {
|
||||||
|
const maxRangeDate = new Date(minDate)
|
||||||
|
maxRangeDate.setMonth(minDate.getMonth() + 1)
|
||||||
|
this.pickerOptions.maxDate = maxRangeDate
|
||||||
|
} else {
|
||||||
|
this.pickerOptions.maxDate = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$set(this.queryParams, e.f_model, '')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (this.sendParams !== null) {
|
||||||
|
for (let key in this.sendParams) {
|
||||||
|
this.$set(this.queryParams, key, this.sendParams[key])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.getTableList()
|
||||||
|
},
|
||||||
|
updated() {
|
||||||
|
// 更新时重新计算操作列需要的最小宽度 确保展示无误
|
||||||
|
this.dynamicWidth = this.getOperatorWidth()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 获取列表数据 */
|
||||||
|
async getTableList() {
|
||||||
|
try {
|
||||||
|
if (
|
||||||
|
this.queryParams.time &&
|
||||||
|
this.queryParams.time.length !== 0
|
||||||
|
) {
|
||||||
|
this.queryParams[this.typeList[0]] =
|
||||||
|
this.queryParams.time[0]
|
||||||
|
this.queryParams[this.typeList[1]] =
|
||||||
|
this.queryParams.time[1]
|
||||||
|
}
|
||||||
|
|
||||||
|
const params = { ...this.queryParams }
|
||||||
|
const queryParams = JSON.parse(JSON.stringify(params))
|
||||||
|
delete queryParams.time // 剔除无关参数
|
||||||
|
// console.log(
|
||||||
|
// `%c🔍 列表查询入参 %c`,
|
||||||
|
// 'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
|
||||||
|
// '',
|
||||||
|
// queryParams,
|
||||||
|
// )
|
||||||
|
this.loading = true
|
||||||
|
const res = await this.requestApi(queryParams)
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.tableList = res.rows
|
||||||
|
this.total = res.total
|
||||||
|
}
|
||||||
|
this.loading = false
|
||||||
|
} catch (error) {
|
||||||
|
this.loading = false
|
||||||
|
this.tableList = this.testTableList
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 查询按钮 */
|
||||||
|
handleQuery() {
|
||||||
|
this.getTableList()
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 重置按钮 */
|
||||||
|
resetQuery() {
|
||||||
|
this.$refs.queryFormRef.resetFields()
|
||||||
|
if (this.typeList.length > 1) {
|
||||||
|
if (this.isCurrentDate) {
|
||||||
|
this.queryParams[this.typeList[0]] = new Date()
|
||||||
|
.toISOString()
|
||||||
|
.split('T')[0]
|
||||||
|
this.queryParams[this.typeList[1]] = new Date()
|
||||||
|
.toISOString()
|
||||||
|
.split('T')[0]
|
||||||
|
this.queryParams.time = [
|
||||||
|
new Date().toISOString().split('T')[0],
|
||||||
|
new Date().toISOString().split('T')[0],
|
||||||
|
]
|
||||||
|
} else {
|
||||||
|
this.queryParams[this.typeList[0]] = ''
|
||||||
|
this.queryParams[this.typeList[1]] = ''
|
||||||
|
this.queryParams.time = []
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.queryParams[this.typeList[0]] = ''
|
||||||
|
}
|
||||||
|
this.queryParams.pageNum = 1
|
||||||
|
this.queryParams.pageSize = 10
|
||||||
|
this.getTableList()
|
||||||
|
},
|
||||||
|
/** 级联选择 */
|
||||||
|
handleCas(e, val) {
|
||||||
|
this.queryParams[val] = e[e.length - 1]
|
||||||
|
},
|
||||||
|
/** 级联选择只选最后一级 */
|
||||||
|
handleCasAdd(e, val, func, prop) {
|
||||||
|
if (e.length !== 0) {
|
||||||
|
this.queryParams[val] = e[e.length - 1]
|
||||||
|
let setObj = {}
|
||||||
|
// 合并
|
||||||
|
if (prop) {
|
||||||
|
Object.assign(setObj, prop)
|
||||||
|
}
|
||||||
|
// 设置id自增
|
||||||
|
this.$set(setObj, 'id', this.idCount)
|
||||||
|
this.idCount++
|
||||||
|
// 获取单位
|
||||||
|
func({
|
||||||
|
id: e[e.length - 1],
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
this.$set(setObj, 'name', res.data.parentName)
|
||||||
|
this.$set(setObj, 'unitName', res.data.unitName)
|
||||||
|
this.$set(setObj, 'typeName', res.data.name)
|
||||||
|
})
|
||||||
|
.catch((err) => {})
|
||||||
|
for (let key in this.queryParams) {
|
||||||
|
this.$set(setObj, key, this.queryParams[key])
|
||||||
|
}
|
||||||
|
this.tableList.unshift(setObj)
|
||||||
|
console.log(this.tableList)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 动态设置操作列的列宽 */
|
||||||
|
getOperatorWidth() {
|
||||||
|
const operatorColumn =
|
||||||
|
document.getElementsByClassName('optionDivRef')
|
||||||
|
|
||||||
|
// 默认宽度
|
||||||
|
let width = 100
|
||||||
|
// 内间距
|
||||||
|
let paddingSpacing = 0
|
||||||
|
// 按钮数量
|
||||||
|
let buttonCount = 0
|
||||||
|
|
||||||
|
if (operatorColumn.length > 0) {
|
||||||
|
Array.prototype.forEach.call(operatorColumn, function (item) {
|
||||||
|
// 最宽的宽度
|
||||||
|
width = width > item.offsetWidth ? width : item.offsetWidth
|
||||||
|
const buttons = item.getElementsByClassName('el-button')
|
||||||
|
buttonCount = buttons.length
|
||||||
|
buttonCount =
|
||||||
|
buttonCount > buttons.length
|
||||||
|
? buttonCount
|
||||||
|
: buttons.length
|
||||||
|
})
|
||||||
|
return width + 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
queryTableList(params) {
|
||||||
|
Object.assign(this.queryParams, params)
|
||||||
|
this.getTableList()
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelectionChange(e) {
|
||||||
|
this.selectedData = e
|
||||||
|
},
|
||||||
|
|
||||||
|
/* 时间change事件 */
|
||||||
|
onChangeTime(e, type) {
|
||||||
|
if (this.isOneMonth) {
|
||||||
|
if (e && e.length === 2) {
|
||||||
|
const [start, end] = e
|
||||||
|
const startDate = new Date(start)
|
||||||
|
const endDate = new Date(end)
|
||||||
|
// 计算两个日期之间的天数差
|
||||||
|
const diffTime = Math.abs(endDate - startDate)
|
||||||
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
||||||
|
// 如果超过31天，自动调整结束日期
|
||||||
|
if (diffDays > 31) {
|
||||||
|
const newEndDate = new Date(startDate)
|
||||||
|
newEndDate.setDate(startDate.getDate() + 31)
|
||||||
|
this.queryParams.time = [
|
||||||
|
start,
|
||||||
|
newEndDate.toISOString().split('T')[0],
|
||||||
|
]
|
||||||
|
this.$message.warning(
|
||||||
|
'选择的时间范围超过31天，查询将会缓慢，已自动调整',
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const [_1, _2] = type
|
||||||
|
const [_time1, _time2] = e
|
||||||
|
if (e.length > 0) {
|
||||||
|
this.queryParams[_1] = _time1
|
||||||
|
this.queryParams[_2] = _time2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
sendParams: {
|
||||||
|
handler(nv, ov) {
|
||||||
|
if (nv) {
|
||||||
|
for (let key in nv) {
|
||||||
|
this.$set(this.queryParams, key, this.sendParams[key])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.btn-container {
|
||||||
|
margin-bottom: 6px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
::v-deep .btn-handler {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
padding: 6px 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .optionDivRef {
|
||||||
|
white-space: nowrap;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
padding: 6px 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,241 @@
|
||||||
|
<template>
|
||||||
|
<div class="top-right-btn" :style="style">
|
||||||
|
<el-row>
|
||||||
|
<el-tooltip
|
||||||
|
class="item"
|
||||||
|
effect="dark"
|
||||||
|
:content="showSearch ? '隐藏搜索' : '显示搜索'"
|
||||||
|
placement="top"
|
||||||
|
v-if="search"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
circle
|
||||||
|
icon="el-icon-search"
|
||||||
|
@click="toggleSearch()"
|
||||||
|
/>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip
|
||||||
|
class="item"
|
||||||
|
effect="dark"
|
||||||
|
content="刷新"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
circle
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
@click="refresh()"
|
||||||
|
/>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip
|
||||||
|
class="item"
|
||||||
|
effect="dark"
|
||||||
|
content="列表筛选"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<el-dropdown
|
||||||
|
trigger="click"
|
||||||
|
:hide-on-click="false"
|
||||||
|
style="padding-left: 12px"
|
||||||
|
>
|
||||||
|
<el-button size="mini" circle icon="el-icon-menu" />
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item v-if="isSelectShow">
|
||||||
|
<el-checkbox
|
||||||
|
:checked="selectionShow"
|
||||||
|
@change="
|
||||||
|
() => {
|
||||||
|
this.$emit(
|
||||||
|
'update:selectionShow',
|
||||||
|
!this.selectionShow,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
复选框
|
||||||
|
</el-checkbox>
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item>
|
||||||
|
<el-checkbox
|
||||||
|
:checked="indexNumShow"
|
||||||
|
@change="
|
||||||
|
() => {
|
||||||
|
this.$emit(
|
||||||
|
'update:indexNumShow',
|
||||||
|
!this.indexNumShow,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
序号
|
||||||
|
</el-checkbox>
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item v-if="showOperation">
|
||||||
|
<el-checkbox
|
||||||
|
:checked="handleShow"
|
||||||
|
@change="
|
||||||
|
() => {
|
||||||
|
this.$emit(
|
||||||
|
'update:handleShow',
|
||||||
|
!this.handleShow,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
操作
|
||||||
|
</el-checkbox>
|
||||||
|
</el-dropdown-item>
|
||||||
|
|
||||||
|
<template v-for="(item, index) in columns">
|
||||||
|
<el-dropdown-item :key="index">
|
||||||
|
<el-checkbox
|
||||||
|
:checked="item.checked"
|
||||||
|
@change="
|
||||||
|
checkboxChange($event, item.t_label)
|
||||||
|
"
|
||||||
|
:label="item.t_label"
|
||||||
|
>{{ item.t_label }}</el-checkbox
|
||||||
|
>
|
||||||
|
</el-dropdown-item>
|
||||||
|
</template>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</el-tooltip>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'RightToolbar',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 显隐数据
|
||||||
|
value: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: '显示/隐藏',
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
/* 是否显示检索条件 */
|
||||||
|
showSearch: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
/* 列表复选框显示 */
|
||||||
|
selectionShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
/* 列表序号显示 */
|
||||||
|
indexNumShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
/* 列表操作列显示 */
|
||||||
|
handleShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
/* 显隐列信息 */
|
||||||
|
columns: {
|
||||||
|
type: Array,
|
||||||
|
},
|
||||||
|
/* 是否显示检索图标 */
|
||||||
|
search: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
/* 显隐列类型（transfer穿梭框、checkbox复选框） */
|
||||||
|
showColumnsType: {
|
||||||
|
type: String,
|
||||||
|
default: 'checkbox',
|
||||||
|
},
|
||||||
|
/* 右外边距 */
|
||||||
|
gutter: {
|
||||||
|
type: Number,
|
||||||
|
default: 10,
|
||||||
|
},
|
||||||
|
|
||||||
|
/* 是否显示复选框 */
|
||||||
|
isSelectShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
/* 是否显示复选框 */
|
||||||
|
showOperation: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
style() {
|
||||||
|
const ret = {}
|
||||||
|
if (this.gutter) {
|
||||||
|
ret.marginRight = `${this.gutter / 2}px`
|
||||||
|
}
|
||||||
|
return ret
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (this.showColumnsType == 'transfer') {
|
||||||
|
// 显隐列初始默认隐藏列
|
||||||
|
for (let item in this.columns) {
|
||||||
|
if (this.columns[item].visible === false) {
|
||||||
|
this.value.push(parseInt(item))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 搜索
|
||||||
|
toggleSearch() {
|
||||||
|
this.$emit('update:showSearch', !this.showSearch)
|
||||||
|
},
|
||||||
|
|
||||||
|
// // 搜索
|
||||||
|
// toggleSearch() {
|
||||||
|
// this.$emit('update:showSearch', !this.showSearch)
|
||||||
|
// },
|
||||||
|
// 刷新
|
||||||
|
refresh() {
|
||||||
|
this.$emit('queryTable')
|
||||||
|
},
|
||||||
|
// 右侧列表元素变化
|
||||||
|
dataChange(data) {
|
||||||
|
for (let item in this.columns) {
|
||||||
|
const key = this.columns[item].key
|
||||||
|
this.columns[item].visible = !data.includes(key)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 打开显隐列dialog
|
||||||
|
showColumn() {
|
||||||
|
this.open = true
|
||||||
|
},
|
||||||
|
// 勾选
|
||||||
|
checkboxChange(event, label) {
|
||||||
|
let checkList = this.columns
|
||||||
|
checkList.forEach((e) => {
|
||||||
|
if (e.t_label === label) {
|
||||||
|
e.checked = event
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
this.$emit('checkboxChange', checkList)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
::v-deep .el-transfer__button {
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 12px;
|
||||||
|
display: block;
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
::v-deep .el-transfer__button:first-child {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
export const formLabel = [
|
||||||
|
{
|
||||||
|
isShow: false, // 是否展示label
|
||||||
|
f_type: 'ipt',
|
||||||
|
f_label: '数据类型名称',
|
||||||
|
f_model: 'dataTypeName',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const columnsList = [
|
||||||
|
{ t_props: 'dataTypeName', t_label: '数据类型名称' },
|
||||||
|
{ t_props: 'updateUserName', t_label: '更新人' },
|
||||||
|
{ t_props: 'updateTime', t_label: '更新时间' },
|
||||||
|
{ t_props: 'remark', t_label: '备注' }
|
||||||
|
]
|
||||||
|
|
@ -1,325 +1,110 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- 数据分类管理 -->
|
<!-- 数据分类管理 -->
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<!-- 查询 -->
|
<TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="true" ref="dataClassTableRef"
|
||||||
<el-form
|
:columnsList="columnsList" :request-api="getListDataClassAPI">
|
||||||
size="small"
|
<template slot="btn">
|
||||||
ref="queryForm"
|
<el-button plain size="mini" type="primary" icon="el-icon-plus" v-hasPermi="['data:classify:add']"
|
||||||
:inline="true"
|
@click="handleAdd">
|
||||||
:model="queryParams"
|
|
||||||
>
|
|
||||||
<el-form-item prop="dataTypeName">
|
|
||||||
<el-input
|
|
||||||
clearable
|
|
||||||
placeholder="数据类型名称"
|
|
||||||
v-model="queryParams.dataTypeName"
|
|
||||||
@keyup.enter.native="onHandleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item>
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
type="primary"
|
|
||||||
icon="el-icon-search"
|
|
||||||
@click="onHandleQuery"
|
|
||||||
>
|
|
||||||
查询
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
icon="el-icon-refresh"
|
|
||||||
@click="onResetQuery"
|
|
||||||
>
|
|
||||||
重置
|
|
||||||
</el-button>
|
|
||||||
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
type="primary"
|
|
||||||
icon="el-icon-plus"
|
|
||||||
@click="onHandleAdd"
|
|
||||||
>
|
|
||||||
新增
|
新增
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</template>
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<!-- 表格 -->
|
<template slot="handle" slot-scope="{ data }">
|
||||||
<el-table :data="tableData" border>
|
<el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['data:classify:update']"
|
||||||
<el-table-column
|
@click="handleUpdate(data)">
|
||||||
width="50"
|
修改
|
||||||
type="index"
|
</el-button>
|
||||||
label="序号"
|
<el-button plain size="mini" type="danger" icon="el-icon-delete" v-hasPermi="['data:classify:del']"
|
||||||
align="center"
|
@click="handleDelete(data)">
|
||||||
/>
|
删除
|
||||||
<el-table-column
|
</el-button>
|
||||||
align="center"
|
</template>
|
||||||
:key="column.prop"
|
</TableModel>
|
||||||
:prop="column.prop"
|
<!-- 新增/编辑 -->
|
||||||
:label="column.label"
|
<DataClassForm v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
|
||||||
v-for="column in columns"
|
@closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="loading" :width="600" />
|
||||||
:show-overflow-tooltip="true"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<el-table-column align="center" label="操作" width="140">
|
|
||||||
<template slot-scope="{ row }">
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
type="text"
|
|
||||||
icon="el-icon-edit"
|
|
||||||
style="color: #409eff"
|
|
||||||
@click="onHandleEdit(row)"
|
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
type="text"
|
|
||||||
icon="el-icon-delete"
|
|
||||||
style="color: #f56c6c"
|
|
||||||
@click="onHandleDelete(row.id)"
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<pagination
|
|
||||||
:total="total"
|
|
||||||
:page.sync="queryParams.pageNum"
|
|
||||||
:limit.sync="queryParams.pageSize"
|
|
||||||
@pagination="getListDataClassFun"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 新增修改弹框 -->
|
|
||||||
<el-dialog
|
|
||||||
width="40%"
|
|
||||||
append-to-body
|
|
||||||
:title="addAndEditDialogTitle"
|
|
||||||
:visible.sync="addAndEditDialogVisible"
|
|
||||||
>
|
|
||||||
<el-form
|
|
||||||
label-width="auto"
|
|
||||||
:model="addAndEditForm"
|
|
||||||
:rules="addAndEditRules"
|
|
||||||
ref="addAndEditFormRef"
|
|
||||||
>
|
|
||||||
<el-form-item label="数据类型名称" prop="dataTypeName">
|
|
||||||
<el-input
|
|
||||||
clearable
|
|
||||||
maxlength="60"
|
|
||||||
show-word-limit
|
|
||||||
placeholder="请输入数据类型名称"
|
|
||||||
v-model="addAndEditForm.dataTypeName"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注" prop="remark">
|
|
||||||
<el-input
|
|
||||||
clearable
|
|
||||||
type="textarea"
|
|
||||||
show-word-limit
|
|
||||||
maxlength="120"
|
|
||||||
placeholder="请输入备注"
|
|
||||||
v-model="addAndEditForm.remark"
|
|
||||||
:autosize="{ minRows: 4, maxRows: 6 }"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="onHandleAddAndEditSubmit">
|
|
||||||
确定
|
|
||||||
</el-button>
|
|
||||||
<el-button @click="onHandleAddAndEditCancel">
|
|
||||||
取消
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import TableModel from '@/components/TableModel'
|
||||||
|
import { columnsList, formLabel } from './config'
|
||||||
import {
|
import {
|
||||||
addDataClassAPI,
|
|
||||||
updateDataClassAPI,
|
|
||||||
deleteDataClassAPI,
|
deleteDataClassAPI,
|
||||||
getListDataClassAPI,
|
getListDataClassAPI,
|
||||||
} from '@/api/data-collect/data-class-manage'
|
} from '@/api/data-collect/data-class-manage'
|
||||||
|
import DataClassForm from './prop/dataClassForm'
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DataClassManage',
|
name: 'DataClassManage',
|
||||||
|
components: {
|
||||||
|
TableModel,
|
||||||
|
DataClassForm
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
total: 0,
|
formLabel,
|
||||||
addAndEditDialogVisible: false,
|
columnsList,
|
||||||
addAndEditDialogTitle: '新增',
|
getListDataClassAPI,
|
||||||
// 表格数据
|
title: "",
|
||||||
tableData: [
|
isflag: false,
|
||||||
{
|
isAdd: '',
|
||||||
dataTypeName: '业主项目部数据',
|
row: {},
|
||||||
updateBy: '李思思',
|
loading: false,
|
||||||
updateTime: '2025-12-30 20:00:00',
|
|
||||||
remark: '测试数据1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dataTypeName: '业主项目部数据',
|
|
||||||
updateBy: '李思思',
|
|
||||||
updateTime: '2025-12-30 20:00:00',
|
|
||||||
remark: '测试数据1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
dataTypeName: '业主项目部数据',
|
|
||||||
updateBy: '李思思',
|
|
||||||
updateTime: '2025-12-30 20:00:00',
|
|
||||||
remark: '测试数据1',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
// 表格列
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
label: '数据类型名称',
|
|
||||||
prop: 'dataTypeName',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '更新人',
|
|
||||||
prop: 'updateBy',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '更新时间',
|
|
||||||
prop: 'dataTypeName',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '备注',
|
|
||||||
prop: 'dataTypeName',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
// 查询参数
|
|
||||||
queryParams: {
|
|
||||||
id: null, // 修改的id
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
dataTypeName: '',
|
|
||||||
},
|
|
||||||
|
|
||||||
// 新增修改表单
|
|
||||||
addAndEditForm: {
|
|
||||||
remark: '',
|
|
||||||
dataTypeName: '',
|
|
||||||
},
|
|
||||||
|
|
||||||
// 新增修改表单验证
|
|
||||||
addAndEditRules: {
|
|
||||||
dataTypeName: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
trigger: 'blur',
|
|
||||||
message: '请输入数据类型名称',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
// this.getListDataClassFun()
|
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
// 获取数据类型列表
|
/** 新增按钮操作 */
|
||||||
async getListDataClassFun() {
|
handleAdd() {
|
||||||
const res = await getListDataClassAPI(this.queryParams)
|
this.title = "新增";
|
||||||
this.tableData = res.rows
|
this.isAdd = 'add';
|
||||||
this.total = res.total
|
this.isflag = true;
|
||||||
},
|
},
|
||||||
// 查询按钮
|
closeDialog() {
|
||||||
onHandleQuery() {
|
this.isflag = false;
|
||||||
this.getListDataClassFun()
|
|
||||||
},
|
},
|
||||||
// 重置按钮
|
showColose() {
|
||||||
onResetQuery() {
|
this.isflag = false;
|
||||||
this.queryParams = {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
dataTypeName: undefined,
|
|
||||||
}
|
|
||||||
this.getListDataClassFun()
|
|
||||||
},
|
},
|
||||||
// 新增按钮
|
/** 修改操作 */
|
||||||
onHandleAdd() {
|
handleUpdate(row) {
|
||||||
this.addAndEditForm.id = null
|
this.title = "修改";
|
||||||
this.addAndEditDialogTitle = '新增'
|
this.isAdd = 'edit';
|
||||||
this.addAndEditDialogVisible = true
|
this.row = row;
|
||||||
|
this.isflag = true;
|
||||||
},
|
},
|
||||||
// 编辑按钮
|
/* 搜索操作 */
|
||||||
onHandleEdit(row) {
|
handleQuery() {
|
||||||
const { dataTypeName, remark, id } = row // 只取出需要的数据
|
this.$refs.dataClassTableRef.getTableList()
|
||||||
Object.assign(this.addAndEditForm, { dataTypeName, remark, id })
|
|
||||||
this.addAndEditDialogTitle = '编辑'
|
|
||||||
this.addAndEditDialogVisible = true
|
|
||||||
},
|
},
|
||||||
// 删除按钮
|
/** 删除操作 */
|
||||||
onHandleDelete(id) {
|
handleDelete(row) {
|
||||||
this.$modal
|
this.$modal.confirm(`是否确认删除数据类型名称为"${row.dataTypeName}"的数据项？`).then(() => {
|
||||||
.confirm(
|
// 显示加载遮罩
|
||||||
'是否确认删除数据类型名称"' +
|
this.$modal.loading("正在删除，请稍候...");
|
||||||
row.dataTypeName +
|
deleteDataClassAPI({ id: row.id }).then(res => {
|
||||||
'"的数据项？',
|
this.$modal.closeLoading();
|
||||||
)
|
|
||||||
.then(async () => {
|
|
||||||
const res = await deleteDataClassAPI({ id })
|
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
this.$modal.msgSuccess('删除成功')
|
this.$modal.msgSuccess("删除成功");
|
||||||
this.getListDataClassFun()
|
this.handleQuery();
|
||||||
} else {
|
} else {
|
||||||
this.$message.error('删除失败')
|
this.$modal.msgError(res.msg);
|
||||||
}
|
}
|
||||||
})
|
}).catch(error => {
|
||||||
.catch(() => {
|
this.$modal.closeLoading();
|
||||||
console.log('删除失败')
|
this.$modal.msgError("删除失败，请重试");
|
||||||
})
|
console.error('删除失败:', error);
|
||||||
},
|
});
|
||||||
|
}).catch(() => {
|
||||||
// 新增修改确定按钮
|
// 用户取消删除，不需要处理
|
||||||
onHandleAddAndEditSubmit() {
|
});
|
||||||
console.log(this.addAndEditForm)
|
|
||||||
this.$refs.addAndEditFormRef.validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
console.log('新增修改成功')
|
|
||||||
|
|
||||||
// 组装参数
|
|
||||||
const { dataTypeName, remark, id } = this.addAndEditForm
|
|
||||||
const params = {
|
|
||||||
dataTypeName,
|
|
||||||
remark,
|
|
||||||
}
|
|
||||||
// 如果有id，则修改
|
|
||||||
if (id) {
|
|
||||||
params.id = id
|
|
||||||
}
|
|
||||||
|
|
||||||
const API = id ? addDataClassAPI : updateDataClassAPI
|
|
||||||
const res = await API(params)
|
|
||||||
if (res.code === 200) {
|
|
||||||
this.$modal.msgSuccess(
|
|
||||||
`${this.addAndEditDialogTitle}成功`,
|
|
||||||
)
|
|
||||||
this.addAndEditDialogVisible = false
|
|
||||||
} else {
|
|
||||||
this.$message.error('新增修改失败')
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.log('新增修改失败')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 新增修改取消按钮
|
|
||||||
onHandleAddAndEditCancel() {
|
|
||||||
this.$refs.addAndEditFormRef.resetFields()
|
|
||||||
this.addAndEditDialogVisible = false
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,187 @@
|
||||||
|
<template>
|
||||||
|
<!-- 小型弹窗，用于完成，删除，保存等操作 -->
|
||||||
|
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
|
||||||
|
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
|
||||||
|
<div>
|
||||||
|
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
|
||||||
|
<el-form-item label="数据类型名称" prop="dataTypeName">
|
||||||
|
<el-input class="form-item" v-model="form.dataTypeName" clearable show-word-limit
|
||||||
|
placeholder="请输入数据类型名称" maxlength="32"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" class="form-item"
|
||||||
|
v-model="form.remark" clearable show-word-limit placeholder="请输入备注" maxlength="255"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
|
||||||
|
<el-button type="primary" class="search-btn" :disabled="disabled"
|
||||||
|
@click="submitForm('ruleForm')">确认</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import _ from 'lodash'
|
||||||
|
import {
|
||||||
|
addDataClassAPI,
|
||||||
|
updateDataClassAPI,
|
||||||
|
} from '@/api/data-collect/data-class-manage'
|
||||||
|
export default {
|
||||||
|
name: "DataClassForm",
|
||||||
|
props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
lDialog: this.width > 500 ? "w700" : "w500",
|
||||||
|
dialogVisible: true,
|
||||||
|
isDisabled: true,
|
||||||
|
form: {
|
||||||
|
dataTypeName: '',
|
||||||
|
remark: '',
|
||||||
|
},
|
||||||
|
loading: null,
|
||||||
|
rules: {
|
||||||
|
dataTypeName: [
|
||||||
|
{ required: true, message: '数据类型名称不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initFormData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 初始化表单数据 */
|
||||||
|
initFormData() {
|
||||||
|
if (this.isAdd === 'edit' && this.rowData) {
|
||||||
|
// 编辑模式：填充表单数据
|
||||||
|
this.form = {
|
||||||
|
dataTypeName: this.rowData.dataTypeName || '',
|
||||||
|
remark: this.rowData.remark || '',
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// 新增模式：重置表单
|
||||||
|
this.form = {
|
||||||
|
dataTypeName: '',
|
||||||
|
remark: '',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*关闭弹窗 */
|
||||||
|
handleClose() {
|
||||||
|
this.dialogVisible = false;
|
||||||
|
this.$emit("closeDialog");
|
||||||
|
setTimeout(() => {
|
||||||
|
this.dialogVisible = true;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**确认弹窗 */
|
||||||
|
sureBtnClick() {
|
||||||
|
this.dialogVisible = false;
|
||||||
|
this.$emit("closeDialog");
|
||||||
|
setTimeout(() => {
|
||||||
|
this.dialogVisible = true;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**重置表单*/
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
dataTypeName: '',
|
||||||
|
remark: '',
|
||||||
|
};
|
||||||
|
this.resetForm("ruleForm");
|
||||||
|
},
|
||||||
|
handleReuslt(res) {
|
||||||
|
this.$modal.msgSuccess(res.msg);
|
||||||
|
this.reset();
|
||||||
|
this.$emit('handleQuery');
|
||||||
|
this.handleClose();
|
||||||
|
},
|
||||||
|
/**验证 */
|
||||||
|
submitForm(formName) {
|
||||||
|
this.$refs[formName].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
// 显示遮罩层
|
||||||
|
this.loading = this.$loading({
|
||||||
|
lock: true,
|
||||||
|
text: "数据提交中，请稍候...",
|
||||||
|
background: 'rgba(0,0,0,0.5)',
|
||||||
|
target: this.$el.querySelector('.el-dialog') || document.body
|
||||||
|
})
|
||||||
|
let params = _.cloneDeep(this.form);
|
||||||
|
const data = {
|
||||||
|
dataTypeName: params.dataTypeName,
|
||||||
|
remark: params.remark,
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isAdd === 'add') {
|
||||||
|
addDataClassAPI(data).then(res => {
|
||||||
|
this.loading.close();
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.handleReuslt(res);
|
||||||
|
} else {
|
||||||
|
this.$modal.msgError(res.msg);
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
this.loading.close();
|
||||||
|
// this.$modal.msgError('提交失败，请重试');
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const data = {
|
||||||
|
dataTypeName: params.dataTypeName,
|
||||||
|
remark: params.remark,
|
||||||
|
id: this.rowData.id,
|
||||||
|
}
|
||||||
|
updateDataClassAPI(data).then(res => {
|
||||||
|
this.loading.close();
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.handleReuslt(res);
|
||||||
|
} else {
|
||||||
|
this.$modal.msgError(res.msg);
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
this.loading.close();
|
||||||
|
// this.$modal.msgError('提交失败，请重试');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.w700 .el-dialog {
|
||||||
|
width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w500 .el-dialog {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w500 .el-dialog__header,
|
||||||
|
.w700 .el-dialog__header {
|
||||||
|
// background: #eeeeee;
|
||||||
|
|
||||||
|
.el-dialog__title {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.yxq .el-range-separator {
|
||||||
|
margin-right: 7px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-editor--daterange.el-input__inner {
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-style {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue