@@ -300,6 +300,47 @@ export default { | |||||
}); | }); | ||||
}); | }); | ||||
} | } | ||||
case "change-category": { | |||||
return this.$http.put(this.urls.base, data).then(({ data: res }) => { | |||||
if (res.code === 0) { | |||||
this.$message({ | |||||
message: "修改成功", | |||||
type: "success", | |||||
duration: 1500, | |||||
onClose: () => { | |||||
this.getList(); | |||||
}, | |||||
}); | |||||
} else { | |||||
this.$message({ | |||||
message: `${res.code}: ${res.msg}`, | |||||
type: "error", | |||||
duration: 1500, | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
case "preview": { | |||||
console.log("[PREVIEW] data", data); | |||||
// report preview | |||||
return this.$router.push({ | |||||
name: "pms-reportPreview", | |||||
query: { | |||||
name: data, | |||||
}, | |||||
}); | |||||
} | |||||
case "design": { | |||||
console.log("[DESIGN] data", data); | |||||
// report design | |||||
return this.$router.push({ | |||||
name: "pms-reportDesign", | |||||
query: { | |||||
name: data, | |||||
}, | |||||
}); | |||||
break; | |||||
} | |||||
} | } | ||||
}, | }, | ||||
@@ -0,0 +1,181 @@ | |||||
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent"; | |||||
import switchBtn from "@/components/noTemplateComponents/switchBtn"; | |||||
import request from "@/utils/request"; | |||||
import { timeFilter } from '@/utils/filters' | |||||
// 报表分类小组件 | |||||
const CategoryList = { | |||||
name: 'CategoryList', | |||||
props: { | |||||
injectData: { | |||||
type: Object, | |||||
required: true, | |||||
default: () => ({}) | |||||
} | |||||
}, | |||||
data() { | |||||
return { list: [], calcMaxHeight, pickedId: null } | |||||
}, | |||||
mounted() { | |||||
console.log(this.injectData) | |||||
if (categoryOptions.length === 0) { | |||||
// 获取并缓存 categoryOptions | |||||
axios.get('/pms/reportSheetCategory/list').then(({ data: res }) => { | |||||
if (res.code === 0) { | |||||
console.log('[CategoryList小组件]', res.data) | |||||
categoryOptions = res.data | |||||
} else { | |||||
categoryOptions.splice(0) | |||||
} | |||||
}) | |||||
} else { | |||||
this.list = categoryOptions | |||||
} | |||||
this.pickedId = this.injectData[this.injectData.head.prop] | |||||
}, | |||||
methods: { | |||||
// destroy dialog | |||||
handleDestroyDialog() { | |||||
setTimeout(() => { | |||||
this.addOrUpdateVisible = false | |||||
}, /** after dialog animated */ 200); | |||||
}, | |||||
handleChange(id) { | |||||
this.pickedId = id | |||||
this.$emit('emit-data', { | |||||
type: 'change-category', | |||||
data: { id: this.injectData.id, fileName: this.injectData.fileName, name: this.injectData.name, url: this.injectData.url, categoryId: id } | |||||
}) | |||||
} | |||||
}, | |||||
render: function (h) { | |||||
const childOptions = [] | |||||
this.injectData.head.options?.forEach(item => { | |||||
console.log('【报表分类】', item.value) | |||||
childOptions.push(h('el-option', { props: { label: item.label, value: item.value } }, null)) | |||||
}) | |||||
return h('el-select', { props: { value: this.pickedId }, on: { change: this.handleChange } }, childOptions) | |||||
} | |||||
} | |||||
export default async function () { | |||||
const categoryList = (await this.$http.get('/pms/reportSheetCategory/list'))?.data?.data | |||||
if (Array.isArray(categoryList)) { | |||||
console.log('category ====> ', categoryList) | |||||
const tableProps = [ | |||||
{ type: 'index', label: '序号' }, | |||||
{ prop: "createTime", label: "添加时间", width: 180, filter: timeFilter }, | |||||
{ prop: "fileName", label: "报表名称" }, | |||||
{ prop: "category", label: "报表分类", subcomponent: CategoryList, options: categoryList }, | |||||
{ | |||||
prop: "operations", | |||||
name: "操作", | |||||
fixed: "right", | |||||
width: 120, | |||||
subcomponent: TableOperaionComponent, | |||||
options: ["edit", { name: "delete", emitFull: true, permission: "pms:productionLine:delete" }], | |||||
}, | |||||
]; | |||||
const headFormFields = [ | |||||
{ | |||||
prop: 'name', | |||||
label: "报表名称", | |||||
input: true, | |||||
default: { value: "" }, | |||||
bind: { | |||||
placeholder: '请输入报表名称' | |||||
} | |||||
}, | |||||
{ | |||||
button: { | |||||
type: "primary", | |||||
name: "查询", | |||||
}, | |||||
}, | |||||
{ | |||||
button: { | |||||
type: "primary", | |||||
name: "新增", | |||||
permission: "pms:productionLine:save" | |||||
}, | |||||
bind: { | |||||
plain: true, | |||||
} | |||||
}, | |||||
]; | |||||
const dialogJustFormConfigs = { | |||||
form: { | |||||
rows: [ | |||||
[ | |||||
{ | |||||
input: true, | |||||
label: "产线名称", | |||||
prop: "name", | |||||
rules: { required: true, message: "必填项不能为空", trigger: "blur" }, | |||||
elparams: { placeholder: "请输入产线名称" }, | |||||
}, | |||||
{ | |||||
input: true, | |||||
label: "产线编码", | |||||
prop: "code", | |||||
rules: { required: true, message: "必填项不能为空", trigger: "blur" }, | |||||
elparams: { placeholder: "请输入产线编码" }, | |||||
}, | |||||
{ | |||||
select: true, | |||||
label: "所属工厂", | |||||
prop: "factoryId", | |||||
fetchData: () => this.$http.get("/pms/factory/page", { params: { limit: 999, page: 1 } }), | |||||
option: [], | |||||
rules: { required: true, message: "必填项不能为空", trigger: "change" }, | |||||
}, | |||||
], | |||||
// [ | |||||
// { | |||||
// input: true, | |||||
// label: "产线TT值", | |||||
// prop: "tvalue", | |||||
// rules: [ | |||||
// { required: true, message: "必填项不能为空", trigger: "blur" }, | |||||
// { type: "number", message: "数字", trigger: "blur", transform: (val) => Number(val) }, | |||||
// ], | |||||
// elparams: { placeholder: "设定TT值(每小时下片数量)" }, | |||||
// }, | |||||
// ], | |||||
[{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }], | |||||
[{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }], | |||||
], | |||||
operations: [ | |||||
{ name: "add", label: "保存", type: "primary", permission: "pms:productionLine:save", showOnEdit: false }, | |||||
{ name: "update", label: "更新", type: "primary", permission: "pms:productionLine:update", showOnEdit: true }, | |||||
{ name: "reset", label: "重置", type: "warning", showAlways: true }, | |||||
// { name: 'cancel', label: '取消', showAlways: true }, | |||||
], | |||||
}, | |||||
}; | |||||
return { | |||||
dialogConfigs: dialogJustFormConfigs, | |||||
tableConfig: { | |||||
table: null, column: tableProps | |||||
}, | |||||
headFormConfigs: { | |||||
rules: null, | |||||
fields: headFormFields | |||||
}, | |||||
urls: { | |||||
base: "/pms/reportSheet", | |||||
page: "/pms/reportSheet/page", | |||||
// subase: '/pms/blenderStepParam', | |||||
// subpage: '/pms/blenderStepParam/page', | |||||
// more... | |||||
} | |||||
} | |||||
} | |||||
}; |
@@ -1,128 +1,135 @@ | |||||
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent"; | import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent"; | ||||
import switchBtn from "@/components/noTemplateComponents/switchBtn"; | import switchBtn from "@/components/noTemplateComponents/switchBtn"; | ||||
import request from "@/utils/request"; | import request from "@/utils/request"; | ||||
import { timeFilter } from '@/utils/filters' | |||||
import { timeFilter } from "@/utils/filters"; | |||||
// 报表分类小组件 | |||||
const CategoryList = { | |||||
name: "CategoryList", | |||||
props: { | |||||
injectData: { | |||||
type: Object, | |||||
required: true, | |||||
default: () => ({}), | |||||
}, | |||||
}, | |||||
data() { | |||||
return { pickedId: null }; | |||||
}, | |||||
mounted() { | |||||
// console.log(this.injectData) | |||||
this.pickedId = this.injectData[this.injectData.head.prop]; | |||||
}, | |||||
methods: { | |||||
handleChange(id) { | |||||
this.pickedId = id; | |||||
this.$emit("emit-data", { | |||||
type: "change-category", | |||||
data: { id: this.injectData.id, fileName: this.injectData.fileName, name: this.injectData.name, url: this.injectData.url, category: id }, | |||||
}); | |||||
}, | |||||
}, | |||||
render: function (h) { | |||||
const childOptions = []; | |||||
this.injectData.head.options?.forEach((item) => { | |||||
// console.log('【报表分类】', item.value) | |||||
childOptions.push(h("el-option", { props: { label: item.label, value: item.value } }, null)); | |||||
}); | |||||
return h("el-select", { props: { value: this.pickedId }, on: { change: this.handleChange } }, childOptions); | |||||
}, | |||||
}; | |||||
export async function fetchCategoryList() { | |||||
const categoryList = (await this.$http.get("/pms/reportSheetCategory/list"))?.data?.data; | |||||
if (Array.isArray(categoryList)) { | |||||
return categoryList; | |||||
} | |||||
} | |||||
export default function () { | export default function () { | ||||
const tableProps = [ | const tableProps = [ | ||||
{ type: 'index', label: '序号' }, | |||||
{ prop: "createTime", label: "添加时间", filter: timeFilter }, | |||||
{ prop: "name", label: "报表名称" }, | |||||
{ prop: "code", label: "报表分类" }, | |||||
// { prop: "factory", label: "所属工厂" }, | |||||
// { prop: "status", label: "产线状态", subcomponent: switchBtn }, // subcomponent | |||||
// TODO: 2023.2.3 产线状态切换功能不生效 | |||||
// { prop: "tvalue", label: "每小时下片数量" }, | |||||
// { prop: "description", label: "描述" }, | |||||
// { prop: "remark", label: "备注" }, | |||||
{ type: "index", label: "序号" }, | |||||
{ prop: "createTime", label: "添加时间", width: 180, filter: timeFilter }, | |||||
{ prop: "fileName", label: "报表名称" }, | |||||
{ prop: "category", label: "报表分类", subcomponent: CategoryList, options: [] }, | |||||
{ | { | ||||
prop: "operations", | prop: "operations", | ||||
name: "操作", | name: "操作", | ||||
fixed: "right", | fixed: "right", | ||||
width: 120, | |||||
width: 240, | |||||
subcomponent: TableOperaionComponent, | subcomponent: TableOperaionComponent, | ||||
options: ["edit", { name: "delete", emitFull: true, permission: "pms:productionLine:delete" }], | |||||
options: [ | |||||
{ name: "preview", permission: "pms:reportSheet:preview" }, | |||||
{ name: "design", permission: "pms:reportSheet:design" }, | |||||
"edit", | |||||
{ name: "delete", emitFull: true, permission: "pms:reportSheet:delete" }, | |||||
], | |||||
}, | }, | ||||
]; | ]; | ||||
const headFormFields = [ | const headFormFields = [ | ||||
{ | { | ||||
prop: 'key', | |||||
label: "产线名称/编码", | |||||
prop: "name", | |||||
label: "报表名称", | |||||
input: true, | input: true, | ||||
default: { value: "" }, | default: { value: "" }, | ||||
bind: { | bind: { | ||||
placeholder: '请输入产线名称或编码' | |||||
} | |||||
}, | |||||
{ | |||||
button: { | |||||
type: "primary", | |||||
name: "查询", | |||||
placeholder: "请输入报表名称", | |||||
}, | }, | ||||
}, | }, | ||||
{ | { | ||||
button: { | button: { | ||||
type: "primary", | type: "primary", | ||||
name: "新增", | |||||
permission: "pms:productionLine:save" | |||||
name: "查询", | |||||
}, | }, | ||||
bind: { | |||||
plain: true, | |||||
} | |||||
}, | }, | ||||
// { | |||||
// button: { | |||||
// type: "primary", | |||||
// name: "新增", | |||||
// permission: "pms:productionLine:save" | |||||
// }, | |||||
// bind: { | |||||
// plain: true, | |||||
// } | |||||
// }, | |||||
]; | ]; | ||||
/** | |||||
* dialog config 有两个版本,一个适用于 DialogWithMenu 组件,另一个适用于 DialogJustForm 组件 | |||||
* 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js | |||||
* 此为后者的配置: | |||||
*/ | |||||
const dialogJustFormConfigs = { | const dialogJustFormConfigs = { | ||||
form: { | form: { | ||||
rows: [ | rows: [ | ||||
[ | [ | ||||
{ | { | ||||
input: true, | input: true, | ||||
label: "产线名称", | |||||
prop: "name", | |||||
label: "报表名称", | |||||
prop: "fileName", | |||||
rules: { required: true, message: "必填项不能为空", trigger: "blur" }, | rules: { required: true, message: "必填项不能为空", trigger: "blur" }, | ||||
elparams: { placeholder: "请输入产线名称" }, | |||||
}, | |||||
{ | |||||
input: true, | |||||
label: "产线编码", | |||||
prop: "code", | |||||
rules: { required: true, message: "必填项不能为空", trigger: "blur" }, | |||||
elparams: { placeholder: "请输入产线编码" }, | |||||
}, | |||||
{ | |||||
select: true, | |||||
label: "所属工厂", | |||||
prop: "factoryId", | |||||
fetchData: () => this.$http.get("/pms/factory/page", { params: { limit: 999, page: 1 } }), | |||||
option: [], | |||||
rules: { required: true, message: "必填项不能为空", trigger: "change" }, | |||||
elparams: { placeholder: "请输入报表名称" }, | |||||
}, | }, | ||||
], | ], | ||||
// [ | |||||
// { | |||||
// input: true, | |||||
// label: "产线TT值", | |||||
// prop: "tvalue", | |||||
// rules: [ | |||||
// { required: true, message: "必填项不能为空", trigger: "blur" }, | |||||
// { type: "number", message: "数字", trigger: "blur", transform: (val) => Number(val) }, | |||||
// ], | |||||
// elparams: { placeholder: "设定TT值(每小时下片数量)" }, | |||||
// }, | |||||
// ], | |||||
[{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }], | |||||
[{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }], | |||||
], | ], | ||||
operations: [ | operations: [ | ||||
{ name: "add", label: "保存", type: "primary", permission: "pms:productionLine:save", showOnEdit: false }, | |||||
{ name: "update", label: "更新", type: "primary", permission: "pms:productionLine:update", showOnEdit: true }, | |||||
{ name: "reset", label: "重置", type: "warning", showAlways: true }, | |||||
{ name: "add", label: "保存", type: "primary", permission: "pms:reportSheet:save", showOnEdit: false }, | |||||
{ name: "update", label: "修改", type: "primary", permission: "pms:reportSheet:update", showOnEdit: true }, | |||||
// { name: "reset", label: "重置", type: "warning", showAlways: true }, | |||||
// { name: 'cancel', label: '取消', showAlways: true }, | // { name: 'cancel', label: '取消', showAlways: true }, | ||||
], | ], | ||||
}, | }, | ||||
}; | }; | ||||
// 备注:弹窗弹出的时间和网速有关...... | |||||
return { | return { | ||||
dialogConfigs: dialogJustFormConfigs, | dialogConfigs: dialogJustFormConfigs, | ||||
tableConfig: { | tableConfig: { | ||||
table: null, // 此处可省略,el-table 上的配置项 | |||||
column: tableProps, // el-column-item 上的配置项 | |||||
table: null, | |||||
column: tableProps, | |||||
}, | }, | ||||
headFormConfigs: { | headFormConfigs: { | ||||
rules: null, // 名称是由 BaseSearchForm.vue 组件固定的 | |||||
fields: headFormFields, // 名称是由 BaseSearchForm.vue 组件固定的 | |||||
rules: null, | |||||
fields: headFormFields, | |||||
}, | }, | ||||
urls: { | urls: { | ||||
base: "/pms/productionLine", | |||||
page: "/pms/productionLine/page", | |||||
base: "/pms/reportSheet", | |||||
page: "/pms/reportSheet/page", | |||||
// subase: '/pms/blenderStepParam', | // subase: '/pms/blenderStepParam', | ||||
// subpage: '/pms/blenderStepParam/page', | // subpage: '/pms/blenderStepParam/page', | ||||
// more... | // more... | ||||
@@ -1,31 +1,50 @@ | |||||
<template> | <template> | ||||
<ListViewWithHead :table-config="tableConfig" :head-config="headFormConfigs" :dialog-configs="dialogConfigs" /> | |||||
<ListViewWithHead :table-config="tableConfig" :head-config="headFormConfigs" :dialog-configs="dialogConfigs" /> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import initConfig from './config'; | |||||
import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue'; | |||||
import initConfig, { fetchCategoryList } from "./config"; | |||||
import ListViewWithHead from "@/views/atomViews/ListViewWithHead.vue"; | |||||
export default { | export default { | ||||
name: 'ReportSheetView', | |||||
components: { ListViewWithHead }, | |||||
provide() { | |||||
return { | |||||
urls: this.allUrls | |||||
} | |||||
}, | |||||
data() { | |||||
const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this); | |||||
return { | |||||
tableConfig, | |||||
headFormConfigs, | |||||
allUrls: urls, | |||||
dialogConfigs, | |||||
}; | |||||
}, | |||||
created() {}, | |||||
mounted() {}, | |||||
methods: {}, | |||||
name: "ReportSheetView", | |||||
components: { ListViewWithHead }, | |||||
provide() { | |||||
return { | |||||
urls: this.allUrls, | |||||
}; | |||||
}, | |||||
data() { | |||||
const { tableConfig, headFormConfigs, urls: allUrls, dialogConfigs } = initConfig.call(this); | |||||
return { | |||||
tableConfig, | |||||
headFormConfigs, | |||||
allUrls, | |||||
dialogConfigs, | |||||
}; | |||||
}, | |||||
created() {}, | |||||
mounted() { | |||||
// initConfig.call(this).then(({ tableConfig, headFormConfigs, urls, dialogConfigs }) => { | |||||
// this.tableConfig = tableConfig; | |||||
// this.headFormConfigs = headFormConfigs; | |||||
// this.allUrls = urls; | |||||
// this.dialogConfigs = dialogConfigs | |||||
// }); | |||||
fetchCategoryList.call(this).then((categoryList) => { | |||||
console.log("[fetchCategoryList() then...]"); | |||||
if ("column" in this.tableConfig) { | |||||
const categoryProp = this.tableConfig.column.find((item) => item.prop === "category"); | |||||
this.$set( | |||||
categoryProp, | |||||
"options", | |||||
categoryList.map((item) => ({ label: item.name, value: item.id })) | |||||
); | |||||
console.log("[报表, 设置options成功..]", categoryProp); | |||||
} | |||||
}); | |||||
}, | |||||
methods: {}, | |||||
}; | }; | ||||
</script> | </script> | ||||