区域管理页面
This commit is contained in:
		
							parent
							
								
									fe9338fda3
								
							
						
					
					
						commit
						a9c0c1316c
					
				| 
						 | 
				
			
			@ -0,0 +1,94 @@
 | 
			
		|||
import request from '@/utils/request'
 | 
			
		||||
 | 
			
		||||
// export function listData(query) {
 | 
			
		||||
//   return request({
 | 
			
		||||
//     url: '/system/dict/data/list',
 | 
			
		||||
//     method: 'get',
 | 
			
		||||
//     params: query
 | 
			
		||||
//   })
 | 
			
		||||
// } 
 | 
			
		||||
 | 
			
		||||
// export function getDicts(dictType) {
 | 
			
		||||
//   return request({
 | 
			
		||||
//     url: '/system/dict/data/type/' + dictType,
 | 
			
		||||
//     method: 'get'
 | 
			
		||||
//   })
 | 
			
		||||
// }
 | 
			
		||||
 | 
			
		||||
// 系统区域权限树
 | 
			
		||||
export function systemAreaTreeApi(data) {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/smart-canteen/api/v2/alloc/area/system-auth/tree',
 | 
			
		||||
    method: 'post',
 | 
			
		||||
    headers: {
 | 
			
		||||
        "merchant-id":"378915229716713472",
 | 
			
		||||
    },
 | 
			
		||||
    data: data
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
// 查询区域列表
 | 
			
		||||
export function getAreaListApi(data) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: '/smart-canteen/api/v2/alloc/area/page',
 | 
			
		||||
      method: 'post',
 | 
			
		||||
      headers: {
 | 
			
		||||
          "merchant-id":"378915229716713472",
 | 
			
		||||
      },
 | 
			
		||||
      data: data
 | 
			
		||||
    })
 | 
			
		||||
}
 | 
			
		||||
// 根据区域id,查询区域名称
 | 
			
		||||
export function getAreaNameApi(data) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: '/smart-canteen/api/v2/alloc/area/get-area-name',
 | 
			
		||||
      method: 'post',
 | 
			
		||||
      headers: {
 | 
			
		||||
          "merchant-id":"378915229716713472",
 | 
			
		||||
      },
 | 
			
		||||
      data: data
 | 
			
		||||
    })
 | 
			
		||||
}
 | 
			
		||||
// 查询区域(食堂,档口,餐线)编号
 | 
			
		||||
export function getAreaNumApi(data) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: 'smart-canteen/api/v2/alloc/canteen/get-canteen-num',
 | 
			
		||||
      method: 'post',
 | 
			
		||||
      headers: {
 | 
			
		||||
          "merchant-id":"378915229716713472",
 | 
			
		||||
      },
 | 
			
		||||
      data: data
 | 
			
		||||
    })
 | 
			
		||||
}
 | 
			
		||||
// 新增区域
 | 
			
		||||
export function addAreaApi(data) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: 'smart-canteen/api/v2/alloc/area/add',
 | 
			
		||||
      method: 'post',
 | 
			
		||||
      headers: {
 | 
			
		||||
          "merchant-id":"378915229716713472",
 | 
			
		||||
      },
 | 
			
		||||
      data: data
 | 
			
		||||
    })
 | 
			
		||||
} 
 | 
			
		||||
//修改区域
 | 
			
		||||
export function updateAreaApi(data) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: 'smart-canteen/api/v2/alloc/area/update',
 | 
			
		||||
      method: 'post',
 | 
			
		||||
      headers: {
 | 
			
		||||
          "merchant-id":"378915229716713472",
 | 
			
		||||
      },
 | 
			
		||||
      data: data
 | 
			
		||||
    })
 | 
			
		||||
}
 | 
			
		||||
//删除区域
 | 
			
		||||
