Mes
/
middle-admin-ant
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

This commit is contained in:
zxx 2024-03-19 17:35:03 +08:00
parent 3b88ecc5ba
commit 7495adc53e
16 changed files with 928 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -15,6 +15,7 @@
},
"dependencies": {
"@antv/data-set": "^0.11.4",
"@form-create/ant-design-vue": "^2.5.34",
"animate.css": "^4.1.0",
"ant-design-vue": "^1.7.2",
"axios": "^0.19.2",

36
src/application/mk/basic-pages/edit.vue
View File

@ -1,9 +1,14 @@
<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
: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">
@ -12,8 +17,6 @@
</div>
</div>
</template>
@ -28,8 +31,7 @@ export default {
options: {
type: Object
},
dataId: {
}
dataId: {}
},
@ -43,8 +45,7 @@ export default {
};
},
computed: {
},
computed: {},
created() {
@ -73,13 +74,13 @@ export default {
// 打开列表页面
this.$openPage(this.options.listPageUrl)
} else {
this.$emit("callback", { success: true });
this.$emit("callback", {success: true});
}
},
// 保存
save({ afterSave }) {
save({afterSave}) {
let _this = this;
@ -98,7 +99,11 @@ export default {
// postdata = { MesUnit: postdata }
}
// 格式化提交的数据
this.$mk.formatFormData({ data: postdata, rules: this.options.formOptions.items ,igFields : this.options.saveIgFields });
this.$mk.formatFormData({
data: postdata,
rules: this.options.formOptions.items,
igFields: this.options.saveIgFields
});
// 提交数据
@ -114,7 +119,7 @@ export default {
if (a.code == 200) {
this.$mk.success("保存成功");
this.$emit("afterSave", { data: postdata });
this.$emit("afterSave", {data: postdata});
if (!this.isEdit) { // 如果是新增模式，关闭当前页面
if (this.options.action_afterSave == "confirm") {
@ -150,7 +155,7 @@ export default {
// 验证表单
this.$mk.validateForm({ form: this.$refs.xForm }).then(() => { // 验证表单
this.$mk.validateForm({form: this.$refs.xForm}).then(() => { // 验证表单
save(); // 提交保存
}).catch(count => { // 验证失败
this.$mk.error(`存在${count}项错误，请检查`);
@ -170,8 +175,7 @@ export default {
}
},
// 监听属性
watch: {
}
watch: {}
};
</script>

59
src/components/zk/input/Cascader.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<a-cascader
:options="options"
:display-render="displayRender"
expand-trigger="hover"
placeholder="Please select"
@change="onChange"
/>
</template>
<script>
export default {
data() {
return {
options: [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
],
};
},
methods: {
onChange(value) {
console.log(value);
},
displayRender({labels}) {
return labels[labels.length - 1];
},
},
};
</script>

14
src/components/zk/input/Checkbox.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<a-checkbox @change="onChange">
Checkbox
</a-checkbox>
</template>
<script>
export default {
methods: {
onChange(e) {
console.log(`checked = ${e.target.checked}`);
},
},
};
</script>

131
src/components/zk/input/Transfer.vue Normal file
View File

@ -0,0 +1,131 @@
<template>
<div>
<a-transfer
:data-source="mockData"
:target-keys="targetKeys"
:disabled="disabled"
:show-search="showSearch"
:filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
:show-select-all="false"
@change="onChange"
>
<template
slot="children"
slot-scope="{
props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
on: { itemSelectAll, itemSelect },
}"
>
<a-table
:row-selection="
getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })
"
:columns="direction === 'left' ? leftColumns : rightColumns"
:data-source="filteredItems"
size="small"
:style="{ pointerEvents: listDisabled ? 'none' : null }"
:custom-row="
({ key, disabled: itemDisabled }) => ({
on: {
click: () => {
if (itemDisabled || listDisabled) return;
itemSelect(key, !selectedKeys.includes(key));
},
},
})
"
/>
</template>
</a-transfer>
<a-switch
un-checked-children="disabled"
checked-children="disabled"
:checked="disabled"
style="margin-top: 16px"
@change="triggerDisable"
/>
<a-switch
un-checked-children="showSearch"
checked-children="showSearch"
:checked="showSearch"
style="margin-top: 16px"
@change="triggerShowSearch"
/>
</div>
</template>
<script>
import difference from 'lodash/difference';
const mockData = [];
for (let i = 0; i < 20; i++) {
mockData.push({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`,
disabled: i % 4 === 0,
});
}
const originTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
const leftTableColumns = [
{
dataIndex: 'title',
title: 'Name',
},
{
dataIndex: 'description',
title: 'Description',
},
];
const rightTableColumns = [
{
dataIndex: 'title',
title: 'Name',
},
];
export default {
data() {
return {
mockData,
targetKeys: originTargetKeys,
disabled: false,
showSearch: false,
leftColumns: leftTableColumns,
rightColumns: rightTableColumns,
};
},
methods: {
onChange(nextTargetKeys) {
this.targetKeys = nextTargetKeys;
},
triggerDisable(disabled) {
this.disabled = disabled;
},
triggerShowSearch(showSearch) {
this.showSearch = showSearch;
},
getRowSelection({disabled, selectedKeys, itemSelectAll, itemSelect}) {
return {
getCheckboxProps: item => ({props: {disabled: disabled || item.disabled}}),
onSelectAll(selected, selectedRows) {
const treeSelectedKeys = selectedRows
.filter(item => !item.disabled)
.map(({key}) => key);
const diffKeys = selected
? difference(treeSelectedKeys, selectedKeys)
: difference(selectedKeys, treeSelectedKeys);
itemSelectAll(diffKeys, selected);
},
onSelect({key}, selected) {
itemSelect(key, selected);
},
selectedRowKeys: selectedKeys,
};
},
},
};
</script>

18
src/components/zk/zkTableList.md
View File

@ -1,13 +1,13 @@
<ZkTableList
:ListUrl="this.$data.actions.TruckSearch"
:ListUrlData="this.$data.zkSelectData"
:ListFieldName="this.$data.zkSelectDataFieldName"
:DetailUrl="this.$data.actions.TruckDetail"
:AddUrl="this.$data.actions.TruckCreate"
:UpdateUrl="this.$data.actions.TruckUpdate"
:DeleteUrl="this.$data.actions.TruckBatchDelete"
:FormConfig="this.$data.zkSelectFormConfig"
:Columns="this.$data.columns"
:ListUrl="this.$data.actions.TruckSearch" // 列表请求地址
:ListUrlData="this.$data.zkSelectData" // 列表请求参数
:ListFieldName="this.$data.zkSelectDataFieldName" // 列表请求参数字段名
:DetailUrl="this.$data.actions.TruckDetail" // 详情请求地址
:AddUrl="this.$data.actions.TruckCreate" // 新增请求地址
:UpdateUrl="this.$data.actions.TruckUpdate" // 修改请求地址
:DeleteUrl="this.$data.actions.TruckBatchDelete" // 删除请求地址
:FormConfig="this.$data.zkSelectFormConfig" // 表单配置
:Columns="this.$data.columns" // 表格列配置
>
</ZkTableList>

55
src/pages/Middle/transport/Custom/Custom/Edit.vue
View File

@ -1,5 +1,5 @@
<template>
<basic-page-edit :desc="desc" :dataId="getDataId()" :options="pageOptions"></basic-page-edit>
<basic-page-edit :dataId="getDataId()" :options="pageOptions"></basic-page-edit>
</template>
<script>
@ -89,7 +89,7 @@ export default {
code: "",
name: "",
description: "",
type: "",
type: "0",
level: "",
source: "",
industry: "",
@ -165,20 +165,37 @@ export default {
items: [
// =============================== 表单项 自动生成 Start ===============================
{field: 'code', title: '编码', span: 12, itemRender: {name: '$input'}},
{field: 'name', title: '名称', span: 12, itemRender: {name: '$input'}},
{field: 'description', title: '描述', span: 24, itemRender: {name: '$input'}},
{field: 'type', title: '客户类型', span: 6, itemRender: {name: '$input'}},
{field: 'level', title: '客户等级', span: 6, itemRender: {name: '$input'}},
{field: 'source', title: '客户来源', span: 6, itemRender: {name: '$input'}},
{field: 'industry', title: '客户行业', span: 6, itemRender: {name: '$input'}},
{field: 'area', title: '客户区域', span: 6, itemRender: {name: '$input'}},
{field: 'contact', title: '客户联系人', span: 6, itemRender: {name: '$input'}},
{field: 'contact_phone', title: '客户联系人电话', span: 6, itemRender: {name: '$input'}},
{field: 'contact_position', title: '客户联系人职位', span: 6, itemRender: {name: '$input'}},
{field: 'address', title: '客户地址', span: 24, itemRender: {name: '$input'}},
{field: 'remark', title: '备注', span: 12, itemRender: {name: '$input'}},
{field: 'status', title: '状态', span: 12, itemRender: {name: '$select',}},
{field: 'code', title: '编码', span: 12, itemRender: {name: '$input'}},
{
field: 'type',
title: '客户类型',
span: 6,
itemRender: {
name: '$select', options: [
{label: '客户', value: '0'},
{label: '供应商', value: '1'}
]
}
},
{field: 'industry', title: '客户行业', span: 12, itemRender: {name: '$input'}},
{field: 'description', title: '描述', span: 24, itemRender: {name: '$textarea'}},
{field: 'contact', title: '客户联系人', span: 8, itemRender: {name: '$input'}},
{field: 'contact_phone', title: '客户联系人电话', span: 8, itemRender: {name: '$input'}},
{field: 'contact_position', title: '客户联系人职位', span: 8, itemRender: {name: '$input'}},
{field: 'address', title: '客户地址', span: 18, itemRender: {name: '$input'}},
{field: 'remark', title: '备注', span: 24, itemRender: {name: '$textarea'}},
{
field: 'status',
title: '客户状态',
span: 6,
itemRender: {
name: '$select', options: [
{label: '正常', value: 0},
{label: '停用', value: 1}
]
}
},
// =============================== 表单项 自动生成 End ===============================
]
@ -242,9 +259,11 @@ export default {
this.$forceUpdate()
} else {
// 如果没有id参数，说明是新增模式
this.addModeItems.forEach(item => {
this.pageOptions.formOptions.items.push(item);
})
if (this.addModeItems) {
this.addModeItems.forEach(item => {
this.pageOptions.formOptions.items.push(item);
})
}
}
},

10
src/pages/Middle/transport/Custom/Custom/List.vue
View File

@ -174,16 +174,10 @@ export default {
{field: 'code', sortable: true, title: '编码', width: 250}, // 编码
{field: 'name', sortable: true, title: '名称', width: 250}, // 名称
{field: 'description', sortable: true, title: '描述', width: 250}, // 描述
{field: 'type', sortable: true, title: '客户类型', width: 250}, // 客户类型
{field: 'level', sortable: true, title: '客户等级', width: 250}, // 客户等级
{field: 'source', sortable: true, title: '客户来源', width: 250}, // 客户来源
{field: 'industry', sortable: true, title: '客户行业', width: 250}, // 客户行业
{field: 'area', sortable: true, title: '客户区域', width: 250}, // 客户区域
{field: 'address', sortable: true, title: '客户地址', width: 250}, // 客户地址
{field: 'type', sortable: true, title: '客户类型', width: 150}, // 客户类型
{field: 'industry', sortable: true, title: '客户行业', width: 150}, // 客户行业
{field: 'contact', sortable: true, title: '客户联系人', width: 250}, // 客户联系人
{field: 'contact_phone', sortable: true, title: '客户联系人电话', width: 250}, // 客户联系人电话
{field: 'contact_position', sortable: true, title: '客户联系人职位', width: 250}, // 客户联系人职位
{field: 'total_ton', sortable: true, title: '总计交易吨数', width: 250}, // 总计交易吨数
{field: 'total_count', sortable: true, title: '总计交易次数', width: 250}, // 总计交易次数
{field: 'last_time', sortable: true, title: '最后交易时间', width: 250}, // 最后交易时间

4
src/pages/Middle/transport/Maintenance/MaintenanceGiornaleLog/Edit.vue
View File

@ -1,5 +1,5 @@
<template>
<page-layout :desc="desc">
<page-layout>
<div class="page-body">
<vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
@ -271,7 +271,7 @@ export default {
// 如果是新增模式，提交新增接口 如果是编辑模式，提交编辑接口
let action = !this.isEdit ? this.actions.create : this.actions.update;
let action = !this.isEdit ? this.actions.MaintenanceGiornaleLogCreate : this.actions.MaintenanceGiornaleLogUpdate;
// 如果是新增模式，提交的数据中加入id 如果是编辑模式，提交的数据中不加入id
let postdata = Object.assign({}, this.formOptions.data);
// 如果是编辑模式

4
src/pages/Middle/transport/OilConsumption/OilConsumption/Edit.vue
View File

@ -55,8 +55,8 @@ export default {
listPageUrl: "/OilConsumption/OilConsumptionList",
uploadDefaultImg: null,
detailDataFieldName: "OilConsumption",
uploadDefaultImg: null, // 上传默认图片
detailDataFieldName: "OilConsumption", // 详情数据字段名称
actions: {
// =============================== 接口地址 自动生成 Start ===============================

16
src/pages/Middle/transport/Truck/Truck/Detail.vue
View File

@ -51,21 +51,15 @@
</a-descriptions>
<ZkTable
:ListUrl="this.$data.actions.TruckSearch"
:ListUrlData="this.$data.zkSelectData"
:ListFieldName="this.$data.zkSelectDataFieldName"
:Columns="this.$data.columns"
>
</ZkTable>
</div>
</template>
<script>
import ZkTable from "@/components/zk/zkTable.vue";
// import ZkTable from "@/components/zk/zkTable.vue";
export default {
components: {ZkTable},
components: {
// ZkTable
},
props: {
dataId: {
type: String
@ -107,6 +101,8 @@ export default {
}
}
}).then(a => {
console.log("a", a)
console.log("this.pageOptions.ApiUrl", this.pageOptions.ApiUrl)
this.data = a.data[this.pageOptions.FieldName];
}).catch((a) => {
this.$mk.error(a.msg, "aaa");

13
src/pages/Middle/transport/Truck/Truck/Edit.vue
View File

@ -1,14 +1,22 @@
<template>
<basic-page-edit :dataId="getDataId()" :options="pageOptions" @afterSave="afterSave"></basic-page-edit>
<div>
<basic-page-edit :dataId="getDataId()" :options="pageOptions" @afterSave="afterSave"></basic-page-edit>
<Update :options="pageOptions"></Update>
</div>
</template>
<script>
import Update from "@/pages/Middle/transport/Truck/Truck/Update.vue";
export default {
// i18n: require('./i18n'),
components: {},
components: {
Update
},
props: {
pageMode: {
type: String,
@ -185,6 +193,7 @@ export default {
this.pageOptions = pageData;
},
// 初始化数据
dataInit() {
// 获取路由的id参数
let dataId = this.getDataId();

17
src/pages/Middle/transport/Truck/Truck/List.vue
View File

@ -17,17 +17,18 @@
>
</ZkTableList>
</div>
</template>
<script>
import ZkTableList from "@/components/zk/zkTableList";
import ZkTableList from "./zkTableList";
// import ZkSelectSearch from "@/components/zk/zkSelectSearch.vue";
export default {
name: 'TruckList',
i18n: require('./i18n'), // 国际化
components: {
// ZkSelectSearch,
ZkTableList,
},
data() {
@ -43,6 +44,11 @@ export default {
],
},
zkSelectDataFieldName: 'Truck',
zkBackFieldNames: ['id', 'name', 'code', 'create_time'],
//=================================================================================================
zkSelectFormConfig: {
data: {
name: '',
@ -119,7 +125,12 @@ export default {
onLoad() {
},
// 动作
methods: {},
methods: {
// 选择器改变
zkSelecthandleChange(value) {
console.log("value:", value);
}
},
// 监听属性
watch: {}
};

297
src/pages/Middle/transport/Truck/Truck/Update.vue Normal file
View File

@ -0,0 +1,297 @@
<template>
<div>
sssggg
<vxe-form
:data="pageOptions.formOptions.data"
ref="xForm"
:title-width="pageOptions.formOptions.titleWidth"
:title-align="pageOptions.formOptions.titleAlign"
:rules="pageOptions.formOptions.rules"
:items="pageOptions.formOptions.items"
titleColon>
</vxe-form>
<div class="footerbar">
<a-button type="primary" @click="save">确定</a-button>
<a-button @click="cancel">取消</a-button>
</div>
</div>
</template>
<script>
export default {
name: "Update",
data() {
return {
pageOptions: {
// 当前项目名称
currentConfigName: "",
// 当前项目ID
currentBeid: 0,
addPageUrl: "/Truck/TruckCreate/",
editPageUrl: "/Truck/TruckUpdate/",
listPageUrl: "/Truck/TruckList/",
uploadDefaultImg: null,
detailDataFieldName: "truck",
actions: {
// =============================== 接口地址 自动生成 Start ===============================
TruckList: `${this.$BASE_URL}/Truck/v1/truck/list`, // 货车列表
TruckSearch: `${this.$BASE_URL}/Truck/v1/truck/search`, // 货车搜索
TruckDetail: `${this.$BASE_URL}/Truck/v1/truck/detail`, // 货车详情
TruckCreate: `${this.$BASE_URL}/Truck/v1/truck/create`, // 创建货车
TruckUpdate: `${this.$BASE_URL}/Truck/v1/truck/update`, // 更新货车
TruckDelete: `${this.$BASE_URL}/Truck/v1/truck/detele`, // 删除货车
TruckBatchDelete: `${this.$BASE_URL}/Truck/v1/truck/batchDelete`, // 批量删除货车
TruckBatchUpdate: `${this.$BASE_URL}/Truck/v1/truck/batchUpdate`, // 批量更新货车
TruckBatchCreate: `${this.$BASE_URL}/Truck/v1/truck/batchCreate`, // 批量创建货车
TruckBatchHandle: `${this.$BASE_URL}/Truck/v1/truck/batchHandle`, // 批量处理货车
// =============================== 接口地址 自动生成 End ===============================
},
keyName: 'id',
// 是否编辑模式
isEdit: false,
// 表单数据
formOptions: {
// 标题宽度
titleWidth: 150,
// 标题对齐方式
titleAlign: 'right',
data: {
// =============================== 表单校验 自动生成 Start ===============================
id: 0,
code: "",
name: "",
plate_number: "",
type: "",
length: "",
width: "",
height: "",
load: "",
volume: "",
manager_name: "",
manager_phone: "",
out_count: 0,
out_distance: 0,
repair_count: 0,
change_tyre_count: 0,
add_oil_count: 0,
add_oil_litre: 0,
photo: "",
remark: "",
create_uid: 0,
update_uid: 0,
// =============================== 表单校验 自动生成 End ===============================
},
// 表单校验规则
rules: {
// =============================== 表单校验 自动生成 Start ===============================
code: [
{message: '请输入编码'}
],
name: [
{message: '请输入名称'}
],
plate_number: [
{message: '请输入车牌号'}
],
type: [
{message: '请输入车辆类型'}
],
length: [
{message: '请输入车辆长度'}
],
width: [
{message: '请输入车辆宽度'}
],
height: [
{message: '请输入车辆高度'}
],
load: [
{message: '请输入车辆载重'}
],
volume: [
{message: '请输入车辆体积'}
],
manager_name: [
{message: '请输入负责人姓名'}
],
manager_phone: [
{message: '请输入负责人电话'}
],
photo: [
{message: '请输入车辆照片'}
],
remark: [
{message: '请输入车辆备注'}
],
// =============================== 表单校验 自动生成 End ===============================
},
// 表单项
items: [
// =============================== 表单项 自动生成 Start ===============================
{field: 'code', title: '编码', span: 12, itemRender: {name: '$input'}},
{field: 'name', title: '名称', span: 12, itemRender: {name: '$input'}},
{field: 'plate_number', title: '车牌号', span: 12, itemRender: {name: '$input'}},
{field: 'type', title: '车辆类型', span: 12, itemRender: {name: '$input'}},
{field: 'manager_name', title: '负责人姓名', span: 12, itemRender: {name: '$input'}},
{field: 'manager_phone', title: '负责人电话', span: 12, itemRender: {name: '$input'}},
{field: 'remark', title: '车辆备注', span: 12, itemRender: {name: '$input'}},
// =============================== 表单项 自动生成 End ===============================
]
},
// 新增模式表单项
addModeItems: [],
},
}
},
// 函数
methods: {
// 保存
save({afterSave}) {
let _this = this;
let save = () => {
this.isEdit = this.options.isEdit;
// 如果是新增模式，提交新增接口 如果是编辑模式，提交编辑接口
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,
igFields: this.options.saveIgFields
});
// 提交数据
this.$mk.post({
url: action,
loading: "保存中...",
data: postdata,
useBigInt: true,
}).then((a) => { // 成功回调
if (afterSave) {
afterSave();
} else {
if (a.code === 200) {
this.$mk.success("保存成功");
this.$emit("afterSave", {data: postdata});
if (!this.isEdit) { // 如果是新增模式，关闭当前页面
if (this.options.action_afterSave === "confirm") {
this.$confirm({
title: '提示',
content: '新增成功，是否继续',
okText: '确认',
cancelText: '返回',
onOk() {
_this.options.formOptions.data = _this.defaultFormData;
},
onCancel() {
_this.back();
},
});
} else {
this.back();
}
}
} else {
this.$mk.error(a.msg); // 显示错误信息
}
}
}).catch((a) => { // 失败回调
this.$mk.error(a.data.msg); // 显示错误信息
});
};
// 验证表单
this.$mk.validateForm({form: this.$refs.xForm}).then(() => { // 验证表单
save(); // 提交保存
}).catch(count => { // 验证失败
this.$mk.error(`存在${count}项错误，请检查`);
});
},
// 获取路由的id参数
getDataId() {
let dataId = this.dataId;
if (this.$route.params.id) {
dataId = this.$route.params.id;
}
if (!dataId) {
dataId = 0;
}
return dataId;
},
// 保存后
afterSave(data) {
console.log("afterSave:", data);
},
// 取消 返回
cancel() {
if (this.options.addPageUrl) {
this.back();
} else {
this.$emit("callback", {});
}
},
// 返回
back() {
if (this.options.addPageUrl) {
this.isEdit = this.options.isEdit;
// 如果是新增模式，关闭当前页面
if (!this.isEdit) {
this.$closePage({
closeRoute: this.options.addPageUrl
});
} else {
this.$closePage({
closeRoute: this.options.editPageUrl
});
}
// 打开列表页面
this.$openPage(this.options.listPageUrl)
} else {
this.$emit("callback", {success: true});
}
},
},
// 监听属性
watch: {}
}
</script>
<style scoped lang="less">
</style>

288
src/pages/Middle/transport/Truck/Truck/zkTableList.vue Normal file
View File

@ -0,0 +1,288 @@
<template>
<vxe-grid ref='xGrid' v-bind="gridOptions" @form-submit="initListData" @page-change="handlePageChange">
<!-- 工具栏 -->
<template #toolbar_buttons>
<a-button @click="pageDelete()">批量删除</a-button>
<a-button type="primary" @click="Add()">新增</a-button>
</template>
<!-- 名称 -->
<template #name_item="{ data }">
<a-input v-model="data.name" type="text" placeholder="请输入名称"></a-input>
</template>
<!-- 编码 -->
<template #code_item="{ data }">
<a-input v-model="data.code" type="text" placeholder="请输入编码"></a-input>
</template>
<!-- 时间选择 -->
<template #create_time_item>
<a-range-picker @change="onChangeCreatTime"/>
</template>
<!-- 表单区操作 -->
<template #operate_item>
<a-button type="primary" status="primary">查询</a-button>
<a-button
@click="() => {
gridOptions.formConfig.data.name = '';
gridOptions.formConfig.data.code = '';
gridOptions.formConfig.data.create_time = 0;
gridOptions.formConfig.data.end_time = 0;
}"
>重置
</a-button>
</template>
<!-- 列表操作 -->
<template #op="{ row }">
<div class="oplinks">
<a @click.stop="pageDetail(row)" title="详情">
<a-icon type="file"/>
</a>
<a @click.stop="pageEdit(row)" title="编辑">
<a-icon type="edit"/>
</a>
<a @click.stop="pageDelete(row)" title="删除">
<a-icon type="delete"/>
</a>
</div>
</template>
<template #empty>
<a-empty/>
</template>
</vxe-grid>
</template>
<script>
import ListMixin from "@/application/zk/mixins/ListComponents.js";
import DeleteMixin from "@/application/zk/mixins/DeleteComponents.js";
import DetailMixin from "@/application/zk/mixins/DetailComponents.js";
import UpdateMixin from "@/application/zk/mixins/UpdateComponents.js";
export default {
mixins: [ListMixin, DeleteMixin, DetailMixin, UpdateMixin],
props: {
Columns: {
type: Array
},
FormConfig: {
type: Object,
default: () => {
return {
data: {
name: '',
code: '',
create_time: 0
},
items: [
{
field: 'name',
title: '名称',
slots: {default: 'name_item'} // 自定义插槽
},
{
field: 'code',
title: '编码',
slots: {default: 'code_item'} // 自定义插槽
},
{
field: 'create_time',
title: '时间',
slots: {default: 'create_time_item'} // 自定义插槽
},
{slots: {default: 'operate_item'}}
]
}
}
},
},
data() {
return {
DeleteIds: [], // 删除的id
gridOptions: { // 表格配置
resizable: true, // 是否允许拖动列宽调整大小
border: true, // 是否带有纵向边框
showOverflow: true, // 当内容过长时显示为省略号
loading: false, // 是否显示加载中
minHeight: '600', // 最小高度
maxHeight: '1200', // 最大高度
// 间隔条纹
stripe: true,
exportConfig: { // 导出配置
},
pagerConfig: {// 分页配置
total: 0, // 总条数
currentPage: this.ListUrlData.page, // 当前页
pageSize: this.ListUrlData.limit, // 默认每页显示条数
pageSizes: [10, 20, 30, 50, 100, 500, 1000, 2000] // 每页显示条数选项
},
checkboxConfig: { // 复选框配置
// 设置复选框支持分页勾选，需要设置 rowId 行数据主键
reserve: true,
// 点击行选中复选框
trigger: 'row',
highlight: true
},
formConfig: this.FormConfig, // 表单配置
toolbarConfig: { // 工具栏配置
export: true, // 是否显示导出按钮
custom: true, // 是否显示自定义列按钮
slots: {
buttons: 'toolbar_buttons' // 自定义插槽
}
},
columns: this.Columns, // 表格列配置
data: []
},
}
},
created() {
// 初始化列表数据
this.initListData()
},
methods: {
// 初始化列表数据
initListData() {
this.ListUrlData.order_bys = []
this.ListUrlData.order_bys.push({
column: "create_time",
order: "desc"
})
this.ListUrlData.search_rules = [];
if (this.gridOptions.formConfig.data.name !== '') {
this.ListUrlData.search_rules.push(
{
column: "name",
mode: "like",
value: this.gridOptions.formConfig.data.name
}
)
}
if (this.gridOptions.formConfig.data.code !== '') {
this.ListUrlData.search_rules.push(
{
column: "code",
mode: "like",
value: this.gridOptions.formConfig.data.code
}
)
}
this.$zk.getPagedData({
url: this.ListUrl,
listFieldName: this.ListFieldName,
data: this.ListUrlData,
loading: "加载中...",
config: {
headers: {
'Content-Type': 'application/json'
}
}
}).then(a => {
if (a.total === 0) {
this.gridOptions.pagerConfig.currentPage = this.ListUrlData.page;
this.gridOptions.pagerConfig.pageSize = this.ListUrlData.limit;
this.gridOptions.pagerConfig.total = a.total;
this.gridOptions.data = a[this.ListFieldName];
return
}
this.gridOptions.data = a[this.ListFieldName];
// this.list中的id字段转换为字符串
this.gridOptions.data.forEach(item => {
item.id = item.id.toString();
});
this.gridOptions.pagerConfig.currentPage = this.ListUrlData.page;
this.gridOptions.pagerConfig.pageSize = this.ListUrlData.limit;
this.gridOptions.pagerConfig.total = a.total;
}).catch((a) => {
this.$mk.error(a.msg);
});
},
// 删除
pageDelete: function (row) {
let ids = [];
if (row) {
ids.push(row.id);
}
this.$refs.xGrid.getCheckboxRecords().forEach(item => {
ids.push(item.id);
});
console.log(ids);
if (!ids.length) { // 如果没有选中行
this.$mk.error("请选择行"); // 提示
return;
}
this.$mk.confirm('您确定要删除吗？').then(type => { // 确认删除
if (type === 'confirm') { // 如果确认删除
this.DeleteUrlData.ids = ids;
this.Delete()
this.$message.success("删除成功")
}
});
},
// 分页
handlePageChange({currentPage, pageSize}) {
this.ListUrlData.page = currentPage
this.ListUrlData.limit = pageSize
this.initListData()
},
// 时间选择
onChangeCreatTime(date, dateString) {
console.log("dateString:", dateString)
if (dateString[0] === '' && dateString[1] === '') {
this.ListUrlData.start_time = 0;
this.ListUrlData.end_time = 0;
this.initListData()
} else {
this.ListUrlData.start_time = dateString[0];
this.ListUrlData.end_time = dateString[1];
this.initListData()
}
},
// 新增
Add() {
this.$openPage(this.CreateRouter);
},
// 编辑
pageEdit(row) {
console.log(row)
if (!row) { // 如果没有选中行
this.$mk.msg("请选择行"); // 提示
return; // 返回
}
this.$openPage(this.UpdateRouter + "/" + row.id); // 打开页面
},
// 详情
pageDetail(row) {
console.log(row)
if (!row) { // 如果没有选中行
this.$mk.msg("请选择行"); // 提示
return; // 返回
}
this.$mk.dialog.open({
height: 800,
width: 1200,
page: () => import('./Detail.vue'),
title: "详情",
dataId: row.id,
pageOptions: {
ApiUrl: this.DetailUrl,
ApiData: this.DetailUrlData,
FieldName: "truck",
title: "详情",
},
callback: ({success}) => {
success && this.initListData(); // 如果成功，初始化列表数据
}
})
}
}
}
</script>
<style scoped lang="less">
.ant-btn {
margin-right: 10px;
}
</style>

70
src/utils/i18n.js
View File

@ -11,13 +11,13 @@ import {getI18nKey} from '@/utils/routerUtil' // 引入路由工具
* @returns {VueI18n}
*/
function initI18n(locale, fallback) { // 初始化 i18n
Vue.use(VueI18n) // 使用 vue-i18n
let i18nOptions = { // i18n 配置
locale, // 本地化语言
fallbackLocale: fallback, // 回退语言
silentFallbackWarn: true, // 回退语言警告
}
return new VueI18n(i18nOptions) // 创建 i18n 实例
Vue.use(VueI18n) // 使用 vue-i18n
let i18nOptions = { // i18n 配置
locale, // 本地化语言
fallbackLocale: fallback, // 回退语言
silentFallbackWarn: true, // 回退语言警告
}
return new VueI18n(i18nOptions) // 创建 i18n 实例
}
/**
@ -28,15 +28,15 @@ function initI18n(locale, fallback) { // 初始化 i18n
* @returns {*}
*/
function generateI18n(lang, routes, valueKey) { // 生成 i18n
routes.forEach(route => { // 遍历路由
let keys = getI18nKey(route.fullPath).split('.') // 获取 i18n key
let value = valueKey === 'path' ? route[valueKey].split('/').filter(item => !item.startsWith(':') && item != '').join('.') : route[valueKey] // 获取 i18n valueKey 对应的值
lang.assignProps(keys, value) // 给 lang 对象注入属性
if (route.children) { // 如果有子路由
generateI18n(lang, route.children, valueKey) // 递归
}
})
return lang
routes.forEach(route => { // 遍历路由
let keys = getI18nKey(route.fullPath).split('.') // 获取 i18n key
let value = valueKey === 'path' ? route[valueKey].split('/').filter(item => !item.startsWith(':') && item !== '').join('.') : route[valueKey] // 获取 i18n valueKey 对应的值
lang.assignProps(keys, value) // 给 lang 对象注入属性
if (route.children) { // 如果有子路由
generateI18n(lang, route.children, valueKey) // 递归
}
})
return lang
}
/**
@ -45,13 +45,13 @@ function generateI18n(lang, routes, valueKey) { // 生成 i18n
* @param parentPath
*/
function formatFullPath(routes, parentPath = '') { // 格式化 fullPath
routes.forEach(route => { // 遍历路由
let isFullPath = route.path.substring(0, 1) === '/' // 判断是否是全路径
route.fullPath = isFullPath ? route.path : (parentPath === '/' ? parentPath + route.path : parentPath + '/' + route.path) // 生成 fullPath
if (route.children) { // 如果有子路由
formatFullPath(route.children, route.fullPath) // 递归
}
})
routes.forEach(route => { // 遍历路由
let isFullPath = route.path.substring(0, 1) === '/' // 判断是否是全路径
route.fullPath = isFullPath ? route.path : (parentPath === '/' ? parentPath + route.path : parentPath + '/' + route.path) // 生成 fullPath
if (route.children) { // 如果有子路由
formatFullPath(route.children, route.fullPath) // 递归
}
})
}
/**
@ -60,19 +60,19 @@ function formatFullPath(routes, parentPath = '') { // 格式化 fullPath
* @param routes
*/
function mergeI18nFromRoutes(i18n, routes) { // 从路由提取国际化数据
formatFullPath(routes) // 格式化 fullPath
const CN = generateI18n(new Object(), routes, 'name') // 生成中文国际化
const US = generateI18n(new Object(), routes, 'path') // 生成英文国际化
i18n.mergeLocaleMessage('CN', CN) // 合并中文国际化
i18n.mergeLocaleMessage('US', US) // 合并英文国际化
const messages = routesI18n.messages // 获取路由国际化
Object.keys(messages).forEach(lang => { // 遍历路由国际化
i18n.mergeLocaleMessage(lang, messages[lang]) // 合并路由国际化
})
formatFullPath(routes) // 格式化 fullPath
const CN = generateI18n({}, routes, 'name') // 生成中文国际化
const US = generateI18n({}, routes, 'path') // 生成英文国际化
i18n.mergeLocaleMessage('CN', CN) // 合并中文国际化
i18n.mergeLocaleMessage('US', US) // 合并英文国际化
const messages = routesI18n.messages // 获取路由国际化
Object.keys(messages).forEach(lang => { // 遍历路由国际化
i18n.mergeLocaleMessage(lang, messages[lang]) // 合并路由国际化
})
}
export { // 导出
initI18n, // 初始化 i18n 国际化
mergeI18nFromRoutes, // 从路由提取国际化数据
formatFullPath // 格式化 fullPath
initI18n, // 初始化 i18n 国际化
mergeI18nFromRoutes, // 从路由提取国际化数据
formatFullPath // 格式化 fullPath
}