|
@@ -22,6 +22,38 @@
|
|
|
</div>
|
|
|
<el-dialog :title="modalType == 'add' ? '新增' : '编辑'" v-model="dialogVisible" width="800" v-loading="loading">
|
|
|
<byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform">
|
|
|
+ <template #categoryCover>
|
|
|
+ <el-row style="width: 100%">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item prop="categoryCover">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
|
|
|
+ :data="uploadDataOne"
|
|
|
+ :show-file-list="false"
|
|
|
+ accept=".gif, .jpeg, .jpg, .png"
|
|
|
+ :on-success="categoryCoverListSuccess"
|
|
|
+ :before-upload="uploadFileOne">
|
|
|
+ <el-image
|
|
|
+ v-if="formData.data.categoryCoverList && formData.data.categoryCoverList.length > 0"
|
|
|
+ :src="formData.data.categoryCoverList[0].fileUrl"
|
|
|
+ fit="scale-down"
|
|
|
+ class="avatar" />
|
|
|
+ <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+ <el-button
|
|
|
+ class="delete-btn"
|
|
|
+ type="danger"
|
|
|
+ v-if="formData.data.categoryCoverList && formData.data.categoryCoverList.length > 0"
|
|
|
+ @click="formData.data.categoryCoverList = []">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
<template #subCategorySlot>
|
|
|
<el-row style="width: 100%;margin-bottom: 10px" v-for="(row, index) in formData.data.subCategoryList" ref="sort">
|
|
|
<el-col :span="6" >
|
|
@@ -85,6 +117,7 @@ import byTable from "@/components/byTable/index.vue";
|
|
|
import byForm from "@/components/byForm/index.vue";
|
|
|
import { computed, ref } from "vue";
|
|
|
import {getDictOneByXmhjc} from "@/api/XMHJC/common";
|
|
|
+import {getFileList, getFileStr} from "../../../../api/XMHJC/common";
|
|
|
const loading = ref(false);
|
|
|
const submitLoading = ref(false);
|
|
|
const enableStatus = ref([]);
|
|
@@ -196,6 +229,7 @@ let formData = reactive({
|
|
|
data: {},
|
|
|
treeData: [],
|
|
|
subCategoryList:[],
|
|
|
+ honorCoverList: [],
|
|
|
});
|
|
|
const formOption = reactive({
|
|
|
inline: true,
|
|
@@ -214,6 +248,14 @@ const formConfig = computed(() => {
|
|
|
maxlength: 10,
|
|
|
itemType: "text",
|
|
|
},
|
|
|
+
|
|
|
+ {
|
|
|
+ type: "slot",
|
|
|
+ prop: "categoryCover",
|
|
|
+ slotName: "categoryCover",
|
|
|
+ label: "分类图片",
|
|
|
+ },
|
|
|
+
|
|
|
{
|
|
|
type: "input",
|
|
|
prop: "code",
|
|
@@ -263,6 +305,17 @@ const openModal = () => {
|
|
|
};
|
|
|
const submitForm = () => {
|
|
|
byform.value.handleSubmit((valid) => {
|
|
|
+ if (!formData.data.categoryCoverList) {
|
|
|
+ ElMessage({message: "请上传图片",type: "error",});
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if (!(formData.data.subCategoryList && formData.data.subCategoryList.length > 0)) {
|
|
|
+ ElMessage({message: "请填写子类目",type: "error",});
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
submitLoading.value = true;
|
|
|
proxy.post("/productCategory/" + modalType.value, formData.data)
|
|
|
.then((res) => {
|
|
@@ -304,12 +357,14 @@ const changeStatus = (row) => {
|
|
|
};
|
|
|
|
|
|
//编辑详情
|
|
|
-const getDetail = (row) => {
|
|
|
+const getDetail = async (row) => {
|
|
|
modalType.value = "edit";
|
|
|
- proxy.post("/productCategory/detail", { id: row.id }).then((res) => {
|
|
|
+ await proxy.post("/productCategory/detail", { id: row.id }).then((res) => {
|
|
|
formData.data = res;
|
|
|
dialogVisible.value = true;
|
|
|
});
|
|
|
+ const resFile = await getFileList({businessIdList: [formData.data.id], fileType: 1})
|
|
|
+ formData.data.categoryCoverList = resFile.data[formData.data.id];
|
|
|
};
|
|
|
|
|
|
//删除
|
|
@@ -356,6 +411,27 @@ const clickAddSubCategory = () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+
|
|
|
+const uploadDataOne = ref({});
|
|
|
+const uploadFileOne = async (file) => {
|
|
|
+ const res = await getFileStr({ fileName: file.name });
|
|
|
+ uploadDataOne.value = res.data.uploadBody;
|
|
|
+ file.id = res.data.id;
|
|
|
+ file.fileName = res.data.fileName;
|
|
|
+ file.fileUrl = res.data.fileUrl;
|
|
|
+ return true;
|
|
|
+};
|
|
|
+
|
|
|
+const categoryCoverListSuccess = (response, uploadFile) => {
|
|
|
+ formData.data.categoryCoverList = [
|
|
|
+ {
|
|
|
+ id: uploadFile.raw.id,
|
|
|
+ fileName: uploadFile.raw.fileName,
|
|
|
+ fileUrl: uploadFile.raw.fileUrl,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+};
|
|
|
+
|
|
|
const clickDelete = (index) => {
|
|
|
formData.data.subCategoryList.splice(index, 1);
|
|
|
};
|
|
@@ -366,5 +442,34 @@ getDictlist();
|
|
|
<style lang="scss" scoped>
|
|
|
.tenant {
|
|
|
padding: 20px;
|
|
|
+ .delete-btn{
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.avatar-uploader .avatar {
|
|
|
+ width: 110px;
|
|
|
+ height: 110px;
|
|
|
+ display: block;
|
|
|
+ background-color: black;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed var(--el-border-color);
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: var(--el-transition-duration-fast);
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+}
|
|
|
+.el-icon.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 110px;
|
|
|
+ height: 110px;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px dashed var(--el-border-color);
|
|
|
}
|
|
|
</style>
|