@@ -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 switchBtn from "@/components/noTemplateComponents/switchBtn"; | |||
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 () { | |||
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", | |||
name: "操作", | |||
fixed: "right", | |||
width: 120, | |||
width: 240, | |||
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 = [ | |||
{ | |||
prop: 'key', | |||
label: "产线名称/编码", | |||
prop: "name", | |||
label: "报表名称", | |||
input: true, | |||
default: { value: "" }, | |||
bind: { | |||
placeholder: '请输入产线名称或编码' | |||
} | |||
}, | |||
{ | |||
button: { | |||
type: "primary", | |||
name: "查询", | |||
placeholder: "请输入报表名称", | |||
}, | |||
}, | |||
{ | |||
button: { | |||
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 = { | |||
form: { | |||
rows: [ | |||
[ | |||
{ | |||
input: true, | |||
label: "产线名称", | |||
prop: "name", | |||
label: "报表名称", | |||
prop: "fileName", | |||
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: [ | |||
{ 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 }, | |||
], | |||
}, | |||
}; | |||
// 备注:弹窗弹出的时间和网速有关...... | |||
return { | |||
dialogConfigs: dialogJustFormConfigs, | |||
tableConfig: { | |||
table: null, // 此处可省略,el-table 上的配置项 | |||
column: tableProps, // el-column-item 上的配置项 | |||
table: null, | |||
column: tableProps, | |||
}, | |||
headFormConfigs: { | |||
rules: null, // 名称是由 BaseSearchForm.vue 组件固定的 | |||
fields: headFormFields, // 名称是由 BaseSearchForm.vue 组件固定的 | |||
rules: null, | |||
fields: headFormFields, | |||
}, | |||
urls: { | |||
base: "/pms/productionLine", | |||
page: "/pms/productionLine/page", | |||
base: "/pms/reportSheet", | |||
page: "/pms/reportSheet/page", | |||
// subase: '/pms/blenderStepParam', | |||
// subpage: '/pms/blenderStepParam/page', | |||
// more... | |||
@@ -1,31 +1,50 @@ | |||
<template> | |||
<ListViewWithHead :table-config="tableConfig" :head-config="headFormConfigs" :dialog-configs="dialogConfigs" /> | |||
<ListViewWithHead :table-config="tableConfig" :head-config="headFormConfigs" :dialog-configs="dialogConfigs" /> | |||
</template> | |||
<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 { | |||
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> | |||