335 lines
8.8 KiB
Vue
335 lines
8.8 KiB
Vue
<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>
|
||
</template>
|
||
|
||
<script>
|
||
import BASE_URL from '@/services/Middle/bathroom/BathroomFittings/api.js';
|
||
import PageLayout from '@/layouts/PageLayout'
|
||
|
||
|
||
export default {
|
||
|
||
name: 'BathroomFittingsLogUpdate',
|
||
i18n: require('./i18n'),
|
||
components: { PageLayout },
|
||
props: {
|
||
pageMode: {
|
||
type: String,
|
||
default: "edit"
|
||
},
|
||
dataId: {
|
||
}
|
||
|
||
},
|
||
|
||
data() {
|
||
|
||
// 页面数据变量
|
||
var pageData = {
|
||
// 当前项目名称
|
||
currentConfigName: "",
|
||
// 当前项目ID
|
||
currentBeid: 0,
|
||
|
||
uploadDefaultImg: null,
|
||
detailDataFieldName: "bathroom_fittings",
|
||
|
||
actions: {
|
||
// =============================== 接口地址 自动生成 Start ===============================
|
||
LogList: `${BASE_URL.BASE_URL}/BathroomFittings/v1/log/list`, // 操作日志列表
|
||
LogDetail: `${BASE_URL.BASE_URL}/BathroomFittings/v1/log/detail`, // 操作日志详情
|
||
|
||
// =============================== 接口地址 自动生成 End ===============================
|
||
},
|
||
|
||
keyName: 'id',
|
||
// 是否编辑模式
|
||
isEdit: false,
|
||
// 表单数据
|
||
formOptions: {
|
||
data: {
|
||
// =============================== 表单数据 自动生成 Start ===============================
|
||
|
||
company_id: 0,
|
||
store_id: 0,
|
||
uid: 0,
|
||
target_uid: 0,
|
||
service: "",
|
||
module: "",
|
||
type: "",
|
||
content: "",
|
||
create_time: new Date(2100, 1, 1).getTime() / 10000,
|
||
update_time: new Date(2100, 1, 1).getTime() / 10000,
|
||
|
||
// =============================== 表单数据 自动生成 End ===============================
|
||
},
|
||
// 标题宽度
|
||
titleWidth: 100,
|
||
// 标题对齐方式
|
||
titleAlign: 'right',
|
||
|
||
// 表单校验规则
|
||
rules: {
|
||
// =============================== 表单校验 自动生成 Start ===============================
|
||
|
||
company_id: [
|
||
{ required: true, message: '请输入公司ID' }
|
||
],
|
||
store_id: [
|
||
{ required: true, message: '请输入门店ID' }
|
||
],
|
||
uid: [
|
||
{ required: true, message: '请输入用户ID' }
|
||
],
|
||
target_uid: [
|
||
{ required: true, message: '请输入目标用户ID' }
|
||
],
|
||
service: [
|
||
{ required: true, message: '请输入服务名称' }
|
||
],
|
||
module: [
|
||
{ required: true, message: '请输入模块名称' }
|
||
],
|
||
type: [
|
||
{ required: true, message: '请输入日志类型' }
|
||
],
|
||
content: [
|
||
{ required: true, message: '请输入日志内容' }
|
||
],
|
||
|
||
// =============================== 表单校验 自动生成 End ===============================
|
||
},
|
||
// 表单项
|
||
items: [
|
||
// =============================== 表单项 自动生成 Start ===============================
|
||
|
||
{ field: 'company_id', title: '公司ID', span: 12, itemRender: { name: '$input' } },
|
||
{ field: 'store_id', title: '门店ID', span: 12, itemRender: { name: '$input' } },
|
||
{ field: 'uid', title: '用户ID', span: 12, itemRender: { name: '$input' } },
|
||
{ field: 'target_uid', title: '目标用户ID', span: 12, itemRender: { name: '$input' } },
|
||
{ field: 'service', title: '服务名称', span: 12, itemRender: { name: '$input' } },
|
||
{ field: 'module', title: '模块名称', span: 12, itemRender: { name: '$input' } },
|
||
{ field: 'type', title: '日志类型', span: 12, itemRender: { name: '$input' } },
|
||
{ field: 'content', title: '日志内容', span: 12, itemRender: { name: '$input' } },
|
||
|
||
// =============================== 表单项 自动生成 End ===============================
|
||
]
|
||
},
|
||
// 新增模式表单项
|
||
addModeItems: [
|
||
|
||
],
|
||
|
||
|
||
};
|
||
|
||
pageData.actions.get = pageData.actions.BathroomFittingsDetail;
|
||
pageData.actions.create = pageData.actions.BathroomFittingsCreate;
|
||
pageData.actions.update = pageData.actions.BathroomFittingsUpdate;
|
||
|
||
// 合并表单数据及配置
|
||
pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);
|
||
|
||
return pageData;
|
||
},
|
||
|
||
computed: {
|
||
desc() {
|
||
return this.$t('editPageDesc')
|
||
}
|
||
},
|
||
|
||
|
||
created() {
|
||
|
||
|
||
// 获取路由的id参数
|
||
let dataId = this.getDataId();
|
||
|
||
// 如果有id参数，说明是编辑模式
|
||
if (dataId) {
|
||
const json = `{"id":${dataId}}`;
|
||
this.$mk.post({
|
||
url: this.actions.get,
|
||
loading: "加载中...",
|
||
data: json,
|
||
config: {
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
}
|
||
}
|
||
}).then(a => {
|
||
// =============================== 时间字段判断 自动生成 Start ===============================
|
||
|
||
if(a.data[this.detailDataFieldName].create_time){
|
||
a.data[this.detailDataFieldName].create_time = new Date(a.data[this.detailDataFieldName].create_time * 1000);
|
||
}
|
||
if(a.data[this.detailDataFieldName].update_time){
|
||
a.data[this.detailDataFieldName].update_time = new Date(a.data[this.detailDataFieldName].update_time * 1000);
|
||
}
|
||
|
||
// =============================== 时间字段判断 自动生成 End ===============================
|
||
this.formOptions.data = a.data[this.detailDataFieldName];
|
||
}).catch((a) => {
|
||
this.$mk.error(a.data.msg);
|
||
});
|
||
|
||
this.isEdit = true;
|
||
} else {
|
||
// 如果没有id参数，说明是新增模式
|
||
if(this.addModeItems){
|
||
this.addModeItems.forEach(item => {
|
||
this.pageOptions.formOptions.items.push(item);
|
||
})
|
||
}
|
||
|
||
}
|
||
|
||
},
|
||
// 函数
|
||
methods: {
|
||
|
||
|
||
// 获取路由的id参数
|
||
getDataId() {
|
||
let dataId = this.dataId;
|
||
if (this.$route.params.id) {
|
||
dataId = this.$route.params.id;
|
||
}
|
||
if (!dataId) {
|
||
dataId = 0;
|
||
}
|
||
return dataId;
|
||
},
|
||
|
||
|
||
|
||
// 返回
|
||
back() {
|
||
// 如果是新增模式，关闭当前页面
|
||
if (!this.isEdit) {
|
||
this.$closePage({
|
||
closeRoute: "/BathroomFittings/BathroomFittingsLogAdd"
|
||
});
|
||
} else {
|
||
// 如果是编辑模式，关闭当前页面
|
||
this.$closePage({
|
||
closeRoute: "/BathroomFittings/BathroomFittingsLogUpdate"
|
||
});
|
||
}
|
||
// 打开列表页面
|
||
this.$openPage('/BathroomFittings/BathroomFittingsLogList')
|
||
},
|
||
|
||
// 保存
|
||
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 = { BathroomFittingsLog: 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();
|
||
}
|
||
},
|
||
// 监听属性
|
||
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>
|