台账管理页面修改

This commit is contained in:
lSun 2026-01-23 13:51:24 +08:00
parent 090856ced9
commit 1e88de4624
4 changed files with 812 additions and 0 deletions

81
src/api/system/ledger.js Normal file
View File

@ -0,0 +1,81 @@
import request from '@/utils/request'
/**
* 查询列表
* @param {object} params - 查询参数
*/
export const getProcessList = (params) => {
return request({
url: '/material-mall/equipment/field/list',
method: 'GET',
params: params
})
}
/**
* 获取详细信息包含节点列表
* @param {number} id - ID
*/
export const getProcessDetail = (id) => {
return request({
url: `/material-mall/equipment/field/${id}`,
method: 'GET'
})
}
/**
* 新增
* @param {object} data - 数据
*/
export const addProcess = (data) => {
return request({
url: '/material-mall/equipment/field/add ',
method: 'POST',
data: data
})
}
/**
* 修改
* @param {object} data - 数据
*/
export const updateProcess = (data) => {
return request({
url: '/material-mall/equipment/field/edit ',
method: 'POST',
data: data
})
}
/**
* 删除
* @param {string} ids - ID多个用逗号分隔
*/
export const deleteProcess = (ids) => {
return request({
url: `/material-mall/equipment/field/delete/${ids}`,
method: 'POST',
})
}
/**
* 启用
* @param {number} id - ID
*/
export const enableProcess = (id) => {
return request({
url: `/material-mall/approval/process/enable/${id}`,
method: 'PUT'
})
}
/**
* 停用
* @param {number} id - ID
*/
export const disableProcess = (id) => {
return request({
url: `/material-mall/approval/process/disable/${id}`,
method: 'PUT'
})
}

View File

@ -0,0 +1,218 @@
<template>
<el-dialog
:title="isEdit ? '编辑' : '新增'"
:visible.sync="dialogVisible"
width="70%"
append-to-body
@close="handleClose"
>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="字段编码" prop="fieldCode">
<el-input v-model="form.fieldCode" placeholder="请输入字段编码" maxlength="20" :disabled="form.isSystem=='1'" />
</el-form-item>
<el-form-item label="字段名称" prop="fieldName">
<el-input v-model="form.fieldName" placeholder="请输入字段名称" maxlength="20" :disabled="form.isSystem=='1'" />
</el-form-item>
<el-form-item label="字段类型" prop="fieldType">
<el-select v-model="form.fieldType " placeholder="请选择字段类型" style="width: 100%" :disabled="form.isSystem=='1'">
<el-option label="输入框" value="INPUT" />
<el-option label="时间框" value="DATE" />
<el-option label="选择框" value="SELECT" />
</el-select>
</el-form-item>
<el-form-item label="预定义值" prop="fieldValue" v-if="form.fieldType == 'SELECT'" >
<el-input
v-model="form.fieldValue"
type="textarea"
:rows="3"
placeholder="请输入预定义选项,用逗号分隔(仅下拉选择/多选类型需要)"
maxlength="200"
show-word-limit
:disabled="form.isSystem=='1'"
/>
<div class="form-tip">多个选项用逗号分隔例如选项1,选项2,选项3</div>
</el-form-item>
<el-form-item label="是否必填" prop="isRequired">
<el-radio-group v-model="form.isRequired">
<el-radio label="1">必填</el-radio>
<el-radio label="0">选填</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status" :disabled="form.isSystem=='1'">
<el-radio label="1">启用</el-radio>
<el-radio label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</span>
</el-dialog>
</template>
<script>
import { addProcess, updateProcess, getProcessDetail } from '@/api/system/ledger'
export default {
name: 'LedgerDialog',
props: {
visible: {
type: Boolean,
default: false
},
processData: {
type: Object,
default: () => ({})
},
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
dialogVisible: false,
nodeDialogVisible: false,
currentNode: {},
currentNodeIndex: -1,
form: {
id: '',
fieldCode: '',
fieldName: '',
fieldType: '',
fieldValue: '',
isRequired: '1',
status: '1',
isSystem:'0'
},
rules: {
fieldCode: [{ required: true, message: '请输入字段编码', trigger: 'blur' }],
fieldName: [{ required: true, message: '请输入字段名称', trigger: 'blur' }],
fieldType: [{ required: true, message: '请选择字段类型', trigger: 'blur' }],
}
}
},
watch: {
visible(val) {
this.dialogVisible = val
if (val && this.isEdit) {
this.loadProcessDetail()
} else if (val) {
this.form = {
id: '',
fieldCode: '',
fieldName: '',
fieldType: '',
fieldValue: '',
isRequired: '1',
status: '1',
isSystem:'0'
}
}
}
},
methods: {
loadProcessDetail() {
getProcessDetail(this.processData.id).then(res => {
if (res.code === 200) {
this.form = res.data
}
})
},
handleAddNode() {
this.currentNode = {
nodeOrder: this.form.nodeList.length + 1,
nodeName: '',
approverType: '1',
approverIds: '',
approveMode: '1',
autoPass: '0'
}
this.currentNodeIndex = -1
this.nodeDialogVisible = true
},
handleEditNode(index) {
this.currentNode = JSON.parse(JSON.stringify(this.form.nodeList[index]))
this.currentNodeIndex = index
this.nodeDialogVisible = true
},
handleDeleteNode(index) {
this.$confirm('确定删除该节点吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.form.nodeList.splice(index, 1)
this.$message.success('删除成功')
}).catch(() => {})
},
handleNodeSuccess(node) {
if (this.currentNodeIndex === -1) {
this.form.nodeList.push(node)
} else {
this.$set(this.form.nodeList, this.currentNodeIndex, node)
}
this.nodeDialogVisible = false
},
handleSubmit() {
this.$refs.form.validate(valid => {
if (!valid) return
if (this.form.fieldType == 'SELECT' && !this.form.fieldValue) {
this.$message.warning('下拉选择必须设置预定义选项')
return
}
if(this.form.fieldType != 'SELECT'){
this.form.fieldValue = ''
}
const submitFn = this.isEdit ? updateProcess : addProcess
submitFn(this.form).then(() => {
this.$message.success(this.isEdit ? '编辑成功' : '新增成功')
this.$emit('success')
})
})
},
handleClose() {
this.$emit('update:visible', false)
}
}
}
</script>
<style scoped lang="scss">
.el-button--text{
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 14px;
color: #2CBAB2;
line-height: 22px;
text-align: left;
font-style: normal;
text-transform: none;
}
.el-button--primary{
background-color: #2CBAB2;
border-color: #2CBAB2;
}
::v-deep .el-button--primary{
background-color: #2CBAB2;
border-color: #2CBAB2;
}
</style>

