数据分类管理
This commit is contained in:
parent
83f84b8888
commit
848a172fbe
|
|
@ -37,6 +37,7 @@
|
|||
"js-beautify": "1.13.0",
|
||||
"js-cookie": "3.0.1",
|
||||
"jsencrypt": "3.0.0-rc.1",
|
||||
"lodash": "^4.17.21",
|
||||
"nprogress": "0.2.0",
|
||||
"quill": "2.0.2",
|
||||
"screenfull": "5.0.2",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import request from '@/utils/request'
|
|||
// 新增数据类型
|
||||
export function addDataClassAPI(data) {
|
||||
return request({
|
||||
url: '/smartArchives/***',
|
||||
url: '/smartArchives/data/classify/addKyDataClassify',
|
||||
method: 'POST',
|
||||
data: data,
|
||||
})
|
||||
|
|
@ -12,7 +12,7 @@ export function addDataClassAPI(data) {
|
|||
// 修改数据类型
|
||||
export function updateDataClassAPI(data) {
|
||||
return request({
|
||||
url: '/smartArchives/***',
|
||||
url: '/smartArchives/data/classify/updateKyDataClassify',
|
||||
method: 'POST',
|
||||
data: data,
|
||||
})
|
||||
|
|
@ -21,8 +21,8 @@ export function updateDataClassAPI(data) {
|
|||
// 删除数据类型
|
||||
export function deleteDataClassAPI(data) {
|
||||
return request({
|
||||
url: '/smartArchives/***',
|
||||
method: 'DELETE',
|
||||
url: '/smartArchives/data/classify/delKyDataClassify',
|
||||
method: 'POST',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@ export function deleteDataClassAPI(data) {
|
|||
// 查询数据类型列表
|
||||
export function getListDataClassAPI(data) {
|
||||
return request({
|
||||
url: '/smartArchives/***',
|
||||
url: '/smartArchives/data/classify/list',
|
||||
method: 'GET',
|
||||
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>
|
||||
<!-- 数据分类管理 -->
|
||||
<div class="app-container">
|
||||
<!-- 查询 -->
|
||||
<el-form
|
||||
size="small"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
: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"
|
||||
>
|
||||
<TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="true" ref="dataClassTableRef"
|
||||
:columnsList="columnsList" :request-api="getListDataClassAPI">
|
||||
<template slot="btn">
|
||||
<el-button plain size="mini" type="primary" icon="el-icon-plus" v-hasPermi="['data:classify:add']"
|
||||
@click="handleAdd">
|
||||
新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="tableData" border>
|
||||
<el-table-column
|
||||
width="50"
|
||||
type="index"
|
||||
label="序号"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
:key="column.prop"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
v-for="column in columns"
|
||||
: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>
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button plain size="mini" type="primary" icon="el-icon-edit" v-hasPermi="['data:classify:update']"
|
||||
@click="handleUpdate(data)">
|
||||
修改
|
||||
</el-button>
|
||||
<el-button plain size="mini" type="danger" icon="el-icon-delete" v-hasPermi="['data:classify:del']"
|
||||
@click="handleDelete(data)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</TableModel>
|
||||
<!-- 新增/编辑 -->
|
||||
<DataClassForm v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
|
||||
@closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="loading" :width="600" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableModel from '@/components/TableModel'
|
||||
import { columnsList, formLabel } from './config'
|
||||
import {
|
||||
addDataClassAPI,
|
||||
updateDataClassAPI,
|
||||
deleteDataClassAPI,
|
||||
getListDataClassAPI,
|
||||
} from '@/api/data-collect/data-class-manage'
|
||||
import DataClassForm from './prop/dataClassForm'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'DataClassManage',
|
||||
|
||||
components: {
|
||||
TableModel,
|
||||
DataClassForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
total: 0,
|
||||
addAndEditDialogVisible: false,
|
||||
addAndEditDialogTitle: '新增',
|
||||
// 表格数据
|
||||
tableData: [
|
||||
{
|
||||
dataTypeName: '业主项目部数据',
|
||||
updateBy: '李思思',
|
||||
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: '请输入数据类型名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
formLabel,
|
||||
columnsList,
|
||||
getListDataClassAPI,
|
||||
title: "",
|
||||
isflag: false,
|
||||
isAdd: '',
|
||||
row: {},
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
// this.getListDataClassFun()
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取数据类型列表
|
||||
async getListDataClassFun() {
|
||||
const res = await getListDataClassAPI(this.queryParams)
|
||||
this.tableData = res.rows
|
||||
this.total = res.total
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.title = "新增";
|
||||
this.isAdd = 'add';
|
||||
this.isflag = true;
|
||||
},
|
||||
// 查询按钮
|
||||
onHandleQuery() {
|
||||
this.getListDataClassFun()
|
||||
closeDialog() {
|
||||
this.isflag = false;
|
||||
},
|
||||
// 重置按钮
|
||||
onResetQuery() {
|
||||
this.queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
dataTypeName: undefined,
|
||||
}
|
||||
this.getListDataClassFun()
|
||||
showColose() {
|
||||
this.isflag = false;
|
||||
},
|
||||
// 新增按钮
|
||||
onHandleAdd() {
|
||||
this.addAndEditForm.id = null
|
||||
this.addAndEditDialogTitle = '新增'
|
||||
this.addAndEditDialogVisible = true
|
||||
/** 修改操作 */
|
||||
handleUpdate(row) {
|
||||
this.title = "修改";
|
||||
this.isAdd = 'edit';
|
||||
this.row = row;
|
||||
this.isflag = true;
|
||||
},
|
||||
// 编辑按钮
|
||||
onHandleEdit(row) {
|
||||
const { dataTypeName, remark, id } = row // 只取出需要的数据
|
||||
Object.assign(this.addAndEditForm, { dataTypeName, remark, id })
|
||||
this.addAndEditDialogTitle = '编辑'
|
||||
this.addAndEditDialogVisible = true
|
||||
/* 搜索操作 */
|
||||
handleQuery() {
|
||||
this.$refs.dataClassTableRef.getTableList()
|
||||
},
|
||||
// 删除按钮
|
||||
onHandleDelete(id) {
|
||||
this.$modal
|
||||
.confirm(
|
||||
'是否确认删除数据类型名称"' +
|
||||
row.dataTypeName +
|
||||
'"的数据项？',
|
||||
)
|
||||
.then(async () => {
|
||||
const res = await deleteDataClassAPI({ id })
|
||||
/** 删除操作 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm(`是否确认删除数据类型名称为"${row.dataTypeName}"的数据项？`).then(() => {
|
||||
// 显示加载遮罩
|
||||
this.$modal.loading("正在删除，请稍候...");
|
||||
deleteDataClassAPI({ id: row.id }).then(res => {
|
||||
this.$modal.closeLoading();
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
this.getListDataClassFun()
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
this.handleQuery();
|
||||
} else {
|
||||
this.$message.error('删除失败')
|
||||
this.$modal.msgError(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('删除失败')
|
||||
})
|
||||
},
|
||||
|
||||
// 新增修改确定按钮
|
||||
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
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError("删除失败，请重试");
|
||||
console.error('删除失败:', error);
|
||||
});
|
||||
}).catch(() => {
|
||||
// 用户取消删除，不需要处理
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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