This commit is contained in:
BianLzhaoMin
parent
ad83188c6f
commit
2b3e1ea66d
|
|
@ -0,0 +1,54 @@
|
|||
import request from '@/utils/request'
|
||||
import request_formdata from '@/utils/request_formdata'
|
||||
|
||||
// 查询宣传物料列表
|
||||
export function getProMaterialsListAPI(data) {
|
||||
return request({
|
||||
url: '/material/list',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 新增宣传物料
|
||||
export function addProMaterialsAPI(data) {
|
||||
return request_formdata({
|
||||
url: '/material',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑产品中心
|
||||
export function editProductCenterAPI(data) {
|
||||
return request_formdata({
|
||||
url: '//material/edit',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 删除产品中心
|
||||
export function deleteProductCenterAPI(id) {
|
||||
return request({
|
||||
url: `/material/${id}`,
|
||||
method: 'POST',
|
||||
data: { id },
|
||||
})
|
||||
}
|
||||
|
||||
// 获取产品中心详情
|
||||
export function getProductCenterDetailAPI(id) {
|
||||
return request({
|
||||
url: `/material/${id}`,
|
||||
method: 'GET',
|
||||
})
|
||||
}
|
||||
|
||||
// 获取产品列表
|
||||
export function getProductListAPI() {
|
||||
return request({
|
||||
url: '/select/selectProduct',
|
||||
method: 'POST',
|
||||
})
|
||||
}
|
||||
|
|
@ -137,15 +137,15 @@ export default {
|
|||
handleBeforeUpload(file) {
|
||||
// 根据file的name的后缀判断是否符合要求
|
||||
// console.log(file, 'file')
|
||||
const isFormat = this.fileType.some((e) => file.name.endsWith(e))
|
||||
if (!isFormat) {
|
||||
this.$modal.msgError(
|
||||
`文件格式不正确, 请上传${this.fileType.join(
|
||||
'、',
|
||||
)}格式的文件!`,
|
||||
)
|
||||
return false
|
||||
}
|
||||
// const isFormat = this.fileType.some((e) => file.name.endsWith(e))
|
||||
// if (!isFormat) {
|
||||
// this.$modal.msgError(
|
||||
// `文件格式不正确, 请上传${this.fileType.join(
|
||||
// '、',
|
||||
// )}格式的文件!`,
|
||||
// )
|
||||
// return false
|
||||
// }
|
||||
// 判断文件大小
|
||||
const isLt = file.size / 1024 / 1024 < this.fileSize
|
||||
if (!isLt) {
|
||||
|
|
@ -181,20 +181,20 @@ export default {
|
|||
handleChange(file, fileList) {
|
||||
// console.log(file, fileList, 'file, fileList')
|
||||
|
||||
const isFormat = this.fileType.some((e) => file.name.endsWith(e))
|
||||
if (!isFormat) {
|
||||
this.$modal.msgError(
|
||||
`文件格式不正确, 请上传${this.fileType.join(
|
||||
'、',
|
||||
)}格式的文件!`,
|
||||
)
|
||||
// const isFormat = this.fileType.some((e) => file.name.endsWith(e))
|
||||
// if (!isFormat) {
|
||||
// this.$modal.msgError(
|
||||
// `文件格式不正确, 请上传${this.fileType.join(
|
||||
// '、',
|
||||
// )}格式的文件!`,
|
||||
// )
|
||||
|
||||
this.$emit(
|
||||
'update:fileList',
|
||||
fileList.filter((item) => item.uid !== file.uid),
|
||||
)
|
||||
return false
|
||||
}
|
||||
// this.$emit(
|
||||
// 'update:fileList',
|
||||
// fileList.filter((item) => item.uid !== file.uid),
|
||||
// )
|
||||
// return false
|
||||
// }
|
||||
// 判断文件大小
|
||||
const isLt = file.size / 1024 / 1024 < this.fileSize
|
||||
if (!isLt) {
|
||||
|
|
|
|||
|
|
@ -11,12 +11,32 @@
|
|||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="addAndEditForm.name" />
|
||||
<el-input
|
||||
clearable
|
||||
maxlength="50"
|
||||
show-word-limit
|
||||
placeholder="请输入名称"
|
||||
v-model.trim="addAndEditForm.name"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-input v-model="addAndEditForm.type" />
|
||||
<el-form-item label="类型" prop="typeId">
|
||||
<el-select
|
||||
clearable
|
||||
filterable
|
||||
style="width: 100%"
|
||||
placeholder="请选择类型"
|
||||
@change="handleTypeIdChange"
|
||||
v-model="addAndEditForm.typeId"
|
||||
>
|
||||
<el-option
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in dict.type.tb_product_type"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -25,8 +45,8 @@
|
|||
<el-form-item label="附件" prop="file">
|
||||
<UploadFileFormData
|
||||
:limit="1"
|
||||
:file-size="10"
|
||||
:file-type="['jpg', 'png', 'jpeg']"
|
||||
:file-size="500"
|
||||
:file-type="[]"
|
||||
:file-list.sync="addAndEditForm.file"
|
||||
:is-uploaded="addAndEditForm.file.length >= 1"
|
||||
/>
|
||||
|
|
@ -37,8 +57,8 @@
|
|||
<el-form-item label="封面" prop="cover">
|
||||
<UploadFileFormData
|
||||
:limit="1"
|
||||
:file-size="10"
|
||||
:file-type="['jpg', 'png', 'jpeg']"
|
||||
:file-size="20"
|
||||
:file-type="['png', 'jpg', 'jpeg']"
|
||||
:file-list.sync="addAndEditForm.cover"
|
||||
:is-uploaded="addAndEditForm.cover.length >= 1"
|
||||
/>
|
||||
|
|
@ -49,12 +69,33 @@
|
|||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="版本" prop="version">
|
||||
<el-input v-model="addAndEditForm.version" />
|
||||
<el-input
|
||||
clearable
|
||||
maxlength="10"
|
||||
show-word-limit
|
||||
placeholder="请输入版本"
|
||||
v-model.trim="addAndEditForm.version"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="归属产品">
|
||||
<el-input v-model="addAndEditForm.belongProduct" />
|
||||
<el-select
|
||||
clearable
|
||||
filterable
|
||||
multiple
|
||||
style="width: 100%"
|
||||
placeholder="请选择类型"
|
||||
@change="handleProductIdChange"
|
||||
v-model="addAndEditForm.productId"
|
||||
>
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in productList"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -64,10 +105,12 @@
|
|||
<el-form-item label="描述" prop="description">
|
||||
<el-input
|
||||
clearable
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
placeholder="请输入描述"
|
||||
:autosize="{ minRows: 3, maxRows: 6 }"
|
||||
v-model="addAndEditForm.description"
|
||||
:autosize="{ minRows: 6, maxRows: 10 }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
@ -87,22 +130,41 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
addProMaterialsAPI,
|
||||
editProductCenterAPI,
|
||||
getProductCenterDetailAPI,
|
||||
getProductListAPI,
|
||||
} from '@/api/dataManage/pro-materials'
|
||||
import TitleTip from '@/components/TitleTip'
|
||||
import UploadFileFormData from '@/components/UploadFileFormData'
|
||||
export default {
|
||||
name: 'AddAndEditForm',
|
||||
dicts: ['tb_product_type'],
|
||||
components: { TitleTip, UploadFileFormData },
|
||||
props: {
|
||||
detailsId: {
|
||||
type: Number,
|
||||
},
|
||||
formType: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentTab: '1', // 当前激活的Tab名称
|
||||
productList: [],
|
||||
// 基本信息表单
|
||||
addAndEditForm: {
|
||||
name: '', // 名称
|
||||
type: '', // 类型
|
||||
typeId: '', // 类型
|
||||
typeName: '', // 类型名称
|
||||
file: [], // 附件
|
||||
cover: [], // 封面
|
||||
version: '', // 版本
|
||||
belongProduct: '', // 归属产品
|
||||
productName: '', // 归属产品
|
||||
productId: '', // 归属产品
|
||||
description: '', // 描述
|
||||
},
|
||||
// 基本信息表单校验规则
|
||||
|
|
@ -110,7 +172,7 @@ export default {
|
|||
name: [
|
||||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
||||
],
|
||||
type: [
|
||||
typeId: [
|
||||
{ required: true, message: '请输入类型', trigger: 'blur' },
|
||||
],
|
||||
file: [
|
||||
|
|
@ -137,6 +199,10 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getProductList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 取消操作
|
||||
handleCancel() {
|
||||
|
|
@ -151,13 +217,107 @@ export default {
|
|||
try {
|
||||
await this.$refs.addAndEditForm.validate()
|
||||
|
||||
this.$message.success('保存成功')
|
||||
this.$emit('closeDialog', true)
|
||||
// 组装参数
|
||||
const {
|
||||
name, // 名称
|
||||
file, // 附件
|
||||
cover, // 封面
|
||||
typeId, // 类型
|
||||
version, // 版本
|
||||
typeName, // 类型名称
|
||||
productId, // 归属产品
|
||||
productName, // 归属产品
|
||||
description,
|
||||
} = this.addAndEditForm
|
||||
const params = {
|
||||
name, // 名称
|
||||
typeId, // 类型
|
||||
version, // 版本
|
||||
typeName, // 类型名称
|
||||
productName, // 归属产品
|
||||
description,
|
||||
productId: productId.join(','),
|
||||
}
|
||||
const formData = new FormData()
|
||||
const fileMsg = []
|
||||
|
||||
file.forEach((item) => {
|
||||
if (!item.id) {
|
||||
formData.append('files', item.raw)
|
||||
fileMsg.push({ type: 1 })
|
||||
}
|
||||
})
|
||||
|
||||
cover.forEach((item) => {
|
||||
if (!item.id) {
|
||||
formData.append('files', item.raw)
|
||||
fileMsg.push({ type: 2 })
|
||||
}
|
||||
})
|
||||
|
||||
formData.append('fileMsg', JSON.stringify(fileMsg))
|
||||
formData.append('params', JSON.stringify(params))
|
||||
|
||||
const res = await addProMaterialsAPI(formData)
|
||||
console.log(res, 'res')
|
||||
|
||||
if (res.code === 200) {
|
||||
this.$message.success('保存成功')
|
||||
this.$emit('closeDialog', true)
|
||||
}
|
||||
|
||||
// this.$message.success('保存成功')
|
||||
// this.$emit('closeDialog', true)
|
||||
} catch (error) {
|
||||
// 校验失败，提示用户
|
||||
this.$message.error('请完善所有必填项后再保存')
|
||||
// this.$message.error('请完善所有必填项后再保存')
|
||||
}
|
||||
},
|
||||
|
||||
// 类型ID改变事件
|
||||
handleTypeIdChange(value) {
|
||||
this.addAndEditForm.typeName = this.dict.type.tb_product_type.find(
|
||||
(item) => item.value === value,
|
||||
).label
|
||||
},
|
||||
|
||||
// 获取归属产品下拉选
|
||||
async getProductList() {
|
||||
const res = await getProductListAPI()
|
||||
|
||||
this.productList = res.data
|
||||
},
|
||||
|
||||
// 归属产品ID改变事件
|
||||
handleProductIdChange(value) {
|
||||
this.addAndEditForm.productName = ''
|
||||
if (value.length > 0) {
|
||||
{
|
||||
value.forEach((item) => {
|
||||
this.addAndEditForm.productName +=
|
||||
this.productList.find((j) => item == j.value).label
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 获取宣传物料详情
|
||||
async getProductCenterDetail() {
|
||||
const res = await getProductCenterDetailAPI(this.detailsId)
|
||||
|
||||
console.log(res, '宣传物料详情')
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
formType: {
|
||||
handler(newVal) {
|
||||
if (newVal === 2) {
|
||||
this.getProductCenterDetail()
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button
|
||||
plain
|
||||
size="mini"
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
>
|
||||
导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
|
||||
<!-- 表格 -->
|
||||
|
|
@ -128,6 +128,12 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getProMaterialsListFun"
|
||||
/>
|
||||
|
||||
<!-- 新增和编辑表单 -->
|
||||
|
||||
|
|
@ -136,15 +142,23 @@
|
|||
@closeDialogOuter="handleCloseDialogOuter"
|
||||
>
|
||||
<template #outerContent>
|
||||
<AddAndEditForm @closeDialog="closeDialog" />
|
||||
<AddAndEditForm
|
||||
:formType="formType"
|
||||
:detailsId="detailsId"
|
||||
@closeDialog="closeDialog"
|
||||
/>
|
||||
</template>
|
||||
</DialogModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddAndEditForm from './components/addAndEditForm.vue'
|
||||
import {
|
||||
getProMaterialsListAPI,
|
||||
deleteProductCenterAPI,
|
||||
} from '@/api/dataManage/pro-materials'
|
||||
import DialogModel from '@/components/DialogModel'
|
||||
import AddAndEditForm from './components/addAndEditForm.vue'
|
||||
export default {
|
||||
name: 'ProMaterials',
|
||||
components: {
|
||||
|
|
@ -153,27 +167,15 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
name: '产品1',
|
||||
type: '智慧基建',
|
||||
version: '1.0.0',
|
||||
file: 'https://www.baidu.com',
|
||||
description: '描述',
|
||||
createBy: 'admin',
|
||||
},
|
||||
{
|
||||
name: '产品2',
|
||||
type: '智慧后勤',
|
||||
version: '1.0.0',
|
||||
file: 'https://www.baidu.com',
|
||||
description: '描述',
|
||||
createBy: 'admin',
|
||||
},
|
||||
],
|
||||
total: 0,
|
||||
formType: 1,
|
||||
detailsId: null,
|
||||
tableData: [],
|
||||
queryParams: {
|
||||
name: undefined,
|
||||
type: undefined,
|
||||
typeId: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
|
|
@ -181,7 +183,7 @@ export default {
|
|||
label: '名称',
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
prop: 'typeName',
|
||||
label: '类型',
|
||||
},
|
||||
{
|
||||
|
|
@ -197,7 +199,7 @@ export default {
|
|||
label: '描述',
|
||||
},
|
||||
{
|
||||
prop: 'createBy',
|
||||
prop: 'createUser',
|
||||
label: '创建人',
|
||||
},
|
||||
{
|
||||
|
|
@ -215,9 +217,19 @@ export default {
|
|||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getProMaterialsListFun()
|
||||
},
|
||||
methods: {
|
||||
// 获取列表数据
|
||||
async getProMaterialsListFun() {
|
||||
const res = await getProMaterialsListAPI(this.queryParams)
|
||||
this.tableData = res?.rows
|
||||
this.total = res?.total
|
||||
},
|
||||
onHandleQuery() {
|
||||
console.log(this.queryParams)
|
||||
this.getProMaterialsListFun()
|
||||
},
|
||||
onResetQuery() {
|
||||
this.queryParams = {
|
||||
|
|
@ -226,7 +238,8 @@ export default {
|
|||
}
|
||||
},
|
||||
onHandleAdd() {
|
||||
console.log('新增')
|
||||
this.formType = 1
|
||||
this.detailsId = null
|
||||
this.dialogConfig.outerTitle = '新增'
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
|
|
@ -237,12 +250,27 @@ export default {
|
|||
console.log('导出')
|
||||
},
|
||||
onHandleEdit(row) {
|
||||
console.log('编辑', row)
|
||||
this.formType = 2
|
||||
this.detailsId = row.id
|
||||
this.dialogConfig.outerTitle = '编辑'
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
onHandleDelete(row) {
|
||||
console.log('删除', row)
|
||||
this.$confirm('确定删除该宣传物料吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
const res = await deleteProductCenterAPI(row.id)
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
this.onHandleQuery()
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('取消')
|
||||
})
|
||||
},
|
||||
// 关闭弹框
|
||||
handleCloseDialogOuter() {
|
||||
|
|
@ -256,9 +284,6 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// this.onHandleQuery()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue