zfire-newmall-admin/src/views/mallManagement/goods/classify_index/index.vue

<template>
	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
		<template slot-scope="{activeKey, data}">
			<div v-if="activeKey == 'list'" class="app-container">
				<div class="btn-group clearfix">
				  <div class="fl">
				    <el-button v-if="$restrict('add')" size="small" type="primary" icon="el-icon-plus" @click="addOrEditParent('add1')">添加分类</el-button>
				  </div>
				  <div class="fr">
				    <el-input placeholder="请输入分类名称进行搜索" v-model="screenForm.keyword" size="small" style="width: 240px;" clearable>
				      <el-button slot="append" icon="el-icon-search" size="small" @click="getListByScreen"></el-button>
				    </el-input>
				  </div>
				</div>
				
				<div class="table">
				  <el-table :data="dataList" row-key="categoryId" border default-expand-all :tree-props="{children: 'children'}">
				    <el-table-column prop="name" label="分类名称" min-width="150"></el-table-column>
				    <el-table-column align="center" label="分类图片" prop="imgUrl" width="80">
				      <template slot-scope="scope">
				        <el-image style="width: 40px; height: 40px; display: block; margin: 0 auto;" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]" fit="cover">
				          <div slot="error" style="height: 100%;font-size: 40px;">
				            <i class="el-icon-picture-outline"></i>
				          </div>
				        </el-image>
				      </template>
				    </el-table-column>
				    <el-table-column align="center" prop="createTime" label="创建时间" min-width="160"></el-table-column>
				    <!-- <el-table-column align="center" prop="goodsNum" label="商品数"></el-table-column> -->
				    <el-table-column align="center" prop="sortNum" label="排序"></el-table-column>
				    <el-table-column align="center" prop="companyName" label="商户" min-width="120"></el-table-column>
				    <el-table-column align="center" label="状态" class-name="status-col">
				      <template slot-scope="scope">
				        <el-tag :type="scope.row.status ? 'success':'danger'">{{ scope.row.status ? '显示':'隐藏' }}</el-tag>
				      </template>
				    </el-table-column>
				    <el-table-column align="right" label="操作" width="150" fixed="right">
				      <template slot-scope="scope">
				        <el-button type="primary" size="mini" icon="el-icon-plus" v-if="scope.row.level == 1 && $restrict('add')" @click="addOrEditChild('add2', scope.row.categoryId)"></el-button>
				        <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 1 && $restrict('edit')" @click="addOrEditParent('edit1', scope.row.categoryId)"></el-button>
				        <el-button type="primary" size="mini" icon="el-icon-edit" v-if="scope.row.level == 2 && $restrict('edit')" @click="addOrEditChild('edit2', scope.row.categoryId)"></el-button>
				        <el-popconfirm v-if="$restrict('del')" style="margin-left: 10px;" title="确定删除吗？" @confirm="handleDelete(scope.row.categoryId)" >
				          <el-button slot="reference" size="mini" icon="el-icon-delete"></el-button>
				        </el-popconfirm>
				
				      </template>
				    </el-table-column>
				  </el-table>
				</div>
			</div>
			<!-- 新增编辑 一级分类 -->
			<div v-if="addParentFormVisible" class="app-container">
				<el-form ref="addParentForm" :model="addParentForm" :rules="addParentFormRules" label-position="left" label-width="80px">
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="一级分类" prop="oneClassify">
							  <el-input type="text" placeholder="请输入一级分类名称" v-model="addParentForm.oneClassify" maxlength="10" show-word-limit style="width: 250px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="税务编号" prop="taxNumber">
							  <el-input placeholder="请输入税务编号" v-model="addParentForm.taxNumber" style="width: 250px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="税率" prop="taxPercent">
							  <el-input placeholder="请输入税率" v-model="addParentForm.taxPercent" style="width: 250px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="状态" prop="status">
							  <el-radio-group v-model="addParentForm.status">
							    <el-radio :label="true">显示</el-radio>
							    <el-radio :label="false">隐藏</el-radio>
							  </el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="排序" prop="sort">
							  <el-input placeholder="请输入排序" v-model.number="addParentForm.sort" style="width: 250px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="分类图片" prop="imgUrl">
							  <el-upload
							    class="avatar-uploader"
							    style="height:122px"
							    :action="baseURL + 'common/upload'"
							    :headers="myHeaders"
							    :show-file-list="false"
							    :on-success="uploadSuccess"
							    :before-upload="beforeUpload">
							    <img v-if="addParentForm.imgUrl" :src="addParentForm.imgUrl" class="avatar">
							    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
							  </el-upload>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
				  <el-button @click="data.removeTab()">取 消</el-button>
				  <el-button type="primary" @click="submitAddParentForm(data.removeTab)">确 定</el-button>
				</div>
			</div>
			<!-- 新增编辑 二级分类 -->
			<div v-if="addChildFormVisible" class="app-container">
				<el-form ref="addChildForm" :model="addChildForm" :rules="addChildFormRules" label-position="left" label-width="80px">
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="一级分类" prop="oneClassify">
							  <el-select v-model="addChildForm.oneClassify" placeholder="请选择一级分类" disabled style="width: 250px;">
							    <el-option :label="item.name" :value="item.categoryId" v-for="(item, index) in classifyList" :key="index"></el-option>
							  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="二级分类" prop="twoClassify">
							  <el-input type="text" placeholder="请输入二级分类名称" v-model="addChildForm.twoClassify" maxlength="10" show-word-limit style="width: 250px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="工单大类" prop="main">
							  <el-select v-model="addChildForm.main" value-key="categoryId" placeholder="请选择工单大类" style="width: 250px;" @change="changeOrderType">
							    <el-option :label="item.name" :value="item" v-for="(item, index) in orderMainType" :key="index">
							     <!-- <span style="color: #8492a6">{{ item.number }}</span>
							      <span style="margin-left: 10px;">{{ item.name }}</span> -->
							    </el-option>
							  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="工单小类" prop="smallType">
							  <el-select v-model="addChildForm.small" value-key="categoryId" placeholder="请选择工单小类" style="width: 250px;" :disabled="!addChildForm.main.name">
							    <el-option :label="item.name" :value="item" v-for="(item, index) in orderSmallType" :key="index">
							     <!-- <span style="color: #8492a6">{{ item.id }}</span>
							      <span style="margin-left: 10px;">{{ item.name }}</span> -->
							    </el-option>
							  </el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="工单类型" prop="workOrderType">
							  <el-radio-group v-model="addChildForm.workOrderType">
							    <el-radio :label="'INSTALL'">安装</el-radio>
							    <el-radio :label="'REPAIR'">维修</el-radio>
							  </el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="税务编号" prop="taxNumber">
							  <el-input placeholder="请输入税务编号" v-model="addChildForm.taxNumber" style="width: 250px;" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="税率" prop="taxPercent">
							  <el-input placeholder="请输入税率" v-model="addChildForm.taxPercent" style="width: 250px;" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="状态" prop="status">
							  <el-radio-group v-model="addChildForm.status">
							    <el-radio :label="true">显示</el-radio>
							    <el-radio :label="false">隐藏</el-radio>
							  </el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="排序" prop="sort">
							  <el-input placeholder="请输入排序" v-model.number="addChildForm.sort" style="width: 250px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="分类图片" prop="imgUrl">
							  <el-upload
							    class="avatar-uploader"
							    style="height:122px"
							    :action="baseURL + 'common/upload'"
							    :headers="myHeaders"
							    :show-file-list="false"
							    :on-success="uploadSuccess"
							    :before-upload="beforeUpload">
							    <img v-if="addChildForm.imgUrl" :src="addChildForm.imgUrl" class="avatar">
							    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
							  </el-upload>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
				  <el-button @click="data.removeTab()">取 消</el-button>
				  <el-button type="primary" @click="submitAddChildForm(data.removeTab)">确 定</el-button>
				</div>
			</div>
		</template>
	</zj-tab-page>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getClassifyList, addClassify, editClassify, deleteClassify, getClassifyDetail, getSmallType } from '@/api/goods'