View File

@ -0,0 +1,220 @@
<template>
<el-dialog
title="查看"
:visible.sync="dialogVisible"
width="70%"
append-to-body
@close="handleClose"
>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="字段编码" prop="fieldCode">
<el-input v-model="form.fieldCode" placeholder="请输入字段编码" maxlength="20" />
</el-form-item>
<el-form-item label="字段名称" prop="fieldName">
<el-input v-model="form.fieldName" placeholder="请输入字段名称" maxlength="20" />
</el-form-item>
<el-form-item label="字段类型" prop="fieldType">
<el-select v-model="form.fieldType " placeholder="请选择字段类型" :disabled="isEdit" style="width: 100%">
<el-option label="输入框" value="INPUT" />
<el-option label="时间框" value="DATE" />
<el-option label="选择框" value="SELECT" />
</el-select>
</el-form-item>
<el-form-item label="预定义值" prop="fieldValue" v-if="form.fieldType == 'SELECT'">
<el-input
v-model="form.fieldValue"
type="textarea"
:rows="3"
placeholder="请输入预定义选项,用逗号分隔(仅下拉选择/多选类型需要)"
maxlength="200"
show-word-limit
/>
<div class="form-tip">多个选项用逗号分隔例如选项1,选项2,选项3</div>
</el-form-item>
<el-form-item label="是否必填" prop="isRequired">
<el-radio-group v-model="form.isRequired">
<el-radio label="1">必填</el-radio>
<el-radio label="0">选填</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio label="1">启用</el-radio>
<el-radio label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否系统内置字段" prop="isSystem">
<el-radio-group v-model="form.isSystem">
<el-radio label="1"></el-radio>
<el-radio label="0"></el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<!-- <el-button type="primary" @click="handleSubmit">确定</el-button>-->
</span>
</el-dialog>
</template>
<script>
import { addProcess, updateProcess, getProcessDetail } from '@/api/system/ledger'
export default {
name: 'Detail',
props: {
visible: {
type: Boolean,
default: false
},
processData: {
type: Object,
default: () => ({})
},
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
dialogVisible: false,
nodeDialogVisible: false,
currentNode: {},
currentNodeIndex: -1,
form: {
id: '',
fieldCode: '',
fieldName: '',
fieldType: '',
fieldValue: '',
isRequired: '1',
status: '1',
isSystem:'0'
},
rules: {
fieldCode: [{ required: true, message: '请输入字段编码', trigger: 'blur' }],
fieldName: [{ required: true, message: '请输入字段名称', trigger: 'blur' }],
fieldType: [{ required: true, message: '请选择字段类型', trigger: 'blur' }],
}
}
},
watch: {
visible(val) {
this.dialogVisible = val
if (val && this.isEdit) {
this.loadProcessDetail()
} else if (val) {
this.form = {
id: '',
fieldCode: '',
fieldName: '',
fieldType: '',
fieldValue: '',
isRequired: '1',
status: '1',
isSystem:'0'
}
}
}
},
methods: {
loadProcessDetail() {
getProcessDetail(this.processData.id).then(res => {
if (res.code === 200) {
this.form = res.data
}
})
},
handleAddNode() {
this.currentNode = {
nodeOrder: this.form.nodeList.length + 1,
nodeName: '',
approverType: '1',
approverIds: '',
approveMode: '1',
autoPass: '0'
}
this.currentNodeIndex = -1
this.nodeDialogVisible = true
},
handleEditNode(index) {
this.currentNode = JSON.parse(JSON.stringify(this.form.nodeList[index]))
this.currentNodeIndex = index
this.nodeDialogVisible = true
},
handleDeleteNode(index) {
this.$confirm('确定删除该节点吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.form.nodeList.splice(index, 1)
this.$message.success('删除成功')
}).catch(() => {})
},
handleNodeSuccess(node) {
if (this.currentNodeIndex === -1) {
this.form.nodeList.push(node)
} else {
this.$set(this.form.nodeList, this.currentNodeIndex, node)
}
this.nodeDialogVisible = false
},
handleSubmit() {
this.$refs.form.validate(valid => {
if (!valid) return
if (this.form.fieldType == 'SELECT' && !this.form.fieldValue.trim()) {
this.$message.warning('下拉选择必须设置预定义选项')
return
}
const submitFn = this.isEdit ? updateProcess : addProcess
submitFn(this.form).then(() => {
this.$message.success(this.isEdit ? '编辑成功' : '新增成功')
this.$emit('success')
})
})
},
handleClose() {
this.$emit('update:visible', false)
}
}
}
</script>
<style scoped lang="scss">
.el-button--text{
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 14px;
color: #2CBAB2;
line-height: 22px;
text-align: left;
font-style: normal;
text-transform: none;
}
.el-button--primary{
background-color: #2CBAB2;
border-color: #2CBAB2;
}
::v-deep .el-button--primary{
background-color: #2CBAB2;
border-color: #2CBAB2;
}
</style>

