mt-fe-group/pms-aomei
8
0
Fork 0
Code Issues Pull-Requests Releases Wiki Aktivität

update 产品文件上传

Quellcode durchsuchen
Dieser Commit ist enthalten in:
lb 2023-02-14 17:01:27 +08:00
Ursprung 839a6f6d52
Commit 844fdc796d
2 geänderte Dateien mit 263 neuen und 119 gelöschten Zeilen
Statistiken anzeigen Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

177
src/components/DialogWithMenu.vue
Datei anzeigen

@ -24,17 +24,21 @@
@click="handleAddParam()"
>+ 添加</el-button
>
<el-button
v-if="dataForm.id && !detailMode && /附件/.test(activeMenu)"
plain
type="primary"
size="small"
class="at-right-top"
style="margin-bottom: 16px"
@click="triggerUpload()"
>
<i class="el-icon-upload"></i> 上传</el-button
>
<template v-if="dataForm.id && !detailMode && /附件/.test(activeMenu)">
<el-upload
style="position: absolute; width: 100%; height: 0"
name="files"
:action="uploadUrl"
:show-file-list="false"
:headers="uploadHeaders"
:on-success="handleUploadSuccess"
>
<el-button plain type="primary" size="small" class="at-right-top" style="" @click="triggerUpload()">
<i class="el-icon-upload"></i> 上传
</el-button>
</el-upload>
</template>
<!-- menu -->
<el-tabs v-model="activeMenu" type="card" @tab-click="handleTabClick">
<!-- <el-tab-pane v-for="(tab, index) in configs.menu" :key="index" :label="tab.name" :name="tab.name"> -->
@ -50,6 +54,7 @@
{{ tab.name }}
</span>
<!-- 表单标签页 -->
<div v-if="tab.key === 'info'">
<!-- form -->
<el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus">
@ -114,7 +119,9 @@
</el-row>
</el-form>
</div>
<div v-show="dataForm.id && tab.key === 'attr'" key="attr-list">
<!-- 表格标签页 -->
<div v-if="dataForm.id && tab.key === 'attr'" key="attr-list">
<BaseListTable
:table-config="null"
:column-config="filteredTableProps"
@ -138,9 +145,32 @@
:total="attrTotal"
layout="total, sizes, prev, next"
></el-pagination>
<!-- layout="total, sizes, prev, pager, next, jumper" -->
</div>
<div v-show="dataForm.id && tab.key === 'attachment'" key="attachment">附件</div>
<!-- 附件标签页 -->
<div v-if="dataForm.id && tab.key === 'attachment'" key="attachment">
<!-- 附件列表 -->
文件列表
<div class="">
<ul class="file-list">
<li v-for="(file, index) in fileList" :key="index">
<span class="file-name">{{ file.name }}</span>
<span class="file-operations">
<span class="file-icon preview" @click="handleFileClick('view')">
<i class="el-icon-view" style="cursor: pointer"></i>
</span>
<span class="file-icon download" @click="handleFileClick('download')">
<i class="el-icon-download" style="color: #0b58ff; cursor: pointer"></i>
</span>
<span class="file-icon delete" @click="handleFileClick('delete')">
<i class="el-icon-delete" style="color: red; cursor: pointer"></i>
</span>
</span>
</li>
</ul>
</div>
<!-- 提示信息 -->
</div>
</el-tab-pane>
</el-tabs>
</div>
@ -171,7 +201,7 @@
import { pick as __pick } from "@/utils/filters";
import SmallDialog from "@/components/SmallDialog.vue";
import BaseListTable from "@/components/BaseListTable.vue";
import Cookies from "js-cookie";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
@ -314,6 +344,7 @@ export default {
attrPage: 1,
attrSize: 5,
attrTotal: 0,
fileList: [{ name: "1.png" }, { name: "2.png" }],
};
},
computed: {
@ -328,26 +359,16 @@ export default {
filteredTableProps() {
return this.detailMode ? this.configs.table.props.filter((v) => v.prop !== "operations") : this.configs.table.props;
},
uploadHeaders() {
return {
token: Cookies.get("token") || "",
};
},
uploadUrl() {
return this.configs.menu.find((item) => item.key === "attachment")?.actionUrl || "#";
},
},
watch: {
// "dataForm.parentId": function (val, old) {
// if (val && val !== "0") {
// // 如果不是 '无' 选项，就锁定 typeDictValue(物料类别)，和 typeId(物料类型)
// this.$http.get(`/pms/material/${val}`).then(({ data: res }) => {
// if (res.code === 0) {
// const { typeDictValue, typeId } = res.data;
// this.dataForm.typeDictValue = typeDictValue;
// this.dataForm.typeId = typeId;
// this.disableXXX = true;
// }
// });
// } else {
// this.dataForm.typeDictValue = null;
// this.dataForm.typeId = null;
// this.disableXXX = false;
// }
// },
},
methods: {
disableCondition(prop) {
return this.detailMode || (this.disableXXX && this.autoDisabledList.indexOf(prop) !== -1);
@ -397,6 +418,18 @@ export default {
if (res && res.code === 0) {
const dataFormKeys = Object.keys(this.dataForm);
this.dataForm = __pick(res.data, dataFormKeys);
if ("files" in res.data) {
console.log("[DialogWithMenu] fileList===>", res.data.files, this.fileList);
/** 返回的文件列表 */
this.fileList = res.data.files
? res.data.files.map((file) => ({
id: file.id,
name: file.fileUrl.split("/").pop(),
url: file.fileUrl,
typeCode: file.typeCode,
}))
: [];
}
}
this.loadingStatus = false;
});
@ -408,10 +441,45 @@ export default {
},
/** handlers */
triggerUpload() {
// 出发 upload 界面
handleFileClick(type) {
switch (type) {
case "view":
break;
case "download": {
}
case "delete": {
}
}
},
handleUploadSuccess(response, file, fileList) {
console.log("[DialogWithMenu] uploadedFileList", response, file, fileList, this.uploadedFileList);
if (response.code === 0) {
const uploadedFile = response.data[0];
const fileItem = {
id: uploadedFile.id,
name: uploadedFile.fileUrl.split("/").pop(),
url: uploadedFile.fileUrl,
typeCode: file.typeCode,
};
/** 通知 */
this.$notify({
title: "成功",
message: "上传成功",
type: "success",
});
this.fileList.push(fileItem);
// this.uploadedFileList.push(fileItem);
// this.$emit("update-file-list", this.uploadedFileList);
this.updateFileList(this.fileList)
}
},
updateFileList(list) {
// this.$http.put()
},
handleComponentModelUpdate(propName, { subject, payload: { data } }) {
this.dataForm[propName] = JSON.stringify(data);
console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]);
@ -623,4 +691,41 @@ export default {
right: 0;
z-index: 10000;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
.file-list {
max-height: 20vh;
overflow-y: auto;
margin-top: 12px;
width: 240px;
display: flex;
flex-direction: column;
background-color: #ccc;
}
.file-list > li {
padding: 8px;
display: flex;
justify-content: space-between;
}
.file-operations {
display: flex;
}
.file-icon {
margin-right: 8px;
font-size: 16px;
line-height: 1;
display: flex;
place-content: center;
width: 16px;
height: 16px;
}
</style>

205
src/views/modules/pms/product/config.js
Datei anzeigen

@ -1,116 +1,146 @@
import TableOperaionComponent from '@/components/noTemplateComponents/operationComponent'
import TableTextComponent from '@/components/noTemplateComponents/detailComponent'
import StatusComponent from '@/components/noTemplateComponents/statusComponent'
import { timeFilter, dictFilter } from '@/utils/filters'
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
import TableTextComponent from "@/components/noTemplateComponents/detailComponent";
import StatusComponent from "@/components/noTemplateComponents/statusComponent";
import { timeFilter, dictFilter } from "@/utils/filters";
export default function () {
const tableProps = [
{ type: 'index', label: '序号' },
{ type: "index", label: "序号" },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: 'name', label: '产品名称' },
{ prop: 'code', label: '产品编码' },
{ prop: 'typeDictValue', label: '产品类型', filter: dictFilter('product_type') },
{ prop: 'specifications', label: '规格' },
{ prop: 'unitDictValue', label: '单位', filter: dictFilter('unit') },
{ prop: 'weight', label: '重量', filter: val => val ? val + ' kg' : '-' },
{ prop: 'processTime', label: '产线完成单位产品用时', width: 200, filter: val => val + ' s' },
{ prop: 'remark', label: '备注' },
{ prop: 'description', label: '附件信息', subcomponent: TableTextComponent, buttonContent: '查看附件' },
{ prop: "name", label: "产品名称" },
{ prop: "code", label: "产品编码" },
{ prop: "typeDictValue", label: "产品类型", filter: dictFilter("product_type") },
{ prop: "specifications", label: "规格" },
{ prop: "unitDictValue", label: "单位", filter: dictFilter("unit") },
{ prop: "weight", label: "重量", filter: (val) => (val ? val + " kg" : "-") },
{ prop: "processTime", label: "产线完成单位产品用时", width: 200, filter: (val) => val + " s" },
{ prop: "remark", label: "备注" },
{ prop: "description", label: "附件信息", subcomponent: TableTextComponent, buttonContent: "查看附件" },
{
prop: 'operations',
name: '操作',
fixed: 'right',
prop: "operations",
name: "操作",
fixed: "right",
width: 120,
subcomponent: TableOperaionComponent,
options: ['edit', { name: 'delete', permission: 'pms:product:delete' }]
}
]
options: ["edit", { name: "delete", permission: "pms:product:delete" }],
},
];
const headFormFields = [
{
label: '关键字',
prop: 'key',
label: "关键字",
prop: "key",
input: true,
default: { value: '' },
bind: { placeholder: '请输入产品名称或编码' }
default: { value: "" },
bind: { placeholder: "请输入产品名称或编码" },
},
{
button: {
type: 'primary',
name: '查询'
}
type: "primary",
name: "查询",
},
},
{
button: {
type: 'plain',
name: '新增',
permission: 'pms:product:save'
}
}
]
type: "plain",
name: "新增",
permission: "pms:product:save",
},
},
];
const dictList = JSON.parse(localStorage.getItem('dictList') || {})
const dictList = JSON.parse(localStorage.getItem("dictList") || {});
const dialogConfigs = {
menu: [{ name: '产品信息', key: 'info' }, { name: '产品属性信息', key: 'attr', onlyEditMode: true }, { name: '附件', key: 'attachment', onlyEditMode: true }],
menu: [
{ name: "产品信息", key: "info" },
{ name: "产品属性信息", key: "attr", onlyEditMode: true },
{
name: "附件",
key: "attachment",
onlyEditMode: true,
actionUrl: window.SITE_CONFIG["apiURL"] + "/pms/attachment/uploadFileFormData?typeCode=ProductAttachment",
},
],
form: {
rows: [
[
{ input: true, label: '产品名称/砖型名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入设备名称' } },
{ input: true, label: '产品编码/砖型编码', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入设备编码' } },
{
input: true,
label: "产品名称/砖型名称",
prop: "name",
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入设备名称" },
},
{
input: true,
label: "产品编码/砖型编码",
prop: "code",
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入设备编码" },
},
// { input: true, label: '版本号', prop: 'version', elparams: { placeholder: '请输入版本号' } },
{
select: true,
label: '产品类型',
prop: 'typeDictValue',
options: 'product_type' in dictList ? dictList['product_type'].map(item => ({ value: item.dictValue, label: item.dictLabel })) : [],
elparams: { placeholder: '选择一个产品类型' }
label: "产品类型",
prop: "typeDictValue",
options: "product_type" in dictList ? dictList["product_type"].map((item) => ({ value: item.dictValue, label: item.dictLabel })) : [],
elparams: { placeholder: "选择一个产品类型" },
},
],
[
// { input: true, label: '单位平方数', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入设备名称编码' } },
{
select: true,
label: '单位',
prop: 'unitDictValue',
options: 'unit' in dictList ? dictList['unit'].map(item => ({ value: item.dictValue, label: item.dictLabel })) : [],
elparams: { placeholder: '选择单位' }
label: "单位",
prop: "unitDictValue",
options: "unit" in dictList ? dictList["unit"].map((item) => ({ value: item.dictValue, label: item.dictLabel })) : [],
elparams: { placeholder: "选择单位" },
},
{
input: true,
label: "规格",
prop: "specifications",
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入规格" },
},
{
input: true,
label: "产线完成单位产品用时(s)",
prop: "processTime",
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入规格" },
},
{ input: true, label: '规格', prop: 'specifications', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入规格' } },
{ input: true, label: '产线完成单位产品用时(s)', prop: 'processTime', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入规格' } },
],
[{ textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }],
[{ textarea: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
],
operations: [
{ name: 'add', label: '保存', type: 'primary', permission: 'pms:product:save', showOnEdit: false },
{ name: 'update', label: '更新', type: 'primary', permission: 'pms:product:update', showOnEdit: true },
{ name: 'reset', label: '重置', type: 'warning', showAlways: true },
{ name: "add", label: "保存", type: "primary", permission: "pms:product:save", showOnEdit: false },
{ name: "update", label: "更新", type: "primary", permission: "pms:product:update", showOnEdit: true },
{ name: "reset", label: "重置", type: "warning", showAlways: true },
// { name: 'cancel', label: '取消', showAlways: true },
],
},
table: {
// extraParams: ['stepId'],
extraParams: 'productId',
extraParams: "productId",
props: [
{ type: 'index', label: '序号' },
{ type: "index", label: "序号" },
{ prop: "createTime", label: "添加时间", filter: timeFilter },
// { prop: 'productId', label: '产品ID' },
{ prop: 'name', label: '属性名称', isEditField: true },
{ prop: 'value', label: '属性值', isEditField: true },
{ prop: 'remark', label: '备注', isEditField: true },
{ prop: "name", label: "属性名称", isEditField: true },
{ prop: "value", label: "属性值", isEditField: true },
{ prop: "remark", label: "备注", isEditField: true },
{
prop: 'operations',
name: '操作',
fixed: 'right',
prop: "operations",
name: "操作",
fixed: "right",
width: 120,
subcomponent: TableOperaionComponent,
options: [
{ name: 'edit', permission: 'pms:productArrt:update' },
{ name: 'delete', permission: 'pms:productArrt:delete' },
]
}
{ name: "edit", permission: "pms:productArrt:update" },
{ name: "delete", permission: "pms:productArrt:delete" },
],
},
],
data: [
// TOOD 暂时用不到，但获取可以考虑把拉取接口数据的函数迁移到此文件（没有太大必要）
@ -118,25 +148,34 @@ export default function () {
},
subDialog: {
extraParam: 'productId',
extraParam: "productId",
forceAttachCode: true, // 产品属性新增必填 code 字段......
rows: [
[
{ input: true, label: '属性名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性名称' } },
{ input: true, label: '属性值', prop: 'value', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性值' } },
{
input: true,
label: "属性名称",
prop: "name",
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入属性名称" },
},
{
input: true,
label: "属性值",
prop: "value",
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入属性值" },
},
],
[
{ textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '添加备注' } },
]
[{ textarea: true, label: "备注", prop: "remark", elparams: { placeholder: "添加备注" } }],
],
operations: [
{ name: 'add', label: '保存', type: 'primary', permission: 'pms:productArrt:save', showOnEdit: false },
{ name: 'update', label: '更新', type: 'primary', permission: 'pms:productArrt:update', showOnEdit: true },
{ name: "add", label: "保存", type: "primary", permission: "pms:productArrt:save", showOnEdit: false },
{ name: "update", label: "更新", type: "primary", permission: "pms:productArrt:update", showOnEdit: true },
],
},
};
return {
dialogConfigs,
tableConfig: {
@ -145,13 +184,13 @@ export default function () {
},
headFormConfigs: {
rules: null, // 名称是由 BaseSearchForm.vue 组件固定的
fields: headFormFields // 名称是由 BaseSearchForm.vue 组件固定的
fields: headFormFields, // 名称是由 BaseSearchForm.vue 组件固定的
},
urls: {
base: '/pms/product',
page: '/pms/product/page',
subase: '/pms/productArrt',
subpage: '/pms/productArrt/page',
}
}
}
base: "/pms/product",
page: "/pms/product/page",
subase: "/pms/productArrt",
subpage: "/pms/productArrt/page",
},
};
}