import { ORDER_MAIN_TYPE } from "@/utils/select_data";
import { getMainList } from "@/api/workOrder/settlementStandardInstall";

export default {
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: {'x-token': getToken()},

      dataList: [], // 列表数据
      listLoading: true, // 列表加载loading
      screenForm: { // 筛选表单数据
        keyword: '', // 关键词
      },

      editParentId:  null,
      addParentFormType: 'add',
      addParentFormVisible: false,
      addParentForm: {
        oneClassify: '',
        twoClassify: '',
        imgUrl: '',
        taxNumber: '',
        taxPercent: '',
        status: true,
        sort: 0,
      },
      addParentFormRules: {
        oneClassify: [
          { required: true, message: '请填写一级分类名称', trigger: 'blur' },
        ],
        imgUrl: [
          { required: true, message: '请上传分类图片', trigger: 'change' }
        ]
      },

      editChildId:  null,
      addChildFormType: 'add',
      addChildFormVisible: false,
      addChildForm: {
        oneClassify: '',
        twoClassify: '',
		main: {},
        small: {},
        workOrderType: 'REPAIR',
        imgUrl: '',
        taxNumber: '',
        taxPercent: '',
        status: true,
        sort: 0,
      },
      addChildFormRules: {
        oneClassify: [
          { required: true, message: '请选择一级分类', trigger: 'change' }
        ],
        twoClassify: [
          { required: true, message: '请填写二级分类', trigger: 'blur' }
        ],
        workOrderType: [
          { required: true, message: '请选择工单类型', trigger: 'change' }
        ],
        imgUrl: [
          { required: true, message: '请上传分类图片', trigger: 'change' }
        ],
      },

      classifyList: [],

      // orderMainType: ORDER_MAIN_TYPE,
			orderMainType: [],
      orderSmallType: [],
			formType: 'add',
			formVisible: false,
    }
  },
  created() {
    this.getList();
	this.getMainList()
  },
  methods: {

    getList() {
      this.listLoading = true;

      let params = {
        name: this.screenForm.keyword,
      };

      getClassifyList(params).then(res => {
        this.dataList = res.data;
      })
    },
		
	getMainList(){
		getMainList({type: 2}).then(res => {
			this.orderMainType = res.data
		})
	},

    // 筛选后重新获取列表
    getListByScreen() {
      this.currentPage = 1;
      this.getList();
    },

    // 打开 新增编辑 一级分类
    addOrEditParent(type, cid) {
		this.$refs.tabPage.addTab({
			// 对应显示的模块
			activeKey: type,
			// 唯一标识
			key: type,
			// 页签名称
			label: ({ edit1: "编辑一级分类", add1: "添加一级分类" })[type],
			// 打开时事件
			triggerEvent: () => {
				
				this.$nextTick(()=>{
					this.formType = type
					this.formVisible = true
					this.addParentFormType = type;
					this.addParentFormVisible = true;
					if(type == 'edit'){
						this.editParentId = cid;
						getClassifyDetail({categoryId: cid}).then(res => {
						  this.addParentForm = {
						    oneClassify: res.data.name,
						    status: res.data.status,
						    imgUrl: res.data.imgUrl,
						    taxNumber: res.data.taxNumber,
						    taxPercent: res.data.taxPercent,
						    sort: res.data.sortNum
						  }
						})
					}
				})
			},
			// 关闭时事件
			closeEvent: () => {
				this.cancelAddParentForm()
			}
		})
    },

    // 取消 新增编辑 一级分类
    cancelAddParentForm(){
      this.addParentFormVisible = false;
      this.$refs.addParentForm.resetFields();
    },

    // 提交 一级分类
    submitAddParentForm(cancel) {
      this.$refs.addParentForm.validate((valid) => {
        if (valid) {
          let params = {
            name: this.addParentForm.oneClassify,
            imgUrl: this.addParentForm.imgUrl,
            taxNumber: this.addParentForm.taxNumber,
            taxPercent: this.addParentForm.taxPercent,
            status: this.addParentForm.status,
            sortNum: this.addParentForm.sort,
          }
          if(this.addParentFormType == 'edit') {
            params.categoryId = this.editParentId;
            editClassify(params).then(res => {
			  cancel('list')
              this.cancelAddParentForm();
              this.getList();
              this.$successMsg('编辑成功');
            })
          }else {
            addClassify(params).then(res => {
			  cancel('list')
              this.cancelAddParentForm();
              this.getList();
              this.$successMsg('添加成功');
            })
          }
        }
      })
    },

    // 改变大类
    changeOrderType(e) {
		this.orderSmallType = e.children
		this.addChildForm.small = {};
		// this.getSmallType();
    },

    getSmallType() {
      getSmallType({
        mainNumber: this.addChildForm.orderType,
        categoryId: this.addChildForm.oneClassify
      }).then(res => {
        this.orderSmallType = res.data;
      })
    },

    // 打开 新增编辑 二级分类
    addOrEditChild(type, cid) {
		this.$refs.tabPage.addTab({
			// 对应显示的模块
			activeKey: type,
			// 唯一标识
			key: type,
			// 页签名称
			label: ({ edit2: "编辑二级分类", add2: "添加二级分类" })[type],
			// 打开时事件
			triggerEvent: () => {
				
				this.$nextTick(()=>{
					this.formType = type
					this.formVisible = true
					this.getMainList()
					this.addChildFormType = type;
					this.addChildFormVisible = true;
					getClassifyList({name: ''}).then(res => {
					  this.classifyList = res.data;
					})
					if(type == 'add') {
					  this.addChildForm.oneClassify = cid;
					  let item = this.dataList[this.$findElem(this.dataList, 'categoryId', cid)];
					  this.addChildForm.taxNumber = item.taxNumber;
					  this.addChildForm.taxPercent = item.taxPercent;
					}
					if(type == 'edit'){
						this.editChildId = cid;
						getClassifyDetail({categoryId: cid}).then(res => {
							console.log(this.orderMainType,'获取大类')
							this.orderMainType.forEach(item =>{
								if(item.categoryId == res.data.mainNumber){
									this.orderSmallType = item.children
								}
							})
							this.addChildForm = {
								oneClassify: res.data.parentId,
								twoClassify: res.data.name,
								main: {name: res.data.mainName,categoryId: res.data.mainNumber},
								small: {name: res.data.smallName,categoryId: res.data.smallNumber},
								workOrderType: res.data.workOrderType,
								imgUrl: res.data.imgUrl,
								taxNumber: res.data.taxNumber,
								taxPercent: res.data.taxPercent,
								status: res.data.status,
								sort: res.data.sortNum
							}
							// this.getSmallType();
						})
					}
				})
			},
			// 关闭时事件
			closeEvent: () => {
				this.cancelAddChildForm()
			}
		})
    },

    // 取消 新增编辑 二级分类
    cancelAddChildForm(){
      this.addChildFormVisible = false;
      this.$refs.addChildForm.resetFields();
    },

    // 提交 二级分类
    submitAddChildForm(cancel) {
      this.$refs.addChildForm.validate((valid) => {
        if (valid) {
          // let index = this.$findElem(ORDER_MAIN_TYPE, 'number', this.addChildForm.orderType);
          // let mainName = index >= 0 ? ORDER_MAIN_TYPE[index].name : '';

          // let index2 = this.$findElem(this.orderSmallType, 'id', this.addChildForm.smallType);
          // let smallName = index2 >= 0 ? this.orderSmallType[index2].name : '';
          
          let params = {}
          if(this.addChildFormType == 'edit') {
            params = {
                categoryId: this.editChildId,
                name: this.addChildForm.twoClassify,
                mainNumber: this.addChildForm.main.categoryId || '',
                mainName: this.addChildForm.main.name || '',
                smallNumber: this.addChildForm.small.categoryId || '',
                smallName: this.addChildForm.small.name,
                workOrderType: this.addChildForm.workOrderType,
                imgUrl: this.addChildForm.imgUrl,
                taxNumber: this.addChildForm.taxNumber,
                taxPercent: this.addChildForm.taxPercent,
                status: this.addChildForm.status,
                sortNum: this.addChildForm.sort
            }
            editClassify(params).then(res => {
			  cancel('list')
              this.cancelAddChildForm();
              this.getList();
              this.$successMsg('编辑成功');
            })
          }else {
            params = {
              children: [{
                parentId: this.addChildForm.oneClassify,
                name: this.addChildForm.twoClassify,
                mainNumber: this.addChildForm.main.categoryId || '',
                mainName: this.addChildForm.main.name || '',
                smallNumber: this.addChildForm.small.categoryId || '',
                smallName: this.addChildForm.small.name,
                imgUrl: this.addChildForm.imgUrl,
                taxNumber: this.addChildForm.taxNumber,
                taxPercent: this.addChildForm.taxPercent,
                status: this.addChildForm.status,
                sortNum: this.addChildForm.sort
              }]
            }
            addClassify(params).then(res => {
			  cancel('list')
              this.cancelAddChildForm();
              this.getList();
              this.$successMsg('添加成功');
            })
          }
        }
      })
    },

    // 操作 - 删除
    handleDelete(id) {
      deleteClassify({categoryId: id}).then(res => {
        this.getList();
        this.$successMsg();
      })
    },

    uploadSuccess(res, file, index) {
      if (this.addParentFormVisible) {
        this.addParentForm.imgUrl = res.data.url
      } else {
        this.addChildForm.imgUrl = res.data.url
      }
    },

    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ['jpg', 'jpeg', 'png', 'gif'];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$errorMsg('只支持上传jpg/jpeg/png/gif文件!');
        return false;
      }
    },

  }

}

</script>

<style scoped lang="scss">
</style>

<style lang="scss">
  .el-image-viewer__wrapper .el-icon-circle-close {
    color: #ffffff !important;
    font-size: 60px;
  }
  .el-table__row.expanded {
    background: #f5f5f5;
  }

  th:first-child, th:last-child {
    text-align: center !important;
  }
</style>