View File

@ -0,0 +1,293 @@
<template>
<div class="app-container">
<!-- 搜索表单 -->
<el-card class="box-card" style="margin-bottom: 20px">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
<el-form-item label="字段名称" prop="fieldName">
<el-input v-model="queryParams.fieldName" placeholder="请输入字段名称" clearable />
</el-form-item>
<el-form-item label="状态" prop="status" label-width="50px">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable >
<el-option label="启用" value="1" />
<el-option label="停用" value="0" />
</el-select>
</el-form-item>
<el-form-item style="float:right">
<el-button type="primary" icon="el-icon-search" @click="handleQuery" size="mini">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery" size="mini">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 流程列表 -->
<el-card class="content-box">
<!-- 操作按钮 -->
<el-row style="float:right;margin-bottom: 10px;text-align: right;">
<el-button type="primary" size="small" @click="handleAdd">新增</el-button>
</el-row>
<el-table
v-loading="loading"
:data="tableList"
border
stripe
class="my-table"
>
<el-table-column align="center" label="序号" type="index" width="60"/>
<el-table-column prop="fieldCode" align="center" label="字段编码" min-width="100" />
<el-table-column prop="fieldName" align="center" label="字段名称" min-width="100" />
<el-table-column prop="fieldValue" align="center" label="字段绑定值" min-width="100" show-overflow-tooltip />
<el-table-column prop="fieldType" align="center" label="字段类型" min-width="100">
<template slot-scope="scope">
{{ getBusinessTypeLabel(scope.row.fieldType) }}
</template>
</el-table-column>
<el-table-column prop="isRequired" align="center" label="是否必填" width="80">
<template slot-scope="scope">
<el-tag :type="scope.row.isRequired == '1' ? 'success' : 'danger'">
{{ scope.row.isRequired == '1' ? '必填' : '不必填' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="status" align="center" label="状态" width="80">
<template slot-scope="scope">
<el-tag :type="scope.row.status == '1' ? 'success' : 'danger'">
{{ scope.row.status == '1' ? '启用' : '停用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" align="center" label="创建时间" width="180" />
<el-table-column align="center" label="操作" width="160" fixed="right">
<template slot-scope="scope">
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
<el-button type="text" @click="handleDeleteOne(scope.row)" style="color: #FF5129;" v-if="scope.row.isSystem=='0' ">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
:current-page="queryParams.pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="queryParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handlePageSizeChange"
@current-change="handlePageChange"
style="margin-top: 20px; text-align: right"
/>
</el-card>
<!-- 编辑/新增对话框 -->
<ledger-dialog
:visible.sync="dialogVisible"
:process-data="currentProcess"
:is-edit="isEdit"
@success="handleDialogSuccess"
/>
<!-- 查看对话框 -->
<detail
:visible.sync="dialogVisibleDetail"
:process-data="currentProcess"
:is-edit="isEdit"
/>
</div>
</template>
<script>
import { getProcessList, deleteProcess } from '@/api/system/ledger'
import LedgerDialog from './components/LedgerDialog'
import Detail from './detail'
export default {
name: 'Ledger',
components: {
LedgerDialog,Detail
},
data() {
return {
loading: false,
tableList: [],
total: 0,
multipleSelection: [],
dialogVisible: false,
dialogVisibleDetail: false,
isEdit: false,
currentProcess: {},
queryParams: {
fieldName: '',
status: '',
pageNum: 1,
pageSize: 10
}
}
},
created() {
this.getList()
},
methods: {
getList() {
this.loading = true
getProcessList(this.queryParams)
.then(res => {
if (res.code === 200) {
this.tableList = res.rows || []
this.total = res.total || 0
}
})
.finally(() => {
this.loading = false
})
},
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
resetQuery() {
this.queryParams = {
fieldName: '',
status: '',
pageNum: 1,
pageSize: 10
}
this.getList()
},
handlePageChange(pageNum) {
this.queryParams.pageNum = pageNum
this.getList()
},
handlePageSizeChange(pageSize) {
this.queryParams.pageSize = pageSize
this.getList()
},
handleSelectionChange(selection) {
this.multipleSelection = selection
},
handleAdd() {
this.isEdit = false
this.currentProcess = {}
this.dialogVisible = true
},
handleEdit(row) {
this.isEdit = true
this.currentProcess = JSON.parse(JSON.stringify(row))
this.dialogVisible = true
},
handleView(row) {
this.currentProcess = JSON.parse(JSON.stringify(row))
this.dialogVisibleDetail = true
this.isEdit = true
},
handleDelete() {
const ids = this.multipleSelection.map(item => item.id).join(',')
this.$confirm('确定删除选中的流程吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteProcess(ids).then(() => {
this.$message.success('删除成功')
this.getList()
})
}).catch(() => {})
},
handleDeleteOne(row) {
this.$confirm('确定删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteProcess(row.id).then(() => {
this.$message.success('删除成功')
this.getList()
})
}).catch(() => {})
},
handleDialogSuccess() {
this.dialogVisible = false
this.getList()
},
getBusinessTypeLabel(type) {
const map = {
'SELECT': '选择框',
'INPUT': '输入框',
'DATE': '时间框',
}
return map[type] || type
}
}
}
</script>
<style scoped lang="scss">
.box-card {
margin-bottom: 20px;
}
.content-box {
border-radius: 8px;
//height: calc(100vh - 240px);
display: flex;
flex-direction: column;
overflow: hidden;
::v-deep .el-card__body {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
padding: 20px;
}
}
::v-deep .el-button--primary{
background-color: #2CBAB2;
border-color: #2CBAB2;
}
.el-button--danger{
color: #FFF;
background-color: #FF5129;
border-color: #FF5129;
}
.el-tag.el-tag--success {
// background-color: #f0f9eb;
// border-color: #e1f3d8;
color: #34E2C7;
background-color:rgba(52,226,199,0.1);
background: rgba(52,226,199,0.1);
border-radius: 4px 4px 4px 4px;
border: 1px solid #34E2C7;
}
.el-tag.el-tag--danger {
color: #FF5129 ;
background-color: rgba(255,81,41,0.1);
background: rgba(255,81,41,0.1);
border-radius: 4px 4px 4px 4px;
border: 1px solid #FF5129;
}
.el-button--text{
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 14px;
color: #2CBAB2;
line-height: 22px;
text-align: left;
font-style: normal;
text-transform: none;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: #f5f7fa;
}
</style>