export function removeAreaApi(data) {
 | 
			
		||||
    return request({
 | 
			
		||||
      url: 'smart-canteen/api/v2/alloc/area/remove',
 | 
			
		||||
      method: 'post',
 | 
			
		||||
      headers: {
 | 
			
		||||
          "merchant-id":"378915229716713472",
 | 
			
		||||
      },
 | 
			
		||||
      data: data
 | 
			
		||||
    })
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -0,0 +1,648 @@
 | 
			
		|||
<template>
 | 
			
		||||
    <!-- 类型管理 -->
 | 
			
		||||
    <div class="app-container" id="toolsType">
 | 
			
		||||
      <el-row :gutter="20">
 | 
			
		||||
        <!--树数据-->
 | 
			
		||||
        <el-col :span="5" :xs="24">
 | 
			
		||||
          <div class="head-container">
 | 
			
		||||
            <el-input
 | 
			
		||||
              v-model="areaName"
 | 
			
		||||
              placeholder="请输入类型名称"
 | 
			
		||||
              clearable
 | 
			
		||||
              maxlength="50"
 | 
			
		||||
              size="small"
 | 
			
		||||
              prefix-icon="el-icon-search"
 | 
			
		||||
              style="margin-bottom: 20px"
 | 
			
		||||
            />
 | 
			
		||||
          </div>
 | 
			
		||||
          <div class="head-container" style>
 | 
			
		||||
            <el-tree
 | 
			
		||||
              style="height: 700px; overflow: scroll"
 | 
			
		||||
              :data="treeOptions"
 | 
			
		||||
              :props="defaultProps"
 | 
			
		||||
              :expand-on-click-node="false"
 | 
			
		||||
              :filter-node-method="filterNode"
 | 
			
		||||
              ref="tree"
 | 
			
		||||
              node-key="id"
 | 
			
		||||
              :default-expand-all="false"
 | 
			
		||||
              highlight-current
 | 
			
		||||
              @node-click="handleNodeClick"
 | 
			
		||||
            >
 | 
			
		||||
              <span
 | 
			
		||||
                class="custom-tree-node"
 | 
			
		||||
                slot-scope="{ node, data }"
 | 
			
		||||
                @mousemove="onMousemove(data)"
 | 
			
		||||
                @mouseleave="onMouseleave()"
 | 
			
		||||
              >
 | 
			
		||||
                <span v-if="isMousemoveId === data.id && node.label.length > 10">{{
 | 
			
		||||
                  node.label.slice(0, 10) + "..."
 | 
			
		||||
                }}</span>
 | 
			
		||||
                <span v-else>{{ node.label }}</span>
 | 
			
		||||
  
 | 
			
		||||
                <span class="btn-items" v-if="isMousemoveId === data.id">
 | 
			
		||||
                  <el-button
 | 
			
		||||
                    type="text"
 | 
			
		||||
                    size="mini"
 | 
			
		||||
                    icon="el-icon-plus"
 | 
			
		||||
                    @click.stop="() => appendTreeNode(data)"
 | 
			
		||||
                  >
 | 
			
		||||
                  </el-button>
 | 
			
		||||
                  <!-- <el-button
 | 
			
		||||
                    type="text"
 | 
			
		||||
                    size="mini"
 | 
			
		||||
                    icon="el-icon-edit-outline"
 | 
			
		||||
                    style="color: #67c23a"
 | 
			
		||||
                    v-if="data.id !== 0"
 | 
			
		||||
                    @click.stop="() => editTreeNode(data)"
 | 
			
		||||
                  >
 | 
			
		||||
                  </el-button> -->
 | 
			
		||||
                  <el-button
 | 
			
		||||
                    type="text"
 | 
			
		||||
                    size="mini"
 | 
			
		||||
                    icon="el-icon-delete"
 | 
			
		||||
                    style="color: #f56c6c"
 | 
			
		||||
                    v-if="data.parentId != '-1'"
 | 
			
		||||
                    @click.stop="() => removeTreeNode(data)"
 | 
			
		||||
                  >
 | 
			
		||||
                  </el-button>
 | 
			
		||||
                </span>
 | 
			
		||||
              </span>
 | 
			
		||||
            </el-tree>
 | 
			
		||||
          </div>
 | 
			
		||||
        </el-col>
 | 
			
		||||
        <!--用户数据-->
 | 
			
		||||
        <el-col :span="19" :xs="24">
 | 
			
		||||
          <el-form
 | 
			
		||||
            :model="queryParams"
 | 
			
		||||
            ref="queryForm"
 | 
			
		||||
            size="small"
 | 
			
		||||
            :inline="true"
 | 
			
		||||
            v-show="showSearch"
 | 
			
		||||
            label-width="68px"
 | 
			
		||||
          >
 | 
			
		||||
            <el-form-item label="区域" prop="keyword">
 | 
			
		||||
              <el-input
 | 
			
		||||
                v-model="queryParams.keyword"
 | 
			
		||||
                placeholder="请输入关键字"
 | 
			
		||||
                clearable
 | 
			
		||||
                style="width: 240px"
 | 
			
		||||
                @keyup.enter.native="handleQuery"
 | 
			
		||||
              />
 | 
			
		||||
            </el-form-item>
 | 
			
		||||
  
 | 
			
		||||
            <el-form-item>
 | 
			
		||||
              <el-button
 | 
			
		||||
                type="primary"
 | 
			
		||||
                icon="el-icon-search"
 | 
			
		||||
                size="mini"
 | 
			
		||||
                @click="handleQuery"
 | 
			
		||||
                >查询</el-button
 | 
			
		||||
              >
 | 
			
		||||
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
 | 
			
		||||
                >重置</el-button
 | 
			
		||||
              >
 | 
			
		||||
            </el-form-item>
 | 
			
		||||
          </el-form> 
 | 
			
		||||
  
 | 
			
		||||
          <el-table v-loading="loading" :data="typeList" border>
 | 
			
		||||
            <el-table-column label="序号" align="center" width="80" type="index">
 | 
			
		||||
                  <template slot-scope="scope">
 | 
			
		||||
                      <span>{{(queryParams.pageNum - 1) * 10 + scope.$index + 1}}</span>
 | 
			
		||||
                  </template>
 | 
			
		||||
            </el-table-column>
 | 
			
		||||
            <el-table-column label="区域编号" align="center" key="areaNum" prop="areaNum" show-overflow-tooltip/>
 | 
			
		||||
            <el-table-column label="区域名称" align="center" key="areaName" prop="areaName" show-overflow-tooltip/>
 | 
			
		||||
            <el-table-column label="区域描述" align="center" key="areaDescribe" prop="areaDescribe" show-overflow-tooltip/>
 | 
			
		||||
            <el-table-column label="上级区域" align="center" key="superAreaName" prop="superAreaName" show-overflow-tooltip/>
 | 
			
		||||
            <el-table-column label="负责人" align="center" key="director" prop="director" show-overflow-tooltip/>
 | 
			
		||||
            <el-table-column label="电话" align="center" key="contactTel" prop="contactTel" show-overflow-tooltip/>  
 | 
			
		||||
            <el-table-column label="操作" align="center" width="180">
 | 
			
		||||
              <template slot-scope="scope">
 | 
			
		||||
                <el-button
 | 
			
		||||
                  size="mini"
 | 
			
		||||
                  type="text"
 | 
			
		||||
                  icon="el-icon-edit"
 | 
			
		||||
                  @click="handleUpdate(scope.row)"
 | 
			
		||||
                >
 | 
			
		||||
                  编辑
 | 
			
		||||
                </el-button>
 | 
			
		||||
                <el-button
 | 
			
		||||
                  size="mini"
 | 
			
		||||
                  type="text"
 | 
			
		||||
                  icon="el-icon-delete"
 | 
			
		||||
                  @click="handleDelete(scope.row)" 
 | 
			
		||||
                >
 | 
			
		||||
                  删除
 | 
			
		||||
                </el-button>
 | 
			
		||||
              </template>
 | 
			
		||||
            </el-table-column>
 | 
			
		||||
          </el-table>
 | 
			
		||||
  
 | 
			
		||||
          <pagination
 | 
			
		||||
            v-show="total > 0"
 | 
			
		||||
            :total="total"
 | 
			
		||||
            :page.sync="queryParams.pageNum"
 | 
			
		||||
            :limit.sync="queryParams.pageSize"
 | 
			
		||||
            @pagination="getList"
 | 
			
		||||
          />
 | 
			
		||||
        </el-col>
 | 
			
		||||
      </el-row>
 | 
			
		||||
  
 | 
			
		||||
      <!-- 添加或修改用户配置对话框 -->
 | 
			
		||||
      <el-dialog
 | 
			
		||||
        :title="title+'-区域'"
 | 
			
		||||
        :visible.sync="open"
 | 
			
		||||
        width="1000px"
 | 
			
		||||
        append-to-body
 | 
			
		||||
        :close-on-click-modal="false"
 | 
			
		||||
      >
 | 
			
		||||
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
 | 
			
		||||
          <el-row>
 | 
			
		||||
            <el-col :span="12">
 | 
			
		||||
              <el-form-item label="区域编号" prop="areaNum">
 | 
			
		||||
                <el-input
 | 
			
		||||
                  v-model="form.areaNum"
 | 
			
		||||
                  type="text" disabled
 | 
			
		||||
                  placeholder="请输入区域编号"
 | 
			
		||||
                  maxlength="30"
 | 
			
		||||
                />
 | 
			
		||||
              </el-form-item>
 | 
			
		||||
            </el-col>
 | 
			
		||||
            <el-col :span="12">
 | 
			
		||||
              <el-form-item label="区域名称" prop="areaName">
 | 
			
		||||
                <el-input
 | 
			
		||||
                  v-model="form.areaName"
 | 
			
		||||
                  type="text"
 | 
			
		||||
                  placeholder="请输入区域名称"
 | 
			
		||||
                  maxlength="30" 
 | 
			
		||||
                />
 | 
			
		||||
              </el-form-item>
 | 
			
		||||
            </el-col>
 | 
			
		||||
          </el-row>
 | 
			
		||||
          <el-row>
 | 
			
		||||
            <el-col :span="12">
 | 
			
		||||
              <el-form-item label="区域描述" prop="areaDescribe">
 | 
			
		||||
                <el-input
 | 
			
		||||
                  v-model="form.areaDescribe"
 | 
			
		||||
                  type="text"
 | 
			
		||||
                  placeholder="请输入区域描述"
 | 
			
		||||
                  maxlength="30"
 | 
			
		||||
                />
 | 
			
		||||
              </el-form-item>
 | 
			
		||||
            </el-col>
 | 
			
		||||
            <el-col :span="12">
 | 
			
		||||
              <el-form-item label="上级区域" prop="superAreaName">
 | 
			
		||||
                <el-input
 | 
			
		||||
                  v-model="form.superAreaName"
 | 
			
		||||
                  type="text" disabled
 | 
			
		||||
                  placeholder="请输入上级区域"
 | 
			
		||||
                  maxlength="30" 
 | 
			
		||||
                />
 | 
			
		||||
              </el-form-item>
 | 
			
		||||
            </el-col>
 | 
			
		||||
          </el-row>
 | 
			
		||||
          <el-row>
 | 
			
		||||
            <el-col :span="12">
 | 
			
		||||
              <el-form-item label="负责人" prop="director">
 | 
			
		||||
                <el-input
 | 
			
		||||
                  v-model="form.director"
 | 
			
		||||
                  type="text"
 | 
			
		||||
                  placeholder="请输入负责人"
 | 
			
		||||
                  maxlength="30"
 | 
			
		||||
                />
 | 
			
		||||
              </el-form-item>
 | 
			
		||||
            </el-col>
 | 
			
		||||
            <el-col :span="12">
 | 
			
		||||
              <el-form-item label="联系方式" prop="contactTel">
 | 
			
		||||
                <el-input
 | 
			
		||||
                  v-model="form.contactTel"
 | 
			
		||||
                  type="text"
 | 
			
		||||
                  placeholder="请输入联系方式"
 | 
			
		||||
                  maxlength="30" 
 | 
			
		||||
                />
 | 
			
		||||
              </el-form-item>
 | 
			
		||||
            </el-col>
 | 
			
		||||
          </el-row>
 | 
			
		||||
        </el-form>
 | 
			
		||||
        <div slot="footer" class="dialog-footer">
 | 
			
		||||
          <template>
 | 
			
		||||
            <el-button
 | 
			
		||||
              v-if="this.title == '新增' || this.title == '修改'"
 | 
			
		||||
              type="primary"
 | 
			
		||||
              @click="submitForm"
 | 
			
		||||
              >确 定</el-button
 | 
			
		||||
            >
 | 
			
		||||
          </template>
 | 
			
		||||
  
 | 
			
		||||
          <el-button @click="cancel">取 消</el-button> 
 | 
			
		||||
        </div>
 | 
			
		||||
      </el-dialog> 
 | 
			
		||||
    </div>
 | 
			
		||||
  </template>
 | 
			
		||||
  
 | 
			
		||||
  <script>
 | 
			
		||||
  import Treeselect from "@riophae/vue-treeselect";
 | 
			
		||||
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 | 
			
		||||
  import { systemAreaTreeApi,getAreaListApi,getAreaNameApi,getAreaNumApi,addAreaApi,updateAreaApi,removeAreaApi } from "@/api/base/area";
 | 
			
		||||
//   import { imgUpLoad } from "@/api/system/upload";
 | 
			
		||||
  
 | 
			
		||||
  export default {
 | 
			
		||||
    name: "ToolsType",
 | 
			
		||||
    components: { Treeselect },
 | 
			
		||||
    data() {
 | 
			
		||||
      return {
 | 
			
		||||
        // 遮罩层
 | 
			
		||||
        loading: true,
 | 
			
		||||
        // 选中数组
 | 
			
		||||
        ids: [],
 | 
			
		||||
        // 非单个禁用
 | 
			
		||||
        single: true,
 | 
			
		||||
        // 非多个禁用
 | 
			
		||||
        multiple: true,
 | 
			
		||||
        // 显示搜索条件
 | 
			
		||||
        showSearch: true,
 | 
			
		||||
        // 树选项
 | 
			
		||||
        treeOptions: undefined,
 | 
			
		||||
        treeTemp: [],
 | 
			
		||||
        isMousemoveId: null,
 | 
			
		||||
        defaultProps: {
 | 
			
		||||
          children: "children",
 | 
			
		||||
          label: "treeName",
 | 
			
		||||
        },
 | 
			
		||||
        areaName:"",
 | 
			
		||||
        areaId:"",
 | 
			
		||||
        // 查询参数
 | 
			
		||||
        queryParams: {
 | 
			
		||||
          pageNum: 1,
 | 
			
		||||
          pageSize: 10, 
 | 
			
		||||
        },
 | 
			
		||||
        // 总条数
 | 
			
		||||
        total: 0, 
 | 
			
		||||
        //列表数据
 | 
			
		||||
        typeList: undefined,
 | 
			
		||||
        // 是否显示弹出层
 | 
			
		||||
        open: false,
 | 
			
		||||
        // 弹出层标题
 | 
			
		||||
        title: "",
 | 
			
		||||
        // 表单参数
 | 
			
		||||
        form: {
 | 
			
		||||
          areaName:""
 | 
			
		||||
        },
 | 
			
		||||
        // 表单校验
 | 
			
		||||
        rules: {
 | 
			
		||||
          areaName: [
 | 
			
		||||
            {
 | 
			
		||||
              required: true,
 | 
			
		||||
              message: "区域名称不能为空",
 | 
			
		||||
              trigger: "blur",
 | 
			
		||||
            },
 | 
			
		||||
          ],
 | 
			
		||||
        },  
 | 
			
		||||
        parentId: undefined,  
 | 
			
		||||
      
 | 
			
		||||
      };
 | 
			
		||||
    },
 | 
			
		||||
    watch: {
 | 
			
		||||
      // 根据名称筛选部门树
 | 
			
		||||
      areaName(val) {
 | 
			
		||||
        this.$refs.tree.filter(val);
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
    created() {
 | 
			
		||||
      this.getTreeData(); 
 | 
			
		||||
    },
 | 
			
		||||
    methods: {
 | 
			
		||||
      // 筛选节点 - 左侧树
 | 
			
		||||
      filterNode(value, data) {
 | 
			
		||||
        if (!value) return true;
 | 
			
		||||
        return data.treeName.indexOf(value) !== -1;
 | 
			
		||||
      },
 | 
			
		||||
      /** 查询新增页面-上级类型下拉树结构 */
 | 
			
		||||
      getTreeData() {
 | 
			
		||||
        systemAreaTreeApi({}).then((response) => {
 | 
			
		||||
          this.treeOptions = response;
 | 
			
		||||
          console.log(this.treeOptions)
 | 
			
		||||
          if(this.treeOptions&&this.treeOptions.length>0){
 | 
			
		||||
            this.areaId = this.treeOptions[0].id
 | 
			
		||||
            this.getList();
 | 
			
		||||
          }else{
 | 
			
		||||
            this.areaId = ""
 | 
			
		||||
            this.getList();
 | 
			
		||||
          }
 | 
			
		||||
        });
 | 
			
		||||
      },
 | 
			
		||||
      /** 搜索按钮操作 */
 | 
			
		||||
      handleQuery() {
 | 
			
		||||
        this.queryParams.pageNum = 1;
 | 
			
		||||
        this.getList();
 | 
			
		||||
      },
 | 
			
		||||
      /** 重置按钮操作 */
 | 
			
		||||
      resetQuery() { 
 | 
			
		||||
        this.resetForm("queryForm"); 
 | 
			
		||||
        this.queryParams.pageNum = 1;
 | 
			
		||||
        this.queryParams.pageSize = 10; 
 | 
			
		||||
        this.$refs.tree.setCurrentKey(null);
 | 
			
		||||
        this.handleQuery();
 | 
			
		||||
      },
 | 
			
		||||
      /** 查询列表 */
 | 
			
		||||
      getList() {
 | 
			
		||||
        this.loading = true;
 | 
			
		||||
        let params= {
 | 
			
		||||
          "areaName":this.areaName,
 | 
			
		||||
          "areaId":this.areaId,
 | 
			
		||||
          "size": this.queryParams.pageSize,
 | 
			
		||||
          "current": this.queryParams.pageNum
 | 
			
		||||
        }
 | 
			
		||||
        getAreaListApi(params).then((response) => {
 | 
			
		||||
          this.typeList = response.records;
 | 
			
		||||
          this.total = Number(response.total);
 | 
			
		||||
          this.loading = false;
 | 
			
		||||
        });
 | 
			
		||||
      }, 
 | 
			
		||||
      // 节点单击事件 - 左侧树
 | 
			
		||||
      async handleNodeClick(data, node) {
 | 
			
		||||
        console.log(data)
 | 
			
		||||
        this.areaId = data.id;
 | 
			
		||||
        this.handleQuery();
 | 
			
		||||
      },
 | 
			
		||||
 | 
			
		||||
      // 节点单击事件 - 左侧树
 | 
			
		||||
      async getAreaName(data) {
 | 
			
		||||
        let params= {
 | 
			
		||||
          "areaId":data.id
 | 
			
		||||
        }
 | 
			
		||||
        const res = await getAreaNameApi(params);
 | 
			
		||||
        this.$set(this.form,"superAreaName",res.msg) 
 | 
			
		||||
      },
 | 
			
		||||
      // 节点单击事件 - 左侧树
 | 
			
		||||
      async getAreaNum(data) {
 | 
			
		||||
        let params= {
 | 
			
		||||
          "superId":data.id||""
 | 
			
		||||
        }
 | 
			
		||||
        if(data.parentId=="-1"){
 | 
			
		||||
          params.canteenTreeType=-1
 | 
			
		||||
        }else{
 | 
			
		||||
          params.canteenTreeType=0
 | 
			
		||||
        }
 | 
			
		||||
        const res = await getAreaNumApi(params);
 | 
			
		||||
        this.$set(this.form,"areaNum",res.data)
 | 
			
		||||
      },
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
      /* 树节点增加 */
 | 
			
		||||
      appendTreeNode(data) { 
 | 
			
		||||
        console.log("dataAdd", data);
 | 
			
		||||
        this.reset();
 | 
			
		||||
        if(data.parentId=="-1"){
 | 
			
		||||
          this.$set(this.form,"superAreaName",data.treeName) 
 | 
			
		||||
          this.getAreaNum(data)
 | 
			
		||||
        }else{
 | 
			
		||||
          this.getAreaName(data)
 | 
			
		||||
          this.getAreaNum(data)
 | 
			
		||||
        }
 | 
			
		||||
        
 | 
			
		||||
        this.$set(this.form,"areaName","")
 | 
			
		||||
        this.$set(this.form,"superId",data.id) 
 | 
			
		||||
        this.open = true;
 | 
			
		||||
        this.title = "新增";
 | 
			
		||||
      },
 | 
			
		||||
      /* 树节点删除 */
 | 
			
		||||
      removeTreeNode(data) { 
 | 
			
		||||
        console.log(data, "删除时的数据源--"); 
 | 
			
		||||
        this.$modal
 | 
			
		||||
          .confirm("是否确认删除数据项?")
 | 
			
		||||
          .then(function () {
 | 
			
		||||
            return removeAreaApi({"areaId":data.id});
 | 
			
		||||
          })
 | 
			
		||||
          .then(() => {
 | 
			
		||||
            this.$modal.msgSuccess("删除成功");
 | 
			
		||||
            this.getList();
 | 
			
		||||
            this.getTreeData();
 | 
			
		||||
          })
 | 
			
		||||
          .catch(() => {});
 | 
			
		||||
      },
 | 
			
		||||
      /* 树节点修改 */
 | 
			
		||||
      editTreeNode(data) {
 | 
			
		||||
        console.log("dataEdit", data);
 | 
			
		||||
      },
 | 
			
		||||
      onMousemove(data) {
 | 
			
		||||
        this.isMousemoveId = data.id;
 | 
			
		||||
      },
 | 
			
		||||
      onMouseleave() {
 | 
			
		||||
        this.isMousemoveId = null;
 | 
			
		||||
      }, 
 | 
			
		||||
      // 取消按钮
 | 
			
		||||
      cancel() {
 | 
			
		||||
        this.open = false;
 | 
			
		||||
        this.reset();
 | 
			
		||||
      },
 | 
			
		||||
      // 表单重置
 | 
			
		||||
      reset() {
 | 
			
		||||
        this.form = {};
 | 
			
		||||
        this.resetForm("form");
 | 
			
		||||
      },
 | 
			
		||||
      /** 修改按钮操作 */
 | 
			
		||||
      handleUpdate(row) {
 | 
			
		||||
        this.reset();
 | 
			
		||||
        console.log(row)
 | 
			
		||||
        this.$set(this.form,"areaDescribe",row.areaDescribe)
 | 
			
		||||
        this.$set(this.form,"areaId",row.areaId)
 | 
			
		||||
        this.$set(this.form,"areaName",row.areaName)
 | 
			
		||||
        this.$set(this.form,"areaNum",row.areaNum)
 | 
			
		||||
        this.$set(this.form,"contactTel",row.contactTel)
 | 
			
		||||
        this.$set(this.form,"director",row.director)
 | 
			
		||||
        this.$set(this.form,"superAreaName",row.superAreaName)
 | 
			
		||||
        this.$set(this.form,"superId",row.superId) 
 | 
			
		||||
        this.open = true;
 | 
			
		||||
        this.title = "修改";
 | 
			
		||||
      },
 | 
			
		||||
      /** 提交按钮 */
 | 
			
		||||
      submitForm: function () {
 | 
			
		||||
        console.log(this.form, "提交参数---");
 | 
			
		||||
        this.$refs["form"].validate((valid) => {
 | 
			
		||||
          if (valid) {  
 | 
			
		||||
            if (this.form.areaId != undefined) { 
 | 
			
		||||
                    updateAreaApi(this.form).then((response) => {
 | 
			
		||||
                        this.$modal.msgSuccess("修改成功");
 | 
			
		||||
                        this.open = false;
 | 
			
		||||
                        this.getList();
 | 
			
		||||
                        this.getTreeData();
 | 
			
		||||
                    });  
 | 
			
		||||
            }else {
 | 
			
		||||
                    addAreaApi(this.form).then((response) => {
 | 
			
		||||
                        this.$modal.msgSuccess("新增成功");
 | 
			
		||||
                        this.open = false;
 | 
			
		||||
                        this.getList();
 | 
			
		||||
                        this.getTreeData();
 | 
			
		||||
                    });
 | 
			
		||||
            }
 | 
			
		||||
          }
 | 
			
		||||
        });
 | 
			
		||||
      },
 | 
			
		||||
      /** 删除按钮操作 */
 | 
			
		||||
      handleDelete(row) { 
 | 
			
		||||
        this.$modal
 | 
			
		||||
          .confirm("是否确认删除数据项?")
 | 
			
		||||
          .then(function () {
 | 
			
		||||
            return removeAreaApi({"areaId":row.areaId});
 | 
			
		||||
          })
 | 
			
		||||
          .then(() => {
 | 
			
		||||
            this.$modal.msgSuccess("删除成功");
 | 
			
		||||
            this.getList();
 | 
			
		||||
            this.getTreeData();
 | 
			
		||||
          })
 | 
			
		||||
          .catch(() => {});
 | 
			
		||||
      }, 
 | 
			
		||||
      
 | 
			
		||||
       
 | 
			
		||||
      
 | 
			
		||||
      getParentName(list, id) {
 | 
			
		||||
        try {
 | 
			
		||||
          list.forEach((e) => {
 | 
			
		||||
            if (e.id == id) {
 | 
			
		||||
              this.form.label = e.label;
 | 
			
		||||
              throw new Error();
 | 
			
		||||
            } else {
 | 
			
		||||
              if (e.children && e.children.length > 0) {
 | 
			
		||||
                this.getParentName(e.children, id);
 | 
			
		||||
              }
 | 
			
		||||
            }
 | 
			
		||||
          });
 | 
			
		||||
        } catch (error) {}
 | 
			
		||||
      },
 | 
			
		||||
  
 | 
			
		||||
      
 | 
			
		||||
    },
 | 
			
		||||
  };
 | 
			
		||||
  </script>
 | 
			
		||||
  <style lang="scss" scoped>
 | 
			
		||||
  ::v-deep.el-table .fixed-width .el-button--mini {
 | 
			
		||||
    width: 60px !important;
 | 
			
		||||
    margin-bottom: 10px;
 | 
			
		||||
  }
 | 
			
		||||
  
 | 
			
		||||
  ::v-deep .btn-items .el-button + .el-button {
 | 
			
		||||
    margin-left: 6px;
 | 
			
		||||
  }
 | 
			
		||||
  .btn-items {
 | 
			
		||||
    margin-left: 4px;
 | 
			
		||||
    .el-button--text {
 | 
			
		||||
      font-size: 16px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  ::v-deep .el-tree .el-tree-node__expand-icon.expanded {
 | 
			
		||||
    -webkit-transform: rotate(0deg);
 | 
			
		||||
    transform: rotate(0deg);
 | 
			
		||||
  }
 | 
			
		||||
  ::v-deep .el-tree .el-icon-caret-right:before {
 | 
			
		||||
    content: "\e783";
 | 
			
		||||
    font-size: 16px;
 | 
			
		||||
  }
 | 
			
		||||
  ::v-deep
 | 
			
		||||
    .el-tree
 | 
			
		||||
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
 | 
			
		||||
    content: "\e781";
 | 
			
		||||
    font-size: 16px;
 | 
			
		||||
    color: #1890ff;
 | 
			
		||||
  }
 | 
			
		||||
  
 | 
			
		||||
  ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
 | 
			
		||||
    color: #1890ff !important;
 | 
			
		||||
  }
 | 
			
		||||
  ::v-deep .el-tree-node__expand-icon.is-leaf {
 | 
			
		||||
    color: transparent !important;
 | 
			
		||||
  }
 | 
			
		||||
  
 | 
			
		||||
  ::v-deep
 | 
			
		||||
    .el-tree--highlight-current
 | 
			
		||||
    .el-tree-node.is-current
 | 
			
		||||
    > .el-tree-node__content {
 | 
			
		||||
    background-color: #8decf1;
 | 
			
		||||
  }
 | 
			
		||||
  
 | 
			
		||||
  ::v-deep .el-dialog {
 | 
			
		||||
    // 表单标签文字样式
 | 
			
		||||
    .el-form-item__label {
 | 
			
		||||
      font-size: 14px;
 | 
			
		||||
      color: #606266;
 | 
			
		||||
      font-weight: 500;
 | 
			
		||||
      line-height: 1.5;
 | 
			
		||||
    }
 | 
			
		||||
  
 | 
			
		||||
    // 输入框文字样式
 | 
			
		||||
    .el-input__inner {
 | 
			
		||||
      font-size: 14px;
 | 
			
		||||
      color: #303133;
 | 
			
		||||
  
 | 
			
		||||
      &::placeholder {
 | 
			
		||||
        font-size: 13px;
 | 
			
		||||
        color: #c0c4cc;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  
 | 
			
		||||
    // 单位文字样式
 | 
			
		||||
    span {
 | 
			
		||||
      font-size: 14px;
 | 
			
		||||
      // color: #606266;
 | 
			
		||||
      margin-left: 8px;
 | 
			
		||||
    }
 | 
			
		||||
  
 | 
			
		||||
    // 下拉选择框文字样式
 | 
			
		||||
    .el-select {
 | 
			
		||||
      .el-input__inner {
 | 
			
		||||
        font-size: 14px;
 | 
			
		||||
        color: #303133;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  
 | 
			
		||||
    // 只读输入框样式
 | 
			
		||||
    .el-input.is-disabled .el-input__inner {
 | 
			
		||||
      background-color: #f5f7fa;
 | 
			
		||||
      border-color: #e4e7ed;
 | 
			
		||||
      color: #606266;
 | 
			
		||||
      cursor: not-allowed;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  
 | 
			
		||||
  // 表格内文字样式
 | 
			
		||||
  ::v-deep .el-table {
 | 
			
		||||
    font-size: 14px;
 | 
			
		||||
  
 | 
			
		||||
    th {
 | 
			
		||||
      font-weight: 500;
 | 
			
		||||
      color: #303133;
 | 
			
		||||
    }
 | 
			
		||||
  
 | 
			
		||||
    td {
 | 
			
		||||
      color: #606266;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  
 | 
			
		||||
  // 按钮文字样式
 | 
			
		||||
  ::v-deep .el-button {
 | 
			
		||||
    font-size: 14px;
 | 
			
		||||
  
 | 
			
		||||
    &--text {
 | 
			
		||||
      font-size: 13px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  
 | 
			
		||||
  // 树节点文字样式
 | 
			
		||||
  ::v-deep .el-tree-node__label {
 | 
			
		||||
    font-size: 14px;
 | 
			
		||||
    color: #606266;
 | 
			
		||||
  }
 | 
			
		||||
  
 | 
			
		||||
  // 搜索框文字样式
 | 
			
		||||
  ::v-deep .el-input--small {
 | 
			
		||||
    .el-input__inner {
 | 
			
		||||
      font-size: 13px;
 | 
			
		||||
  
 | 
			
		||||
      &::placeholder {
 | 
			
		||||
        font-size: 13px;
 | 
			
		||||
        color: #c0c4cc;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  </style>
 | 
			
		||||
  
 | 
			
		||||
		Loading…
	
		Reference in New Issue