|
|
@@ -1,246 +1,214 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
- <div v-if="!isAddGoodsShow">
|
|
|
- <div class="mymain-container">
|
|
|
- <div class="btn-group clearfix">
|
|
|
- <div class="fl">
|
|
|
- <el-button type="primary" icon="el-icon-plus" size="small" @click="addClassification('add')">添加分类</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="table">
|
|
|
- <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
|
|
|
- <el-table-column align="center" label="分类主标题" prop="mainTitle"></el-table-column>
|
|
|
- <el-table-column align="center" label="分类副标题" prop="subTitle"></el-table-column>
|
|
|
- <el-table-column align="center" label="状态" prop="status" width="100">
|
|
|
- <template slot-scope="scope">
|
|
|
- {{ scope.row.status ? "开启" : "关闭" }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" label="排序" prop="sortNum" width="100">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-input v-model="scope.row.sortNum" size="small" class="sort-input" type="number" @change="changeSort(scope.row)" ></el-input>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" label="创建日期" prop="createTime" width="160"></el-table-column>
|
|
|
- <el-table-column align="center" label="操作" width="250">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button type="primary" size="mini" @click="addClassification('edit', scope.row.goodsNewsCategoryId)">编辑</el-button>
|
|
|
- <el-button type="primary" size="mini" @click="setUp(scope.row)">配置</el-button>
|
|
|
- <el-popconfirm style="margin-left: 10px" :title="scope.row.status?'确定关闭吗?':'确定开启吗?'" @confirm="closeItem(scope.row)">
|
|
|
- <el-button slot="reference" size="mini">{{ scope.row.status ? "关闭" : "开启" }}</el-button>
|
|
|
- </el-popconfirm>
|
|
|
- <el-popconfirm style="margin-left: 10px" title="确定删除吗？" @confirm="deleteItem(scope.row)">
|
|
|
- <el-button slot="reference" size="mini" type="danger">删除</el-button>
|
|
|
- </el-popconfirm>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
+ <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" :operationColumnWidth="160">
|
|
|
+ <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 :title="addFormType == 'add' ? '添加分类' : '编辑分类'" :visible.sync="addFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
|
|
|
- <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="80px">
|
|
|
- <el-form-item label="主标题" prop="mainTitle">
|
|
|
- <el-input placeholder="请输入主标题" v-model="addForm.mainTitle" style="width: 250px" maxlength="4" show-word-limit></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="副标题" prop="subTitle">
|
|
|
- <el-input placeholder="请输入副标题" v-model="addForm.subTitle" style="width: 250px" maxlength="6" show-word-limit></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="商品类别" prop="goodsType">
|
|
|
- <el-select v-model="addForm.goodsType" placeholder="请选择商品类别" style="width: 250px" :disabled="addFormType == 'edit'">
|
|
|
- <el-option label="普通商品" :value="1"></el-option>
|
|
|
- <el-option label="套购商品" :value="2"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="排序" prop="sort">
|
|
|
- <el-input placeholder="请输入排序" v-model="addForm.sort" style="width: 250px" type="number"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="cancelAddForm">取 消</el-button>
|
|
|
- <el-button type="primary" @click="submitAddForm">确 定</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </el-dialog>
|
|
|
+ </template-page>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import TemplatePage from '@/components/template/template-page-1.vue'
|
|
|
+import import_mixin from '@/components/template/import_mixin.js'
|
|
|
+import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
|
|
|
import {
|
|
|
- getModuleList,
|
|
|
- getNewclassify,
|
|
|
+ goodsNewsCategoryListPageV2,
|
|
|
+ goodsNewsCategoryPageExport,
|
|
|
addNewclassify,
|
|
|
getNewclassifyDetail,
|
|
|
editNewclassifyDetail,
|
|
|
changeNewclassify,
|
|
|
deleteNewclassify
|
|
|
} from "@/api/goods";
|
|
|
-import { status } from 'nprogress';
|
|
|
-
|
|
|
export default {
|
|
|
+ components: { TemplatePage },
|
|
|
+ mixins: [import_mixin],
|
|
|
data() {
|
|
|
return {
|
|
|
- // companyWechatId: "", // 企业微信id
|
|
|
- editId: "", // 商品新维度分类id
|
|
|
- pageNum: 1, // 页号
|
|
|
- pageSize: -1, // 页大小(-1不分页)
|
|
|
- isAddGoodsShow: false,
|
|
|
- dataList: null, // 列表数据
|
|
|
- listLoading: true, // 列表加载loading
|
|
|
- listTotal: 0, // 列表总数
|
|
|
- addFormVisible: false, // 添加/编辑分类
|
|
|
- addFormType: "add",
|
|
|
- addForm: {
|
|
|
- mainTitle: "", // 主标题
|
|
|
- subTitle: "", // 副标题
|
|
|
- goodsType: 1,
|
|
|
- sort: '',
|
|
|
- },
|
|
|
- addFormRules: {
|
|
|
- mainTitle: [
|
|
|
- { required: true, message: "请输入主标题", trigger: "blur" },
|
|
|
- ],
|
|
|
- subTitle: [
|
|
|
- { required: true, message: "请输入副标题", trigger: "blur" },
|
|
|
- ],
|
|
|
- goodsType: [
|
|
|
- { required: true, message: "请选择商品类别", trigger: "change" },
|
|
|
+ // 事件组合
|
|
|
+ optionsEvensGroup: [
|
|
|
+ [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ name: '新建',
|
|
|
+ isRole: true,
|
|
|
+ click: this.addData
|
|
|
+ }
|
|
|
+ ],
|
|
|
],
|
|
|
+ ],
|
|
|
+ // 表格属性
|
|
|
+ tableAttributes: {
|
|
|
+ // 启用勾选列
|
|
|
+ selectColumn: false
|
|
|
+ },
|
|
|
+ // 表格事件
|
|
|
+ tableEvents: {
|
|
|
+ 'selection-change': this.selectionChange
|
|
|
+ },
|
|
|
+ // 勾选选中行
|
|
|
+ recordSelected: [],
|
|
|
+ /** 表单变量 */
|
|
|
+ formDialogType: 0,
|
|
|
+ formDialogTitles: ["新增", "编辑"],
|
|
|
+ formDialog: false,
|
|
|
+ formData: {
|
|
|
+ mainTitle: '',
|
|
|
+ subTitle: '',
|
|
|
+ type: '',
|
|
|
+ sortNum: '',
|
|
|
},
|
|
|
- };
|
|
|
+ }
|
|
|
},
|
|
|
-
|
|
|
- created() {
|
|
|
- this.getNewclassify();
|
|
|
+ computed: {
|
|
|
+ // 更多参数
|
|
|
+ moreParameters() {
|
|
|
+ return []
|
|
|
+ },
|
|
|
+ formItems() {
|
|
|
+ return [{
|
|
|
+ md: 24,
|
|
|
+ isShow: true,
|
|
|
+ name: 'el-input',
|
|
|
+ attributes: { placeholder: '请输入' },
|
|
|
+ formItemAttributes: {
|
|
|
+ label: '主标题',
|
|
|
+ prop: 'mainTitle',
|
|
|
+ rules: [...required]
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ md: 24,
|
|
|
+ isShow: true,
|
|
|
+ name: 'el-input',
|
|
|
+ attributes: { placeholder: '请输入' },
|
|
|
+ formItemAttributes: {
|
|
|
+ label: '副标题',
|
|
|
+ prop: 'subTitle',
|
|
|
+ rules: [...required]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ md: 24,
|
|
|
+ isShow: true,
|
|
|
+ name: 'el-radio',
|
|
|
+ options: [
|
|
|
+ { label: "普通商品", value: 1 },
|
|
|
+ { label: "套购商品", value: 2 },
|
|
|
+ ],
|
|
|
+ attributes: { filterable: true, placeholder: '请选择', disabled: this.formData.flag === 'START' || this.formDialogType == 2 },
|
|
|
+ formItemAttributes: {
|
|
|
+ label: '商品类别',
|
|
|
+ prop: 'type',
|
|
|
+ rules: [...required]
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ md: 24,
|
|
|
+ isShow: true,
|
|
|
+ name: 'el-input',
|
|
|
+ attributes: { placeholder: '请输入' },
|
|
|
+ formItemAttributes: {
|
|
|
+ label: '排序',
|
|
|
+ prop: 'sortNum',
|
|
|
+ rules: []
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
},
|
|
|
-
|
|
|
methods: {
|
|
|
- // 分页获取商品新维度分类
|
|
|
- getNewclassify() {
|
|
|
- this.listLoading = true;
|
|
|
- const params = {
|
|
|
- pageNum: this.pageNum,
|
|
|
- pageSize: this.pageSize,
|
|
|
- };
|
|
|
- getNewclassify(params).then((res) => {
|
|
|
- this.dataList = res.data.records;
|
|
|
- this.listLoading = false;
|
|
|
- });
|
|
|
+ // 列表请求函数
|
|
|
+ getList: goodsNewsCategoryListPageV2,
|
|
|
+ // 列表导出函数
|
|
|
+ exportList: goodsNewsCategoryPageExport,
|
|
|
+ // 表格列解析渲染数据更改
|
|
|
+ columnParsing(item, defaultData) {
|
|
|
+ return defaultData
|
|
|
},
|
|
|
-
|
|
|
- // 添加分类
|
|
|
- addClassification(type, id) {
|
|
|
- this.addFormType = type;
|
|
|
- if (type == "add") {
|
|
|
- this.addFormVisible = true;
|
|
|
- } else {
|
|
|
- this.editId = id;
|
|
|
- getNewclassifyDetail({newsCategoryId: id}).then((res) => {
|
|
|
- this.addForm.mainTitle = res.data.mainTitle;
|
|
|
- this.addForm.subTitle = res.data.subTitle;
|
|
|
- this.addForm.goodsType = res.data.type;
|
|
|
- this.addForm.sort = res.data.sortNum;
|
|
|
- this.addFormVisible = true;
|
|
|
- });
|
|
|
- }
|
|
|
+ // 监听勾选变化
|
|
|
+ selectionChange(data) {
|
|
|
+ this.recordSelected = data
|
|
|
},
|
|
|
-
|
|
|
- // 提交分类
|
|
|
- submitAddForm() {
|
|
|
- this.$refs.addForm.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- if (this.addFormType == "edit") {
|
|
|
- const params = {
|
|
|
- goodsNewsCategoryId: this.editId, // 商品新维度分类id
|
|
|
- mainTitle: this.addForm.mainTitle, // 分类主标题
|
|
|
- subTitle: this.addForm.subTitle, // 分类副标题
|
|
|
- type: this.addForm.goodsType,
|
|
|
- sortNum: this.addForm.sort,
|
|
|
- };
|
|
|
- editNewclassifyDetail(params).then((res) => {
|
|
|
- this.$successMsg("编辑成功");
|
|
|
- this.getNewclassify();
|
|
|
- this.cancelAddForm();
|
|
|
+ // 表格操作列
|
|
|
+ operation(h, { row, index, column }) {
|
|
|
+ return (
|
|
|
+ <div class='operation-btns'>
|
|
|
+ <el-button type="text" onClick={() => {
|
|
|
+ this.$router.push({
|
|
|
+ name: "newclassify_set",
|
|
|
+ query: {
|
|
|
+ item: row
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}>配置</el-button>
|
|
|
+ <el-button type="text" onClick={() => {
|
|
|
+ getNewclassifyDetail({ newsCategoryId: row.goodsNewsCategoryId }).then(res => {
|
|
|
+ Object.assign(this.formData, res.data)
|
|
|
+ this.formDialogType = 1
|
|
|
+ this.openForm()
|
|
|
})
|
|
|
- } else {
|
|
|
- const params = {
|
|
|
- mainTitle: this.addForm.mainTitle,
|
|
|
- subTitle: this.addForm.subTitle,
|
|
|
- type: this.addForm.goodsType,
|
|
|
- sortNum: this.addForm.sort,
|
|
|
- };
|
|
|
- addNewclassify(params).then((res) => {
|
|
|
- this.$successMsg("添加成功");
|
|
|
- this.getNewclassify();
|
|
|
- this.cancelAddForm();
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
+ }}>编辑</el-button>
|
|
|
+ <el-popconfirm
|
|
|
+ title={`是否确定${row.status ? "关闭" : "开启"}？`}
|
|
|
+ onConfirm={() => {
|
|
|
+ changeNewclassify({
|
|
|
+ goodsNewsCategoryId: row.goodsNewsCategoryId,
|
|
|
+ status: row.status,
|
|
|
+ }).then(res => {
|
|
|
+ this.$message({ type: 'success', message: `${row.status ? "关闭" : "开启"}成功!` })
|
|
|
+ this.$refs.pageRef.refreshList()
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <el-button type="text" slot="reference">{row.status ? "关闭" : "开启"}</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ <el-popconfirm
|
|
|
+ title="确定删除吗？"
|
|
|
+ onConfirm={() => {
|
|
|
+ deleteNewclassify({ goodsNewsCategoryId: row.goodsNewsCategoryId }).then(() => {
|
|
|
+ this.$message({ type: 'success', message: '删除成功!' })
|
|
|
+ this.$refs.pageRef.refreshList()
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <el-button type="text" slot="reference">删除</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
},
|
|
|
-
|
|
|
- // 取消 新增编辑分类
|
|
|
- cancelAddForm() {
|
|
|
- this.addFormVisible = false;
|
|
|
- this.$refs.addForm.resetFields();
|
|
|
- this.addForm.mainTitle = '';
|
|
|
- this.addForm.subTitle = '';
|
|
|
- this.addForm.sort = '';
|
|
|
+ addData() {
|
|
|
+ this.formDialogType = 0
|
|
|
+ this.openForm()
|
|
|
},
|
|
|
-
|
|
|
- // 关闭
|
|
|
- closeItem(item) {
|
|
|
- const status=!item.status
|
|
|
- const params = {
|
|
|
- goodsNewsCategoryId: item.goodsNewsCategoryId, // 商品新维度分类id
|
|
|
- status: status, // 状态 true:开启,false:关闭
|
|
|
- };
|
|
|
- changeNewclassify(params).then(res => {
|
|
|
- this.$successMsg();
|
|
|
- this.getNewclassify();
|
|
|
- })
|
|
|
+ openForm() {
|
|
|
+ this.formDialog = true;
|
|
|
},
|
|
|
-
|
|
|
- // 删除
|
|
|
- deleteItem(item) {
|
|
|
- deleteNewclassify({
|
|
|
- goodsNewsCategoryId: item.goodsNewsCategoryId
|
|
|
- }).then(res => {
|
|
|
- this.$successMsg();
|
|
|
- this.getNewclassify();
|
|
|
- })
|
|
|
+ formCancel() {
|
|
|
+ this.$refs.formRef.$refs.inlineForm.clearValidate()
|
|
|
+ this.$data.formData = this.$options.data().formData
|
|
|
+ this.formDialog = false
|
|
|
},
|
|
|
-
|
|
|
- // 配置
|
|
|
- setUp(item) {
|
|
|
- this.$router.push({
|
|
|
- name: "newclassify_set",
|
|
|
- query: {
|
|
|
- item
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- changeSort(item) {
|
|
|
- const params = {
|
|
|
- goodsNewsCategoryId: item.goodsNewsCategoryId,
|
|
|
- sortNum: item.sortNum
|
|
|
- };
|
|
|
- editNewclassifyDetail(params).then((res) => {
|
|
|
- this.getNewclassify();
|
|
|
+ formConfirm() {
|
|
|
+ this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
|
|
|
+ if (valid) {
|
|
|
+ ([addNewclassify, editNewclassifyDetail][this.formDialogType])(this.formData).then(res => {
|
|
|
+ this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
|
|
|
+ this.formCancel()
|
|
|
+ this.$refs.pageRef.refreshList()
|
|
|
+ })
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.sort-input {
|
|
|
- width: 60px;
|
|
|
- ::v-deep input {
|
|
|
- text-align: center;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped></style>
|
linwenxin