|
|
@@ -1,20 +1,23 @@
|
|
|
<template>
|
|
|
- <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
|
|
|
- :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
|
|
|
- :operation="operation()" :exportList="exportList">
|
|
|
- <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
|
|
|
- :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
|
|
|
- <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
|
|
|
- <zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
|
|
|
- :form-data="formData" :form-items="formItems">
|
|
|
- </zj-form-module>
|
|
|
- </zj-form-container>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button size="mini" @click="formCancel">取 消</el-button>
|
|
|
- <el-button size="mini" @click="formConfirm" type="primary">确 定</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </template-page>
|
|
|
+ <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
|
|
|
+ <template slot-scope="{activeKey, data}">
|
|
|
+ <template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
|
|
|
+ :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
|
|
|
+ :operation="operation()" :exportList="exportList">
|
|
|
+ </template-page>
|
|
|
+ <div v-if="~['add', 'edit'].indexOf(activeKey)">
|
|
|
+ <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
|
|
|
+ <zj-form-module title="" label-width="100px" :showPackUp="false"
|
|
|
+ :form-data="formData" :form-items="formItems">
|
|
|
+ </zj-form-module>
|
|
|
+ </zj-form-container>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="mini" @click="data.removeTab">取 消</el-button>
|
|
|
+ <el-button size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </zj-tab-page>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -54,7 +57,9 @@ export default {
|
|
|
appId: "",
|
|
|
linkUrl: "",
|
|
|
},
|
|
|
- goodsList: []
|
|
|
+ goodsList: [],
|
|
|
+ formType: 'add',
|
|
|
+ formVisible: false,
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -65,7 +70,7 @@ export default {
|
|
|
[
|
|
|
this.optionsEvensAuth("add", {
|
|
|
click: () => {
|
|
|
- this.addData()
|
|
|
+ this.openForm('add')
|
|
|
}
|
|
|
})
|
|
|
],
|
|
|
@@ -88,7 +93,7 @@ export default {
|
|
|
},
|
|
|
formItems() {
|
|
|
return [{
|
|
|
- md: 24,
|
|
|
+ md: 6,
|
|
|
isShow: true,
|
|
|
name: 'el-input',
|
|
|
attributes: { placeholder: '请输入' },
|
|
|
@@ -98,22 +103,7 @@ export default {
|
|
|
rules: [...required]
|
|
|
}
|
|
|
}, {
|
|
|
- md: 24,
|
|
|
- isShow: true,
|
|
|
- name: 'slot-component',
|
|
|
- formItemAttributes: {
|
|
|
- label: '封面图片',
|
|
|
- prop: 'imgSrc',
|
|
|
- rules: [...required]
|
|
|
- },
|
|
|
- render: (h, { props, onInput }) => {
|
|
|
- var { value } = props
|
|
|
- return (
|
|
|
- <ImageUpload fileList={this.formData.imgSrc} uid="imgSrc_materials_drawing_images" limit={1} />
|
|
|
- )
|
|
|
- }
|
|
|
- }, {
|
|
|
- md: 24,
|
|
|
+ md: 6,
|
|
|
isShow: true,
|
|
|
name: 'el-input',
|
|
|
attributes: { placeholder: '请输入' },
|
|
|
@@ -123,7 +113,7 @@ export default {
|
|
|
rules: []
|
|
|
}
|
|
|
}, {
|
|
|
- md: 24,
|
|
|
+ md: 8,
|
|
|
isShow: true,
|
|
|
name: 'el-radio',
|
|
|
options: [{ label: "商品链接", value: 1 }, { label: "凡科活动链接", value: 2 }, { label: "专区活动链接", value: 3 }],
|
|
|
@@ -140,7 +130,7 @@ export default {
|
|
|
this.formData.linkUrl = ""
|
|
|
// this.formData.goodsId = ""
|
|
|
return [{
|
|
|
- md: 24,
|
|
|
+ md: 6,
|
|
|
isShow: true,
|
|
|
name: 'el-select',
|
|
|
options: this.goodsList,
|
|
|
@@ -154,7 +144,7 @@ export default {
|
|
|
} else if (this.formData.type == 2) {
|
|
|
this.formData.goodsId = ""
|
|
|
return [{
|
|
|
- md: 24,
|
|
|
+ md: 6,
|
|
|
isShow: true,
|
|
|
name: 'el-input',
|
|
|
attributes: { placeholder: '请输入' },
|
|
|
@@ -164,7 +154,7 @@ export default {
|
|
|
rules: []
|
|
|
}
|
|
|
}, {
|
|
|
- md: 24,
|
|
|
+ md: 6,
|
|
|
isShow: true,
|
|
|
name: 'el-input',
|
|
|
attributes: { placeholder: '请输入' },
|
|
|
@@ -179,7 +169,7 @@ export default {
|
|
|
this.formData.linkUrl = ""
|
|
|
// this.formData.goodsId = ""
|
|
|
return [{
|
|
|
- md: 24,
|
|
|
+ md: 6,
|
|
|
isShow: true,
|
|
|
name: 'el-select',
|
|
|
options: [
|
|
|
@@ -206,6 +196,22 @@ export default {
|
|
|
}
|
|
|
return []
|
|
|
})()
|
|
|
+ , {
|
|
|
+ md: 24,
|
|
|
+ isShow: true,
|
|
|
+ name: 'slot-component',
|
|
|
+ formItemAttributes: {
|
|
|
+ label: '封面图片',
|
|
|
+ prop: 'imgSrc',
|
|
|
+ rules: [...required]
|
|
|
+ },
|
|
|
+ render: (h, { props, onInput }) => {
|
|
|
+ var { value } = props
|
|
|
+ return (
|
|
|
+ <ImageUpload fileList={this.formData.imgSrc} uid="imgSrc_materials_drawing_images" limit={1} />
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
@@ -228,13 +234,7 @@ export default {
|
|
|
edit: {
|
|
|
btnType: 'text',
|
|
|
click: ({ row, index, column }) => {
|
|
|
- getBannerDetail({ id: row.id }).then(res => {
|
|
|
- Object.assign(this.formData, res.data, {
|
|
|
- imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
|
|
|
- })
|
|
|
- this.formDialogType = 1
|
|
|
- this.openForm()
|
|
|
- })
|
|
|
+ this.openForm('edit',row.id)
|
|
|
}
|
|
|
},
|
|
|
del: {
|
|
|
@@ -264,40 +264,67 @@ export default {
|
|
|
},
|
|
|
})
|
|
|
},
|
|
|
- addData() {
|
|
|
- this.formDialogType = 0
|
|
|
- this.openForm()
|
|
|
- },
|
|
|
- openForm() {
|
|
|
- getGoodsList({
|
|
|
- pageNum: 1,
|
|
|
- pageSize: -1
|
|
|
- }).then(res => {
|
|
|
- this.goodsList = res.data.records.map(item => ({
|
|
|
- value: item.goodsId,
|
|
|
- label: item.goodsName
|
|
|
- }));
|
|
|
- this.formDialog = true;
|
|
|
- })
|
|
|
- },
|
|
|
- formCancel() {
|
|
|
- this.$refs.formRef.$refs.inlineForm.clearValidate()
|
|
|
- this.$data.formData = this.$options.data().formData
|
|
|
- this.formDialog = false
|
|
|
- },
|
|
|
- formConfirm() {
|
|
|
- this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
|
|
|
- if (valid) {
|
|
|
- ([addBanner, editBanner][this.formDialogType])({
|
|
|
- ...this.formData,
|
|
|
- imgSrc: this.formData.imgSrc.map(item => item.url).join(","),
|
|
|
- }).then(res => {
|
|
|
- this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
|
|
|
- this.formCancel()
|
|
|
- this.$refs.pageRef.refreshList()
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+ // 取消 新增编辑
|
|
|
+ formCancel() {
|
|
|
+ this.formVisible = false
|
|
|
+ this.$refs?.formRef?.resetFields()
|
|
|
+ this.$data.formRef = this.$options.data().formRef
|
|
|
+ },
|
|
|
+ // 打开 新增编辑 网点表单
|
|
|
+ openForm(type, id) {
|
|
|
+ this.$refs.tabPage.addTab({
|
|
|
+ // 对应显示的模块
|
|
|
+ activeKey: type,
|
|
|
+ // 唯一标识
|
|
|
+ key: type,
|
|
|
+ // 页签名称
|
|
|
+ label: ({ edit: "编辑", add: "新增" })[type],
|
|
|
+ // 打开时事件
|
|
|
+ triggerEvent: () => {
|
|
|
+ this.formCancel()
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.formType = type
|
|
|
+ this.formVisible = true
|
|
|
+ if (type == 'add') {
|
|
|
+ this.formDialogType = 0
|
|
|
+ } else {
|
|
|
+ this.formDialogType = 1
|
|
|
+ getBannerDetail({ id }).then(res => {
|
|
|
+ Object.assign(this.formData, res.data, {
|
|
|
+ imgSrc: res.data.imgSrc ? [{ url: res.data.imgSrc }] : [],
|
|
|
+ })
|
|
|
+ getGoodsList({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: -1
|
|
|
+ }).then(res => {
|
|
|
+ this.goodsList = res.data.records.map(item => ({
|
|
|
+ value: item.goodsId,
|
|
|
+ label: item.goodsName
|
|
|
+ }));
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 关闭时事件
|
|
|
+ closeEvent: () => {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ formConfirm(cancel) {
|
|
|
+ this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
|
|
|
+ if (valid) {
|
|
|
+ ([addBanner, editBanner][this.formDialogType])({
|
|
|
+ ...this.formData,
|
|
|
+ imgSrc: this.formData.imgSrc.map(item => item.url).join(","),
|
|
|
+ }).then(res => {
|
|
|
+ this.$message({ type: 'success', message: `${({ edit: "编辑", add: "新增" })[this.formType]}成功!` })
|
|
|
+ cancel('list')
|
|
|
+ this.$refs.pageRef.refreshList()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
batchDelete() {
|
|
|
if (this.recordSelected && this.recordSelected.length > 0) {
|
|
|
@@ -323,4 +350,13 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+ .dialog-footer{
|
|
|
+ padding: 0 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+</style>
|
pengyh