整理优化基础档案页面代码
This commit is contained in:
parent
7434c14171
commit
cba9c9df13
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
VUE_APP_API_BASE_URL=http://zxx4.f3322.net:46000
|
||||
VUE_APP_USER_MODEL=AdminUser
|
||||
VUE_APP_USER_MODEL2=BaseAdmin
|
||||
VUE_APP_BEID=1
|
||||
VUE_APP_USER_MODEL2=AdminUser
|
||||
VUE_APP_USER_MODEL=BaseAdmin
|
||||
VUE_APP_BEID=3
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div class="page-body">
|
||||
|
||||
<vxe-form :data="options.formOptions.data" ref="xForm" :title-width="options.formOptions.titleWidth"
|
||||
:title-align="options.formOptions.titleAlign" :rules="options.formOptions.rules" :items="options.formOptions.items" titleColon>
|
||||
</vxe-form>
|
||||
|
||||
<div class="footerbar">
|
||||
<a-button type="primary" @click="ok">确定</a-button>
|
||||
<a-button @click="cancel">取消</a-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
|
||||
name: 'BasicPageEdit',
|
||||
components: { },
|
||||
props: {
|
||||
options: {
|
||||
type: Object
|
||||
},
|
||||
dataId: {
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
|
||||
return {};
|
||||
},
|
||||
|
||||
computed: {
|
||||
},
|
||||
|
||||
|
||||
created() {
|
||||
|
||||
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
|
||||
|
||||
// 返回
|
||||
back() {
|
||||
// 如果是新增模式，关闭当前页面
|
||||
if (!this.isEdit) {
|
||||
this.$closePage({
|
||||
closeRoute: this.options.addPageUrl
|
||||
});
|
||||
} else {
|
||||
this.$closePage({
|
||||
closeRoute: this.options.editPageUrl
|
||||
});
|
||||
}
|
||||
// 打开列表页面
|
||||
this.$openPage(this.options.listPageUrl)
|
||||
},
|
||||
|
||||
// 保存
|
||||
ok() {
|
||||
|
||||
let save = () => {
|
||||
|
||||
|
||||
// 如果是新增模式，提交新增接口 如果是编辑模式，提交编辑接口
|
||||
let action = !this.isEdit ? this.options.actions.create : this.options.actions.update;
|
||||
// 如果是新增模式，提交的数据中加入id 如果是编辑模式，提交的数据中不加入id
|
||||
let postdata = Object.assign({}, this.options.formOptions.data);
|
||||
// 如果是编辑模式
|
||||
if (this.isEdit) {
|
||||
// postdata = { MesUnit: postdata }
|
||||
}
|
||||
// 格式化提交的数据
|
||||
this.$mk.formatFormData({ data: postdata, rules: this.options.formOptions.items });
|
||||
|
||||
|
||||
// 提交数据
|
||||
this.$mk.post({
|
||||
url: action,
|
||||
loading: "保存中...",
|
||||
data: postdata,
|
||||
useBigInt: true,
|
||||
}).then(() => { // 成功回调
|
||||
this.$mk.success("保存成功");
|
||||
if (!this.isEdit) { // 如果是新增模式，关闭当前页面
|
||||
this.back();
|
||||
}
|
||||
}).catch((a) => { // 失败回调
|
||||
this.$mk.error(a.data.msg); // 显示错误信息
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
// 验证表单
|
||||
this.$mk.validateForm({ form: this.$refs.xForm }).then(() => { // 验证表单
|
||||
save(); // 提交保存
|
||||
}).catch(count => { // 验证失败
|
||||
this.$mk.error(`存在${count}项错误，请检查`);
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
// 取消 返回
|
||||
cancel() {
|
||||
this.back();
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="less">
|
||||
.page-body {
|
||||
padding: 30px;
|
||||
background: @base-bg-color;
|
||||
}
|
||||
|
||||
.formtabs .ant-tabs-tabpane {
|
||||
/* background: white; */
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.gridPanel {
|
||||
height: calc(100vh - 600px);
|
||||
}
|
||||
|
||||
.footerbar {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.imagePanel {
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
width: 100px;
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
<template>
|
||||
<div class="page-body">
|
||||
<a-row type="flex">
|
||||
<a-col :flex="$mk.config.ui.searchFlex">
|
||||
<!-- 搜索区 -->
|
||||
<vxe-form :data="options.searchFormData" :items="options.searchFormItems" titleColon @submit="onSearch">
|
||||
<template #date="{}">
|
||||
<a-form-item label="创建时间" :style="{ display: 'inline-block', width: 120 }">
|
||||
</a-form-item>
|
||||
<a-form-item :style="{ display: 'inline-block', width: 'calc(100% - 120px )' }">
|
||||
<a-range-picker @change="onDateChange" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
</vxe-form>
|
||||
</a-col>
|
||||
<a-col :flex="$mk.config.ui.toolbarFlex">
|
||||
<!-- 工具条 -->
|
||||
<mk-toolbar @toolbarClick="toolbarClick"></mk-toolbar>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<vxe-toolbar ref="xToolbar" custom>
|
||||
<template #buttons>
|
||||
<a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
|
||||
</template>
|
||||
</vxe-toolbar>
|
||||
<!-- 表格区 -->
|
||||
<div class="gridPanel">
|
||||
<vxe-grid ref='xGrid' v-bind="options.gridOptions">
|
||||
<template #op="{ row }">
|
||||
<div class="oplinks">
|
||||
<a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
|
||||
<a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</vxe-grid>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
name: 'BasicPageList',
|
||||
props: {
|
||||
options: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
return {};
|
||||
|
||||
},
|
||||
|
||||
// 计算属性
|
||||
computed: {
|
||||
},
|
||||
|
||||
// 创建完成
|
||||
created() {
|
||||
|
||||
let _this = this;
|
||||
|
||||
this.$nextTick(() => { // 在下次 DOM 更新循环结束之后执行延迟回调
|
||||
// 将表格和工具栏进行关联
|
||||
this.$refs.xGrid.connect(this.$refs.xToolbar) // 将表格和工具栏进行关联
|
||||
});
|
||||
|
||||
|
||||
this.options.gridOptions.proxyConfig = { // 配置代理
|
||||
sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
|
||||
filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
|
||||
props: {
|
||||
result: this.options.listFieldName, // 配置响应结果列表字段
|
||||
total: 'total' // 配置响应结果总页数字段
|
||||
},
|
||||
// 接收Promise
|
||||
ajax: {
|
||||
// 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
|
||||
query: (options) => { // options 为当前表格的配置项
|
||||
const { page, sorts } = options; // 获取当前页码、每页条数、排序信息
|
||||
var params = {}; // 定义请求参数
|
||||
params.page = page.currentPage; // 当前页码
|
||||
params.limit = page.pageSize; // 每页条数
|
||||
params.order_bys = []; // 排序信息
|
||||
params.search_rules = _this.getSearchParms(); // 搜索信息
|
||||
if (sorts) { // 如果有排序信息
|
||||
sorts.forEach((v) => { // 遍历排序信息
|
||||
params.order_bys.push({ // 添加排序信息
|
||||
column: v.property, // 字段名
|
||||
order: v.order // 排序方式
|
||||
})
|
||||
});
|
||||
}
|
||||
return _this.loadData({ params }); // 返回请求结果
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
},
|
||||
// 挂载完成
|
||||
onLoad() {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
// 动作
|
||||
methods: {
|
||||
|
||||
|
||||
// =============================== 基于status进行开关 自动生成 Start ===============================
|
||||
|
||||
// =============================== 基于status进行开关 自动生成 End ===============================
|
||||
|
||||
// 修改日期
|
||||
onDateChange(date) { // 日期选择器事件
|
||||
if (date && date.length) { // 如果有值
|
||||
this.start_time = parseInt(date[0]._d.getTime() / 1000); // 将日期转换为时间戳
|
||||
this.end_time = parseInt(date[1]._d.getTime() / 1000); // 将日期转换为时间戳
|
||||
} else { // 如果没有值
|
||||
this.start_time = 0; // 将日期转换为时间戳
|
||||
this.end_time = 0; // 将日期转换为时间戳
|
||||
}
|
||||
},
|
||||
// 获取搜索参数
|
||||
getSearchParms() { // 获取搜索参数
|
||||
var rules = []; // 定义搜索参数
|
||||
let findMode = k => { // 查找搜索模式
|
||||
for (let i in this.searchRules) { // 遍历搜索规则
|
||||
if (this.searchRules[i].key == k) return this.searchRules[i].mode; // 如果找到了就返回搜索模式
|
||||
}
|
||||
return "equal"; // 如果没有找到就返回等于
|
||||
};
|
||||
|
||||
for (let key in this.options.searchFormData) { // 遍历搜索表单数据
|
||||
let value = this.options.searchFormData[key]; // 获取值
|
||||
if (value) { // 如果有值
|
||||
let mode = findMode(key); // 获取搜索模式
|
||||
if (mode == "like") { // 如果是模糊搜索
|
||||
value = "%" + value + "%"; // 如果是模糊搜索就在两边加上%
|
||||
}
|
||||
rules.push({ // 添加搜索参数
|
||||
column: key, // 字段名
|
||||
mode: mode, // 搜索模式
|
||||
value: value // 值
|
||||
});
|
||||
}
|
||||
}
|
||||
return rules; // 返回搜索参数
|
||||
},
|
||||
// 获取选中行
|
||||
getSelectdRow() { // 获取选中行
|
||||
let row = this.$refs.xGrid.getCurrentRecord(); // 获取当前行
|
||||
if (!row) { // 如果没有选中行
|
||||
let rows = this.$refs.xGrid.getCheckboxRecords(); // 获取选中行
|
||||
if (rows && rows.length) { row = rows[0]; } // 如果有选中行就取第一行
|
||||
}
|
||||
return row; // 返回选中行
|
||||
},
|
||||
// 加载数据
|
||||
loadData({ params }) {
|
||||
params.start_time = this.start_time; // 开始时间
|
||||
params.end_time = this.end_time; // 结束时间
|
||||
return this.$mk.getPagedData({
|
||||
url: this.options.actions.getList,
|
||||
data: params
|
||||
});
|
||||
},
|
||||
|
||||
// 工具栏点击事件 add / log / setting
|
||||
toolbarClick(e) {
|
||||
if (e.name == "add") { // 如果是添加
|
||||
|
||||
this.$openPage(this.options.addPageUrl); // 打开页面
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑
|
||||
pageEdit(row) {
|
||||
if (!row) { // 如果没有选中行
|
||||
this.$mk.msg("请选择行"); // 提示
|
||||
return; // 返回
|
||||
}
|
||||
this.$openPage(this.options.editPageUrl + row[this.keyName]); // 打开页面
|
||||
},
|
||||
|
||||
// 删除
|
||||
pageDelete(row) {
|
||||
let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords(); // 获取选中行
|
||||
let ids = []; // 定义id数组
|
||||
rows.forEach((row) => { // 遍历选中行
|
||||
ids.push(row[this.keyName]); // 将选择行的id添加到id数组
|
||||
});
|
||||
|
||||
if (!ids.length) { // 如果没有选中行
|
||||
this.$mk.error("请选择行"); // 提示
|
||||
return;
|
||||
}
|
||||
|
||||
this.$mk.confirm('您确定要删除吗？').then(type => { // 确认删除
|
||||
if (type == 'confirm') { // 如果确认删除
|
||||
this.$mk.post({
|
||||
url: this.options.actions.delete, // 请求删除数据地址
|
||||
loading: "删除中...", // 加载提示
|
||||
data: {
|
||||
ids: ids // 传递id数组
|
||||
},
|
||||
useBigInt: true
|
||||
}).then(() => { // 成功
|
||||
this.$mk.success("删除成功"); // 提示成功
|
||||
this.onSearch(); // 重新加载数据
|
||||
}).catch((a) => { // 失败
|
||||
this.$mk.error(a.data.msg); // 提示错误信息
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 搜索
|
||||
onSearch() {
|
||||
this.$refs.xGrid.commitProxy('query') // 提交搜索
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.page-body {
|
||||
padding: 30px;
|
||||
background: @base-bg-color;
|
||||
}
|
||||
|
||||
.gridPanel {
|
||||
height: calc(100vh - 400px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.oplinks svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,6 +17,8 @@ import XEUtils from 'xe-utils' // 加载xe-utils
|
|||
import MkFormUploader from './components/editors/MkFormUploader.vue'
|
||||
import MkFormEditor from './components/editors/MkFormEditor.vue'
|
||||
import hevueImgPreview from 'hevue-img-preview'
|
||||
import BasicPageList from './basic-pages/list.vue'
|
||||
import BasicPageEdit from './basic-pages/edit.vue'
|
||||
|
||||
// 创建一个下拉表格渲染
|
||||
VXETable.renderer.add('MkGridDataSelector', { // 创建一个下拉表格渲染
|
||||
|
|
@ -171,6 +173,10 @@ var mk = {
|
|||
Vue.component(MkFormEditor.name,MkFormEditor);
|
||||
Vue.component(MkFormCropper.name,MkFormCropper);
|
||||
Vue.component(MkFormInputShow.name,MkFormInputShow);
|
||||
Vue.component(BasicPageList.name,BasicPageList);
|
||||
Vue.component(BasicPageEdit.name,BasicPageEdit);
|
||||
|
||||
|
||||
|
||||
//图片预览组件
|
||||
//使用方法：this.$hevueImgPreview(url)
|
||||
|
|
|
|||
|
|
@ -1,37 +1,15 @@
|
|||
<template>
|
||||
<page-layout :desc="desc">
|
||||
<div class="page-body">
|
||||
|
||||
<vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
|
||||
:title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
|
||||
<!-- =========================== 自定义区域 Start ======================= -->
|
||||
|
||||
<!-- =========================== 自定义区域 End ======================= -->
|
||||
</vxe-form>
|
||||
|
||||
<div class="mk-toolbar" v-if="isEdit">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footerbar">
|
||||
<a-button type="primary" @click="ok">确定</a-button>
|
||||
<a-button @click="cancel">取消</a-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</page-layout>
|
||||
<basic-page-edit :desc="desc" :dataId="getDataId()" :options="pageOptions"></basic-page-edit>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BASE_URL from '@/services/mes/api.js';
|
||||
import PageLayout from '@/layouts/PageLayout'
|
||||
|
||||
|
||||
export default {
|
||||
|
||||
name: 'MesUnitUpdate',
|
||||
i18n: require('./i18n'),
|
||||
components: { PageLayout },
|
||||
components: {},
|
||||
props: {
|
||||
pageMode: {
|
||||
type: String,
|
||||
|
|
@ -39,11 +17,34 @@ export default {
|
|||
},
|
||||
dataId: {
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
|
||||
return {
|
||||
pageOptions: {}
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
desc() {
|
||||
return this.$t('editPageDesc')
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
created() {
|
||||
|
||||
this.optionsInit();
|
||||
this.dataInit();
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
|
||||
|
||||
|
||||
optionsInit() {
|
||||
// 页面数据变量
|
||||
var pageData = {
|
||||
// 当前项目名称
|
||||
|
|
@ -51,6 +52,11 @@ export default {
|
|||
// 当前项目ID
|
||||
currentBeid: 0,
|
||||
|
||||
addPageUrl: "/MesUnit/MesUnitAdd",
|
||||
editPageUrl: "/MesUnit/MesUnitUpdate/",
|
||||
listPageUrl: "/MesUnit/MesUnitList",
|
||||
|
||||
|
||||
uploadDefaultImg: null,
|
||||
|
||||
detailDataFieldName: "mes_unit",
|
||||
|
|
@ -136,20 +142,10 @@ export default {
|
|||
// 合并表单数据及配置
|
||||
pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);
|
||||
|
||||
return pageData;
|
||||
this.pageOptions = pageData;
|
||||
},
|
||||
|
||||
computed: {
|
||||
desc() {
|
||||
return this.$t('editPageDesc')
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
created() {
|
||||
|
||||
|
||||
|
||||
dataInit() {
|
||||
// 获取路由的id参数
|
||||
let dataId = this.getDataId();
|
||||
// 如果有id参数，说明是编辑模式
|
||||
|
|
@ -188,11 +184,7 @@ export default {
|
|||
})
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
|
||||
|
||||
// 获取路由的id参数
|
||||
getDataId() {
|
||||
|
|
@ -204,78 +196,6 @@ export default {
|
|||
dataId = 0;
|
||||
}
|
||||
return dataId;
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 返回
|
||||
back() {
|
||||
// 如果是新增模式，关闭当前页面
|
||||
if (!this.isEdit) {
|
||||
this.$closePage({
|
||||
closeRoute: "/MesUnit/MesUnitAdd"
|
||||
});
|
||||
} else {
|
||||
// 如果是编辑模式，关闭当前页面
|
||||
this.$closePage({
|
||||
closeRoute: "/MesUnit/MesUnitUpdate"
|
||||
});
|
||||
}
|
||||
// 打开列表页面
|
||||
this.$openPage('/MesUnit/MesUnitList')
|
||||
},
|
||||
|
||||
// 保存
|
||||
ok() {
|
||||
|
||||
let save = () => {
|
||||
|
||||
|
||||
// 如果是新增模式，提交新增接口 如果是编辑模式，提交编辑接口
|
||||
let action = !this.isEdit ? this.actions.create : this.actions.update;
|
||||
// 如果是新增模式，提交的数据中加入id 如果是编辑模式，提交的数据中不加入id
|
||||
let postdata = Object.assign({}, this.formOptions.data);
|
||||
// 如果是编辑模式
|
||||
if (this.isEdit) {
|
||||
// postdata = { MesUnit: postdata }
|
||||
}
|
||||
// 格式化提交的数据
|
||||
this.$mk.formatFormData({ data: postdata, rules: this.formOptions.items });
|
||||
|
||||
|
||||
// 提交数据
|
||||
this.$mk.post({
|
||||
url: action,
|
||||
loading: "保存中...",
|
||||
data: postdata,
|
||||
useBigInt: true,
|
||||
}).then(() => { // 成功回调
|
||||
this.$mk.success("保存成功");
|
||||
if (!this.isEdit) { // 如果是新增模式，关闭当前页面
|
||||
this.back();
|
||||
}
|
||||
}).catch((a) => { // 失败回调
|
||||
this.$mk.error(a.data.msg); // 显示错误信息
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
// 验证表单
|
||||
this.$mk.validateForm({ form: this.$refs.xForm }).then(() => { // 验证表单
|
||||
save(); // 提交保存
|
||||
}).catch(count => { // 验证失败
|
||||
this.$mk.error(`存在${count}项错误，请检查`);
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
// 取消 返回
|
||||
cancel() {
|
||||
this.back();
|
||||
}
|
||||
},
|
||||
// 监听属性
|
||||
|
|
@ -286,34 +206,3 @@ export default {
|
|||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="less">
|
||||
.page-body {
|
||||
padding: 30px;
|
||||
background: @base-bg-color;
|
||||
}
|
||||
|
||||
.formtabs .ant-tabs-tabpane {
|
||||
/* background: white; */
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.gridPanel {
|
||||
height: calc(100vh - 600px);
|
||||
}
|
||||
|
||||
.footerbar {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.imagePanel {
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
width: 100px;
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,79 +1,46 @@
|
|||
<template>
|
||||
<div class="page-body">
|
||||
|
||||
<a-row type="flex">
|
||||
<a-col :flex="$mk.config.ui.searchFlex">
|
||||
<!-- 搜索区 -->
|
||||
<vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch">
|
||||
<template #date="{}">
|
||||
<a-form-item label="创建时间" :style="{ display: 'inline-block', width: 120 }">
|
||||
</a-form-item>
|
||||
<a-form-item :style="{ display: 'inline-block', width: 'calc(100% - 120px )' }">
|
||||
<a-range-picker @change="onDateChange" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
</vxe-form>
|
||||
</a-col>
|
||||
<a-col :flex="$mk.config.ui.toolbarFlex">
|
||||
<!-- 工具条 -->
|
||||
<mk-toolbar @toolbarClick="toolbarClick"></mk-toolbar>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
|
||||
|
||||
|
||||
<vxe-toolbar ref="xToolbar" custom>
|
||||
<template #buttons>
|
||||
<a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
|
||||
</template>
|
||||
</vxe-toolbar>
|
||||
<!-- 表格区 -->
|
||||
<div class="gridPanel">
|
||||
<vxe-grid ref='xGrid' v-bind="gridOptions">
|
||||
|
||||
<!-- =============================== 表格列 自动生成 Start =============================== -->
|
||||
|
||||
<!-- =============================== 表格列 自动生成 End =============================== -->
|
||||
|
||||
<template #op="{ row }">
|
||||
<div class="oplinks">
|
||||
<a @click.stop="pageEdit(row)" title="编辑"><a-icon type="edit" /></a>
|
||||
<a @click.stop="pageDelete(row)" title="删除"><a-icon type="delete" /></a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</vxe-grid>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<basic-page-list :desc="desc" :options="pageOptions"></basic-page-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BASE_URL from '@/services/mes/api.js';
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
name: 'MesUnitList',
|
||||
i18n: require('./i18n'), // 国际化
|
||||
i18n: require("./i18n"),
|
||||
props: {
|
||||
pageMode: {
|
||||
type: String,
|
||||
default: "edit"
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageOptions: {}
|
||||
};
|
||||
},
|
||||
// 计算属性
|
||||
computed: {
|
||||
// 页面描述
|
||||
desc() {
|
||||
return this.$t("pageDesc");
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
const listFieldName = 'MesUnit';
|
||||
// 创建完成
|
||||
created() {
|
||||
this.optionsInit();
|
||||
},
|
||||
// 动作
|
||||
methods: {
|
||||
|
||||
optionsInit() {
|
||||
// 页面数据
|
||||
var pageData = { // 页面数据变量
|
||||
|
||||
keyName: 'id', // 主键字段名
|
||||
listFieldName: 'MesUnit',
|
||||
|
||||
addPageUrl: "/MesUnit/MesUnitAdd",
|
||||
editPageUrl: "/MesUnit/MesUnitUpdate/",
|
||||
|
||||
// 接口动作
|
||||
actions: { // Api 接口地址
|
||||
|
|
@ -126,57 +93,16 @@ export default {
|
|||
stripe: true, // 启用斑马纹
|
||||
id: 'datagrid_1', // 表格唯一标识
|
||||
|
||||
// 接口获取数据
|
||||
proxyConfig: { // 配置代理
|
||||
sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
|
||||
filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
|
||||
props: {
|
||||
result: listFieldName, // 配置响应结果列表字段
|
||||
total: 'total' // 配置响应结果总页数字段
|
||||
},
|
||||
// 接收Promise
|
||||
ajax: {
|
||||
// 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
|
||||
query: (options) => { // options 为当前表格的配置项
|
||||
const { page, sorts } = options; // 获取当前页码、每页条数、排序信息
|
||||
var params = {}; // 定义请求参数
|
||||
params.page = page.currentPage; // 当前页码
|
||||
params.limit = page.pageSize; // 每页条数
|
||||
params.order_bys = []; // 排序信息
|
||||
params.search_rules = this.getSearchParms(); // 搜索信息
|
||||
if (sorts) { // 如果有排序信息
|
||||
sorts.forEach((v) => { // 遍历排序信息
|
||||
params.order_bys.push({ // 添加排序信息
|
||||
column: v.property, // 字段名
|
||||
order: v.order // 排序方式
|
||||
})
|
||||
});
|
||||
}
|
||||
return this.loadData({ params }); // 返回请求结果
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 表格列配置
|
||||
columns: [
|
||||
{ type: 'checkbox', width: 50 }, // 多选框
|
||||
|
||||
|
||||
// =============================== 表格列 自动生成 Start ===============================
|
||||
{ title: '操作', slots: { default: 'op' }, width: 120 },
|
||||
|
||||
{ field: 'code', sortable: true, title: '编码', width: 250 }, // 编码
|
||||
{ field: 'title', sortable: true, title: '单位名称', width: 250 }, // 单位名称
|
||||
{ field: 'name', sortable: true, title: '单位英文名称', width: 250 }, // 单位英文名称
|
||||
{ field: 'create_uid', sortable: true, title: '创建人', width: 80 }, // 创建人
|
||||
{ field: 'update_uid', sortable: true, title: '更新人', width: 80 }, // 更新人
|
||||
{ field: 'create_time', formatter: 'formatDate', width: 160, sortable: true, title: '创建时间', showHeaderOverflow: true }, // 创建时间
|
||||
{ field: 'update_time', formatter: 'formatDate', width: 160, sortable: true, title: '更新时间', showHeaderOverflow: true }, // 更新时间
|
||||
|
||||
// =============================== 表格列 自动生成 Start ===============================
|
||||
|
||||
|
||||
{ title: '操作', slots: { default: 'op' }, width: 120 }
|
||||
]
|
||||
}
|
||||
|
||||
|
|
@ -186,168 +112,15 @@ export default {
|
|||
pageData.actions.delete = pageData.actions.MesUnitBatchDelete;
|
||||
pageData.gridOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridOptions); // 合并表格数据
|
||||
|
||||
return pageData; // 返回页面数据
|
||||
},
|
||||
|
||||
// 计算属性
|
||||
computed: {
|
||||
// 页面描述
|
||||
desc() {
|
||||
return this.$t('pageDesc')
|
||||
}
|
||||
},
|
||||
|
||||
// 创建完成
|
||||
created() {
|
||||
this.$nextTick(() => { // 在下次 DOM 更新循环结束之后执行延迟回调
|
||||
// 将表格和工具栏进行关联
|
||||
this.$refs.xGrid.connect(this.$refs.xToolbar) // 将表格和工具栏进行关联
|
||||
});
|
||||
},
|
||||
// 挂载完成
|
||||
onLoad() {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
// 动作
|
||||
methods: {
|
||||
|
||||
|
||||
// =============================== 基于status进行开关 自动生成 Start ===============================
|
||||
|
||||
// =============================== 基于status进行开关 自动生成 End ===============================
|
||||
|
||||
// 修改日期
|
||||
onDateChange(date) { // 日期选择器事件
|
||||
if (date && date.length) { // 如果有值
|
||||
this.start_time = parseInt(date[0]._d.getTime() / 1000); // 将日期转换为时间戳
|
||||
this.end_time = parseInt(date[1]._d.getTime() / 1000); // 将日期转换为时间戳
|
||||
} else { // 如果没有值
|
||||
this.start_time = 0; // 将日期转换为时间戳
|
||||
this.end_time = 0; // 将日期转换为时间戳
|
||||
}
|
||||
},
|
||||
// 获取搜索参数
|
||||
getSearchParms() { // 获取搜索参数
|
||||
var rules = []; // 定义搜索参数
|
||||
let findMode = k => { // 查找搜索模式
|
||||
for (let i in this.searchRules) { // 遍历搜索规则
|
||||
if (this.searchRules[i].key == k) return this.searchRules[i].mode; // 如果找到了就返回搜索模式
|
||||
}
|
||||
return "equal"; // 如果没有找到就返回等于
|
||||
};
|
||||
|
||||
for (let key in this.searchFormData) { // 遍历搜索表单数据
|
||||
let value = this.searchFormData[key]; // 获取值
|
||||
if (value) { // 如果有值
|
||||
let mode = findMode(key); // 获取搜索模式
|
||||
if (mode == "like") { // 如果是模糊搜索
|
||||
value = "%" + value + "%"; // 如果是模糊搜索就在两边加上%
|
||||
}
|
||||
rules.push({ // 添加搜索参数
|
||||
column: key, // 字段名
|
||||
mode: mode, // 搜索模式
|
||||
value: value // 值
|
||||
});
|
||||
}
|
||||
}
|
||||
return rules; // 返回搜索参数
|
||||
},
|
||||
// 获取选中行
|
||||
getSelectdRow() { // 获取选中行
|
||||
let row = this.$refs.xGrid.getCurrentRecord(); // 获取当前行
|
||||
if (!row) { // 如果没有选中行
|
||||
let rows = this.$refs.xGrid.getCheckboxRecords(); // 获取选中行
|
||||
if (rows && rows.length) { row = rows[0]; } // 如果有选中行就取第一行
|
||||
}
|
||||
return row; // 返回选中行
|
||||
},
|
||||
// 加载数据
|
||||
loadData({ params }) {
|
||||
params.start_time = this.start_time; // 开始时间
|
||||
params.end_time = this.end_time; // 结束时间
|
||||
return this.$mk.getPagedData({ url: this.actions.getList, data: params }); // 获取分页数据
|
||||
},
|
||||
|
||||
// 工具栏点击事件 add / log / setting
|
||||
toolbarClick(e) {
|
||||
if (e.name == "add") { // 如果是添加
|
||||
this.$openPage("/MesUnit/MesUnitAdd"); // 打开页面
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑
|
||||
pageEdit(row) {
|
||||
if (!row) { // 如果没有选中行
|
||||
this.$mk.msg("请选择行"); // 提示
|
||||
return; // 返回
|
||||
}
|
||||
this.$openPage("/MesUnit/MesUnitUpdate/" + row[this.keyName]); // 打开页面
|
||||
},
|
||||
|
||||
// 删除
|
||||
pageDelete(row) {
|
||||
let rows = row ? [row] : this.$refs.xGrid.getCheckboxRecords(); // 获取选中行
|
||||
let ids = []; // 定义id数组
|
||||
rows.forEach((row) => { // 遍历选中行
|
||||
ids.push(row[this.keyName]); // 将选择行的id添加到id数组
|
||||
});
|
||||
|
||||
if (!ids.length) { // 如果没有选中行
|
||||
this.$mk.error("请选择行"); // 提示
|
||||
return;
|
||||
}
|
||||
|
||||
this.$mk.confirm('您确定要删除吗？').then(type => { // 确认删除
|
||||
if (type == 'confirm') { // 如果确认删除
|
||||
this.$mk.post({
|
||||
url: this.actions.delete, // 请求删除数据地址
|
||||
loading: "删除中...", // 加载提示
|
||||
data: {
|
||||
ids: ids // 传递id数组
|
||||
},
|
||||
useBigInt : true
|
||||
}).then(() => { // 成功
|
||||
this.$mk.success("删除成功"); // 提示成功
|
||||
this.onSearch(); // 重新加载数据
|
||||
}).catch((a) => { // 失败
|
||||
this.$mk.error(a.data.msg); // 提示错误信息
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 搜索
|
||||
onSearch() {
|
||||
this.$refs.xGrid.commitProxy('query') // 提交搜索
|
||||
this.pageOptions = pageData;
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
// 监听属性
|
||||
watch: {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.page-body {
|
||||
padding: 30px;
|
||||
background: @base-bg-color;
|
||||
}
|
||||
|
||||
.gridPanel {
|
||||
height: calc(100vh - 400px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.oplinks svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,7 +14,7 @@ const MesUnitRouterMap = {
|
|||
MesUnit:{
|
||||
name: '单位管理',
|
||||
icon: 'idcard',
|
||||
component: view.page,
|
||||
component: view.blank,
|
||||
meta: {
|
||||
},
|
||||
authority: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue