添加车辆管理、设备管理、火灾管理

guoshilong

2023-03-04 09a0d30ae96be51c9c0d6d4ff25621e11bbe3580

添加车辆管理、设备管理、火灾管理

 package.json

@@ -26,6 +26,7 @@
    "portfinder": "^1.0.23",
    "script-loader": "^0.7.2",
    "vue": "^2.6.10",
    "vue-amap": "^0.5.10",
    "vue-axios": "^2.1.2",
    "vue-i18n": "^8.7.0",
    "vue-router": "^3.0.1",

 public/index.html

@@ -18,6 +18,17 @@
  <link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.9.12/index.css">
  <script src="<%= BASE_URL %>cdn/xlsx/FileSaver.min.js"></script>
  <script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>

  <!--  inputMap地图选择器 开始  -->
  <script>
    window._AMapSecurityConfig = {
      securityJsCode: '8ac9e5f522c62ed6e3a5800a87b0d140',
    }
  </script>
  <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=7fa69abe1defd5888bb85bc736cda874&plugin=AMap.PlaceSearch'></script>
  <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
  <!--  inputMap地图选择器 结束 -->

  <link rel="icon" href="<%= BASE_URL %>favicon.png">
  <title>Saber企业平台</title>
  <style>

 src/api/device/device.js

New file
@@ -0,0 +1,50 @@
import request from '@/router/axios';

export const getList = (current, size, params) => {
  return request({
    url: '/api/blade-device/device/list',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const getDetail = (id) => {
  return request({
    url: '/api/blade-device/device/detail',
    method: 'get',
    params: {
      id
    }
  })
}

export const remove = (ids) => {
  return request({
    url: '/api/blade-device/device/remove',
    method: 'post',
    params: {
      ids,
    }
  })
}

export const add = (row) => {
  return request({
    url: '/api/blade-device/device/submit',
    method: 'post',
    data: row
  })
}

export const update = (row) => {
  return request({
    url: '/api/blade-device/device/submit',
    method: 'post',
    data: row
  })
}


 src/api/fire/fire.js

New file
@@ -0,0 +1,50 @@
import request from '@/router/axios';

export const getList = (current, size, params) => {
  return request({
    url: '/api/blade-fire/fire/page',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const getDetail = (id) => {
  return request({
    url: '/api/blade-fire/fire/detail',
    method: 'get',
    params: {
      id
    }
  })
}

export const remove = (ids) => {
  return request({
    url: '/api/blade-fire/fire/remove',
    method: 'post',
    params: {
      ids,
    }
  })
}

export const add = (row) => {
  return request({
    url: '/api/blade-fire/fire/submit',
    method: 'post',
    data: row
  })
}

export const update = (row) => {
  return request({
    url: '/api/blade-fire/fire/submit',
    method: 'post',
    data: row
  })
}


 src/api/vehicle/vehicle.js

New file
@@ -0,0 +1,50 @@
import request from '@/router/axios';

export const getList = (current, size, params) => {
  return request({
    url: '/api/blade-vehicle/vehicle/page',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const getDetail = (id) => {
  return request({
    url: '/api/blade-vehicle/vehicle/detail',
    method: 'get',
    params: {
      id
    }
  })
}

export const remove = (ids) => {
  return request({
    url: '/api/blade-vehicle/vehicle/remove',
    method: 'post',
    params: {
      ids,
    }
  })
}

export const add = (row) => {
  return request({
    url: '/api/blade-vehicle/vehicle/submit',
    method: 'post',
    data: row
  })
}

export const update = (row) => {
  return request({
    url: '/api/blade-vehicle/vehicle/submit',
    method: 'post',
    data: row
  })
}


 src/router/page/index.js

@@ -77,5 +77,34 @@
  {
    path: '*',
    redirect: '/404'
  }
  },
  //一级菜单需要自定义路由，或是在菜单路由地址配置；例：/vehicle，对应vue文件更名为index.vue
  {
    path: '/vehicle',
    component: Layout,
    redirect: '/vehicle/vehicle',
    children: [{
      path: 'index',
      name: '车辆管理',
      meta: {
        i18n: 'vehicle'
      },
      component: () =>
        import ( /* webpackChunkName: "views" */ '@/views/vehicle/vehicle')
    }]
  },
  {
    path: '/device',
    component: Layout,
    redirect: '/device/device',
    children: [{
      path: 'index',
      name: '设备管理',
      meta: {
        i18n: 'device'
      },
      component: () =>
        import ( /* webpackChunkName: "views" */ '@/views/device/device')
    }]
  },
]

 src/views/device/device.vue

New file
@@ -0,0 +1,345 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.device_delete"
                   @click="handleDelete">删 除
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {getList, getDetail, add, update, remove} from "@/api/device/device";
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "设备ID",
            prop: "id",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
          },
          {
            label: "设备名称",
            prop: "name",
            type: "input",
            span: 24,
            search: true,
            rules: [{
              required: true,
              message: "请输入设备名称",
              trigger: "blur"
            }],
          },
          {
            label: "设备类型",
            prop: "type",
            type: "select",
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=device_type',
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 24,
            rules: [{
              required: true,
              message: "请选择设备类型",
              trigger: "blur"
            }],
          },
          {
            label: "北斗定位",
            prop: "beidouPositioning",
            type: "switch",
            value:"1",
            dicData: [
              {
                label: '不支持',
                value: "2"
              },
              {
                label: '支持',
                value: "1"
              },
            ],
            span: 24,
            rules: [{
              required: true,
              message: "请选择是否支持北斗定位",
              trigger: "blur"
            }],
          },
          {
            label: "所在单位",
            prop: "deptId",
            type: "select",
            dicUrl: '/api/blade-system/dept/list',
            props: {
              label: "deptName",
              value: "id"
            },
            span: 24,
            rules: [{
              required: true,
              message: "请选择所在单位",
              trigger: "blur"
            }],
          },
          {
            label: "创建人",
            prop: "createUser",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "创建部门",
            prop: "createDept",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "创建时间",
            prop: "createTime",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "修改人",
            prop: "updateUser",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "修改时间",
            prop: "updateTime",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
          },
          {
            label: "状态",
            prop: "status",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "是否已删除",
            prop: "isDeleted",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "租户ID",
            prop: "tenantId",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.device_add, false),
        viewBtn: this.vaildData(this.permission.device_view, false),
        delBtn: this.vaildData(this.permission.device_delete, false),
        editBtn: this.vaildData(this.permission.device_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  methods: {
    rowSave(row, done, loading) {
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    }
  }
};
</script>

<style>
</style>

 src/views/fire/fireAdd.vue

New file
@@ -0,0 +1,174 @@
<template>
  <basic-container>
    <el-row>
      <el-col :span="12">
        <avue-form ref="form" v-model="form" :option="option" @submit="submit"></avue-form>
      </el-col>
      <el-col :span="12">
      </el-col>
    </el-row>
  </basic-container>
</template>

<script>
import axios from '@/router/axios';
import {add} from "@/api/fire/fire";
export default {
  name: "fireAdd",
  data() {
    let baseUrl = '/api/blade-system/region/lazy-tree?parentCode='
    return {
      form:{},
      option: {
        column: [
          {
            label:'火灾编号',
            prop:'no',
            span:24,
            type:'input'
          },
          {
            label: "行政区域",
            prop: "location",
            span: 24,
            type: "cascader",
            props: {
              label: 'title',
              value: 'key'
            },
            separator:'',
            lazy: true,
            lazyLoad(node, resolve) {
              let stop_level = 2;
              let level = node.level;
              let data = node.data || {}
              let code = data.key;
              let list = [];
              let callback = () => {
                resolve((list || []).map(ele => {
                  return Object.assign(ele, {
                    leaf: level >= stop_level
                  })
                }));
              }
              if (level == 0) {
                axios.get(`${baseUrl}00`).then(res => {
                  list = res.data.data;
                  callback()
                })
              }else if (level == 1) {
                axios.get(`${baseUrl}${code}`).then(res => {
                  list = res.data.data;
                  callback()
                })
              } else if (level == 2) {
                axios.get(`${baseUrl}${code}`).then(res => {
                  list = res.data.data;
                  callback()
                })
              }else{
                callback()
              }
            }
          },
          {
            label:'具体地址',
            prop:'address',
            span:24,
            type:'input'
          },
          {
            label: "发现方式",
            prop: "findWay",
            type: "select",
            row:true,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=fire_find_way',
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            rules: [{
              required: true,
              message: "请选择发现方式",
              trigger: "blur"
            }],
          },
          {
            label: "火灾等级",
            prop: "level",
            type: "select",
            row:true,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=fire_level',
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            rules: [{
              required: true,
              message: "请选择火灾等级",
              trigger: "blur"
            }],
          },
          {
            label: "发现时间",
            prop: "alarmTime",
            type: "datetime",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
          },
          {
            label:'报警人',
            prop:'caller',
            span:24,
            type:'input'
          },
          {
            label:'火灾描述',
            prop:'description',
            span:24,
            type:'textarea'
          },
          {
            label: '现场图片',
            prop: 'images',
            listType:'picture-card',
            type: 'upload',
            span: 24,
            action: '/api/blade-resource/oss/endpoint/put-file-attach',
            propsHttp: {
              res: 'data',
              url: 'link',
            },
          },
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    submit(form,done){
      add(form).then(res=>{
        if (res.data.code == 200){
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.form.resetForm()
          done();
        }else {
          this.$message({
            type: "error",
            message: "操作失败!"
          });
          done();
        }
      })
    }
  }
}
</script>

<style scoped>

</style>

 src/views/fire/fireManage.vue

New file
@@ -0,0 +1,413 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.fire_delete"
                   @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="{type,size,row,index}" slot="menu">
        <el-button icon="el-icon-edit" :size="size" :type="type" @click="goToViewDetail">详 情</el-button>
        <el-button icon="el-icon-delete" :size="size" :type="type" @click="goToFireSupplement(row)">补 录</el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {getList, getDetail, add, update, remove} from "@/api/fire/fire";
import {mapGetters} from "vuex";
import axios from "@/router/axios";

export default {
  data() {
    let baseUrl = '/api/blade-system/region/lazy-tree?parentCode='
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "主键",
            prop: "id",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "火灾编号",
            prop: "no",
            type: "input",
            search: true,
            searchSpan: 4,
          },
          {
            label: "行政区域",
            prop: "location",
            search: true,
            searchSpan: 4,
            span: 24,
            type: "cascader",
            props: {
              label: 'title',
              value: 'key'
            },
            separator: '',
            lazy: true,
            lazyLoad(node, resolve) {
              let stop_level = 2;
              let level = node.level;
              let data = node.data || {}
              let code = data.key;
              let list = [];
              let callback = () => {
                resolve((list || []).map(ele => {
                  return Object.assign(ele, {
                    leaf: level >= stop_level
                  })
                }));
              }
              if (level == 0) {
                axios.get(`${baseUrl}00`).then(res => {
                  list = res.data.data;
                  callback()
                })
              } else if (level == 1) {
                axios.get(`${baseUrl}${code}`).then(res => {
                  list = res.data.data;
                  callback()
                })
              } else if (level == 2) {
                axios.get(`${baseUrl}${code}`).then(res => {
                  list = res.data.data;
                  callback()
                })
              } else {
                callback()
              }
            }
          },
          {
            label: "发现方式",
            prop: "findWay",
            type: "select",
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=fire_find_way',
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            search: true,
            searchSpan: 4,
          },
          {
            label: "火灾等级",
            prop: "level",
            type: "select",
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=fire_level',
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          },
          {
            label: "处置状态",
            prop: "status",
            type: "select",
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=fire_handle_status',
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            search: true,
            searchSpan: 4,
          },
          {
            label: "报警人",
            prop: "caller",
            type: "input",
          },
          {
            label: "报警时间",
            prop: "alarmTime",
            type: "input",
            search: true,
            searchSpan: 4,
          },
          {
            label: "火灾描述",
            prop: "description",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "现场图片",
            prop: "images",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "创建人",
            prop: "createUser",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "创建部门",
            prop: "createDept",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "创建时间",
            prop: "createTime",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "修改人",
            prop: "updateUser",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "修改时间",
            prop: "updateTime",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "是否已删除",
            prop: "isDeleted",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "租户ID",
            prop: "tenantId",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.fire_add, true),
        viewBtn: this.vaildData(this.permission.fire_view, true),
        delBtn: this.vaildData(this.permission.fire_delete, true),
        editBtn: this.vaildData(this.permission.fire_edit, true)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  methods: {
    rowSave(row, done, loading) {
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.data.forEach(e => {
          e.status = e.status + ""
        })
        this.$refs.crud.dicInit('cascader');
        this.loading = false;
        this.selectionClear();
      });
    },
    goToViewDetail(){

    },
    goToFireSupplement(data){
      //要使跳转页接收到值,必须用name
      this.$router.push({
        name: '火灾补录',
        params: data
      })

    }
  }
};
</script>

<style>
</style>

 src/views/fire/fireSupplement.vue

New file
@@ -0,0 +1,729 @@
<template>
  <basic-container>
    <el-card>
      <div slot="header" class="clearfix">
        <span>一、火灾基本信息</span>
      </div>
      <el-row>
        <el-col :span="12">
          <avue-form ref="form" v-model="form" :option="option"></avue-form>
        </el-col>
        <el-col :span="12">

        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>二、火灾调查信息</span>
      </div>
      <avue-form ref="formSupplement" v-model="formSupplement" :option="optionSupplement" @submit="submit">
        <!--经济损失-->
        <template slot="economicLoss">
          <avue-crud :option="economicOption" :data="economicData" v-model="economicForm"
                     @row-save="economicSave"
                     @row-update="economicUpdate"
                     @row-del="economicDel"
          ></avue-crud>
        </template>
        <!--受灾面积-->
        <template slot="damageArea">
          <avue-crud :option="damageAreaOption" :data="damageAreaData" v-model="damageAreaForm"
                     @row-save="damageAreaSave"
                     @row-update="damageAreaUpdate"
                     @row-del="damageAreaDel"></avue-crud>
        </template>
        <!--出动警力-->
        <template slot="policeResources">
          <avue-crud :option="policeResourcesOption" :data="policeResourcesData" v-model="policeResourcesForm"
                     @row-save="policeResourcesSave"
                     @row-update="policeResourcesUpdate"
                     @row-del="policeResourcesDel"
          ></avue-crud>
        </template>
      </avue-form>
    </el-card>
  </basic-container>
</template>

<script>
import axios from "@/router/axios";
import formTable from "../../components/form-table/formTable"
import {remove, update} from "@/api/device/device";
import {add} from "@/views/fireSupplement/fireSupplement";

export default {
  name: "fireSupplieMent",
  components: {formTable},
  data() {
    let baseUrl = '/api/blade-system/region/lazy-tree?parentCode='
    return {
      form: {},
      option: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '火灾编号',
            prop: 'no',
            span: 24,
            type: 'input'
          },
          {
            label: "行政区域",
            prop: "location",
            span: 24,
            type: "cascader",
            props: {
              label: 'title',
              value: 'key'
            },
            separator: '',
            lazy: true,
            lazyLoad(node, resolve) {
              let stop_level = 2;
              let level = node.level;
              let data = node.data || {}
              let code = data.key;
              let list = [];
              let callback = () => {
                resolve((list || []).map(ele => {
                  return Object.assign(ele, {
                    leaf: level >= stop_level
                  })
                }));
              }
              if (level == 0) {
                axios.get(`${baseUrl}00`).then(res => {
                  list = res.data.data;
                  callback()
                })
              } else if (level == 1) {
                axios.get(`${baseUrl}${code}`).then(res => {
                  list = res.data.data;
                  callback()
                })
              } else if (level == 2) {
                axios.get(`${baseUrl}${code}`).then(res => {
                  list = res.data.data;
                  callback()
                })
              } else {
                callback()
              }
            }
          },
          {
            label: '具体地址',
            prop: 'address',
            span: 24,
            type: 'input'
          },
          {
            label: "发现方式",
            prop: "findWay",
            type: "select",
            row: true,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=fire_find_way',
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            rules: [{
              required: true,
              message: "请选择发现方式",
              trigger: "blur"
            }],
          },
          {
            label: "火灾等级",
            prop: "level",
            type: "select",
            row: true,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=fire_level',
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            rules: [{
              required: true,
              message: "请选择火灾等级",
              trigger: "blur"
            }],
          },
          {
            label: "发现时间",
            prop: "alarmTime",
            type: "datetime",
          },
          {
            label: '报警人',
            prop: 'caller',
            span: 24,
            type: 'input'
          },
          {
            label: '火灾描述',
            prop: 'description',
            span: 24,
            type: 'textarea'
          },
          {
            label: '现场图片',
            prop: 'images',
            listType: 'picture-card',
            type: 'upload',
            span: 24,
            action: '/api/blade-resource/oss/endpoint/put-file-attach'
          },
        ]
      },
      formSupplement: {},
      optionSupplement: {
        submitBtn: true,
        emptyBtn: false,
        column: [
          {
            label: '起火原因',
            prop: 'fireReason',
            span: 24,
            type: 'input'
          },
          {
            label: "起火树种",
            prop: "treeSpecies",
            type: "select",
            row: true,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=tree_species',
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            rules: [{
              required: true,
              message: "请选择发现方式",
              trigger: "blur"
            }],
          },
          {
            label: "灭火时间",
            prop: "extinguishingTime",
            type: "datetime",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
          },
          {
            label: '肇事者',
            prop: 'perpetrator',
            span: 24,
            type: 'input'
          },
          {
            label: '处理人数',
            prop: 'sumPerson',
            span: 12,
            type: 'input',
            append: '人'
          },
          {
            label: '刑事处罚人数',
            prop: 'punishPerson',
            span: 12,
            type: 'input',
            append: '人'
          },
          {
            label: '处理情况',
            prop: 'situation',
            span: 24,
            type: 'textarea'
          },
          {
            label: '轻伤人数',
            prop: 'minorInjuryPerson',
            span: 8,
            type: 'input',
            append: '人'
          },
          {
            label: '重伤人数',
            prop: 'SeriouslyInjuredPerson',
            span: 8,
            type: 'input',
            append: '人'
          },
          {
            label: '死亡人数',
            prop: 'deathPerson',
            span: 8,
            type: 'input',
            append: '人'
          },
          {
            label: '经济损失',
            prop: 'economicLoss',
            span: 24,
          },
          {
            label: '受灾面积',
            prop: 'damageArea',
            span: 24,
          },
          {
            label: '出动警力',
            prop: 'policeResources',
            span: 24,
          },
        ]
      },
      //经济损失相关字段
      economicOption: {
        align: 'center',
        column: [
          {
            label: '损失林木',
            prop:'lossForest',
            display: false,
            children: [
              {
                label: '成林蓄积',
                prop: 'adult',
                display: false,
                children: [
                  {
                    label: '商品林',
                    prop: 'adultCommercialForest',
                    display: false,
                  },
                  {
                    label: '生态林',
                    prop: 'adultEcologicalForest',
                    display: false,
                  }
                ]
              },
              {
                label: '幼林株树',
                prop: 'juvenile',
                display: false,
                children: [
                  {
                    label: '商品林',
                    prop: 'juvenileCommercialForest',
                    display: false,
                  },
                  {
                    label: '生态林',
                    prop: 'juvenileEcologicalForest',
                    display: false,
                  }
                ]
              }
            ]
          },
          {
            label: '其他损失折款合计',
            prop: 'anotherLossSum',
            display: false,
          }
        ],
        group: [
          {
            label: '损失林木-成林蓄积',
            prop: 'adult',
            arrow: false,
            column: [
              {
                label: '商品林',
                prop: 'adultCommercialForest',
              },
              {
                label: '生态林',
                prop: 'adultEcologicalForest',
              }
            ]
          },
          {
            label: '损失林木-幼林株树',
            prop: 'juvenile',
            arrow: false,
            column: [
              {
                label: '商品林',
                prop: 'juvenileCommercialForest',
              },
              {
                label: '生态林',
                prop: 'juvenileEcologicalForest',
              }
            ]
          },
          {
            label: '其他损失',
            prop: 'otherLoss',
            arrow: false,
            column: [
              {
                label: '合计',
                prop: 'anotherLossSum',
              }
            ]
          },
        ]
      },
      economicData: [],
      economicForm: {},
      //受灾面积相关字段
      damageAreaOption: {
        align: 'center',
        column: [
          {
            label: '过火面积',
            prop: 'fireArea',
            display: false,
            children: [
              {
                label: '合计',
                prop: 'fireAreaSum',
                display: false,
                span: 12,
              },
              {
                label: '商品林',
                prop: 'fireCommercialForest',
                display: false,
              },
              {
                label: '生态林',
                prop: 'fireEcologicalForest',
                display: false,
              }
            ]
          },
          {
            label: '受害森林面积',
            prop: 'damageForestArea',
            display: false,
            children: [
              {
                label: '合计',
                prop: 'damageForestAreaSum',
                display: false,
              },
              {
                label: '原始林',
                prop: 'primary',
                display: false,
                children: [
                  {
                    label: '商品林',
                    prop: 'primaryCommercialForest',
                    display: false,
                  },
                  {
                    label: '生态林',
                    prop: 'primaryEcologicalForest',
                    display: false,
                  }
                ]
              },
              {
                label: '人工林',
                prop: 'artificial',
                display: false,
                children: [
                  {
                    label: '商品林',
                    prop: 'artificialCommercialForest',
                    display: false,
                  },
                  {
                    label: '生态林',
                    prop: 'artificialEcologicalForest',
                    display: false,
                  }
                ]
              }
            ]
          }
        ],
        group: [
          {
            label: '过火面积',
            prop: 'fireArea',
            arrow: false,
            column: [
              {
                label: '合计',
                prop: 'fireAreaSum',
                span: 12,
                row: true
              },
              {
                label: '商品林',
                prop: 'fireCommercialForest',
              },
              {
                label: '生态林',
                prop: 'fireEcologicalForest',
              }
            ]
          },
          {
            label: '受害森林面积',
            prop: 'damageForestArea',
            arrow: false,
            column: [
              {
                label: '合计',
                prop: 'damageForestAreaSum',
              },
            ]
          },
          {
            label: '原始林',
            prop: 'primary',
            arrow: false,
            column: [
              {
                label: '商品林',
                prop: 'primaryCommercialForest',
              },
              {
                label: '生态林',
                prop: 'primaryEcologicalForest',
              }
            ]
          },
          {
            label: '人工林',
            prop: 'artificial',
            arrow: false,
            column: [
              {
                label: '商品林',
                prop: 'artificialCommercialForest',
              },
              {
                label: '生态林',
                prop: 'artificialEcologicalForest',
              }
            ]
          },
        ]
      },
      damageAreaData: [],
      damageAreaForm: {},
      //警力资源相关字段
      policeResourcesOption: {
        align: 'center',
        column: [
          {
            label: '出动人工',
            prop: 'peopleNumber',
            display: false
          },
          {
            label: '出动车辆',
            prop: 'vehicle',
            display: false,
            children: [
              {
                label: '合计',
                prop: 'vehicleSum',
                display: false,
              },
              {
                label: '其中汽车',
                prop: 'carNumber',
                display: false,
              },
            ]
          },
          {
            label: '出动飞机',
            prop: 'planeNumber',
            display: false
          },
          {
            label: '扑火经费',
            prop: 'extinguishingMoney',
            display: false
          },
        ],
        group: [
          {
            label: '人工',
            prop: 'people',
            arrow: false,
            column: [
              {
                label: '合计',
                prop: 'peopleNumber',
              },
            ]
          },
          {
            label: '出动车辆',
            prop: 'vehicle',
            arrow: false,
            column: [
              {
                label: '合计',
                prop: 'vehicleSum',
              },
              {
                label: '其中汽车',
                prop: 'carNumber',
              },
            ]
          },
          {
            label: '飞机',
            prop: 'plane',
            arrow: false,
            column: [
              {
                label: '合计',
                prop: 'planeNumber',
              },
            ]
          },
          {
            label: '费用',
            prop: 'money',
            arrow: false,
            column: [
              {
                label: '扑火经费',
                prop: 'extinguishingMoney',
              },
            ]
          },
        ]
      },
      policeResourcesData: [],
      policeResourcesForm: {},
    }
  },
  created() {
    this.form = this.$route.params
  },
  methods: {
    submit(form, done) {
      form.fireId = this.form.id
      form.economicLoss = this.economicData
      form.damageArea = this.damageAreaData
      form.policeResources = this.policeResourcesData
      add(form).then(res=>{
        if (res.data.code == 200){
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.form.resetForm()
          this.$refs.formSupplement.resetForm()
          done();
        }else {
          this.$message({
            type: "error",
            message: "操作失败!"
          });
          done();
        }
      })
    },
    //经济损失表格增删改方法
    economicSave(form, done, loading) {
      let id = this.economicData.length +1
      this.economicForm.id = id
      this.economicData.push(this.deepClone(this.economicForm))
      loading()
      done()
    },
    economicUpdate(row, index,done, loading) {
      loading()
      this.economicData.forEach(e=>{
        if (e.id == row.id ){
          e.adultCommercialForest = row.adultCommercialForest
          e.adultEcologicalForest = row.adultEcologicalForest
          e.juvenileCommercialForest = row.juvenileCommercialForest
          e.juvenileEcologicalForest = row.juvenileEcologicalForest
          e.anotherLossSum = row.anotherLossSum
        }
      })
      done()
    },
    economicDel(row) {
      this.economicData = this.economicData.filter(e=>{
        return e.id != row.id
      })
    },

    //受灾面积表格增删改方法
    damageAreaSave(form, done, loading) {
      let id = this.damageAreaData.length +1
      this.damageAreaForm.id = id
      this.damageAreaData.push(this.deepClone(this.damageAreaForm))
      loading()
      done()
    },
    damageAreaUpdate(row, index,done, loading) {
      loading()
      this.damageAreaData.forEach(e=>{
        if (e.id == row.id ){
          e.fireAreaSum = row.fireAreaSum

          e.fireCommercialForest = row.fireCommercialForest
          e.fireEcologicalForest = row.fireEcologicalForest

          e.damageForestAreaSum = row.damageForestAreaSum

          e.primaryCommercialForest = row.primaryCommercialForest
          e.primaryEcologicalForest = row.primaryEcologicalForest

          e.artificialCommercialForest = row.artificialCommercialForest
          e.artificialEcologicalForest = row.artificialEcologicalForest
        }
      })
      done()
    },
    damageAreaDel(row) {
      this.damageAreaData = this.damageAreaData.filter(e=>{
        return e.id != row.id
      })
    },

    //出动警力表格增删改方法
    policeResourcesSave(form, done, loading) {
      let id = this.policeResourcesData.length +1
      this.policeResourcesForm.id = id
      this.policeResourcesData.push(this.deepClone(this.policeResourcesForm))
      loading()
      done()
    },
    policeResourcesUpdate(row, index,done, loading) {
      loading()
      this.policeResourcesData.forEach(e=>{
        if (e.id == row.id ){
          e.peopleNumber = row.peopleNumber
          e.vehicleSum = row.vehicleSum
          e.carNumber = row.carNumber
          e.planeNumber = row.planeNumber
          e.extinguishingMoney = row.extinguishingMoney
        }
      })
      done()
    },
    policeResourcesDel(row) {
      this.policeResourcesData = this.policeResourcesData.filter(e=>{
        return e.id != row.id
      })
    },
  }
}
</script>

<style scoped>

</style>

 src/views/fireSupplement/fireSupplement.js

New file
@@ -0,0 +1,50 @@
import request from '@/router/axios';

export const getList = (current, size, params) => {
  return request({
    url: '/api/blade-fireSupplement/fireSupplement/list',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const getDetail = (id) => {
  return request({
    url: '/api/blade-fireSupplement/fireSupplement/detail',
    method: 'get',
    params: {
      id
    }
  })
}

export const remove = (ids) => {
  return request({
    url: '/api/blade-fireSupplement/fireSupplement/remove',
    method: 'post',
    params: {
      ids,
    }
  })
}

export const add = (row) => {
  return request({
    url: '/api/blade-fireSupplement/fireSupplement/submit',
    method: 'post',
    data: row
  })
}

export const update = (row) => {
  return request({
    url: '/api/blade-fireSupplement/fireSupplement/submit',
    method: 'post',
    data: row
  })
}


 src/views/system/dept.vue

@@ -7,7 +7,6 @@
               v-model="form"
               :permission="permissionList"
               :before-open="beforeOpen"
               :before-close="beforeClose"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
@@ -28,335 +27,348 @@
                   @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
          icon="el-icon-circle-plus-outline"
          size="small"
          @click.stop="handleAdd(scope.row,scope.index)"
          v-if="userInfo.role_name.includes('admin')"
        >新增子项
        </el-button>
      </template>
      <!--      <template slot-scope="scope" slot="menu">-->
      <!--        <el-button-->
      <!--          type="text"-->
      <!--          icon="el-icon-circle-plus-outline"-->
      <!--          size="small"-->
      <!--          @click.stop="handleAdd(scope.row,scope.index)"-->
      <!--          v-if="userInfo.role_name.includes('admin')"-->
      <!--        >新增子项-->
      <!--        </el-button>-->
      <!--      </template>-->
      <template slot-scope="{row}"
                slot="deptCategory">
        <el-tag>{{row.deptCategoryName}}</el-tag>
        <el-tag>{{ row.deptCategoryName }}</el-tag>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import {
    getLazyList,
    remove,
    update,
    add,
    getDept,
    getDeptTree
  } from "@/api/system/dept";
  import {mapGetters} from "vuex";
  import website from '@/config/website';
import {
  getLazyList,
  remove,
  update,
  add,
  getDept,
  // getDeptTree
} from "@/api/system/dept";
import {mapGetters} from "vuex";
// import website from '@/config/website';

  export default {
    data() {
export default {
  data() {
    return {
      form: {},
      selectionList: [],
      query: {},
      loading: true,
      parentId: 0,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        lazy: true,
        tip: false,
        simplePage: true,
        searchShow: true,
        searchMenuSpan: 6,
        tree: true,
        border: true,
        index: true,
        selection: true,
        viewBtn: false,
        menuWidth: 300,
        dialogClickModal: false,
        column: [
          {
            label: "单位名称",
            prop: "deptName",
            search: true,
            rules: [{
              required: true,
              message: "请输入机构名称",
              trigger: "blur"
            }]
          },
          {
            label: "单位性质",
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=org_category",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
            width: 120,
            prop: "deptCategory",
            slot: true,
            rules: [{
              required: true,
              message: "请选择单位性质",
              trigger: "blur"
            }]
          },
          {
            label: '省份',
            prop: 'province',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            cascader: ['city'],
            dicUrl: '/api/blade-system/region/select',
            rules: [{
              required: true,
              message: "请选择省份",
              trigger: ["blur", "change"]
            }],
          },
          {
            label: '市',
            prop: 'city',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            cell: true,
            cascader: ['county'],
            dicUrl: `/api/blade-system/region/select?code={{key}}`,
            rules: [{
              required: true,
              message: "请选择市",
              trigger: ["blur", "change"]
            }],
          },
          {
            label: '区',
            prop: 'county',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            cell: true,
            dicUrl: '/api/blade-system/region/select?code={{key}}',
            rules: [{
              required: true,
              message: "请选择区",
              trigger: ["blur", "change"]
            }],
          },
          {
            label: "所在位置",
            prop: "location",
            rules: [{
              required: true,
              message: "请输入所在位置",
              trigger: "blur"
            }]
          },
          {
            label: "经度",
            prop: "lon",
            rules: [{
              required: true,
              message: "请输入所在经度",
              trigger: "blur"
            }]
          },
          {
            label: "纬度",
            prop: "lat",
            rules: [{
              required: true,
              message: "请输入所在纬度",
              trigger: "blur"
            }]
          },
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList() {
      return {
        form: {},
        selectionList: [],
        query: {},
        loading: true,
        parentId: 0,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        option: {
          lazy: true,
          tip: false,
          simplePage: true,
          searchShow: true,
          searchMenuSpan: 6,
          tree: true,
          border: true,
          index: true,
          selection: true,
          viewBtn: true,
          menuWidth: 300,
          dialogClickModal: false,
          column: [
            {
              label: "机构名称",
              prop: "deptName",
              search: true,
              rules: [{
                required: true,
                message: "请输入机构名称",
                trigger: "blur"
              }]
            },
            {
              label: "所属租户",
              prop: "tenantId",
              type: "tree",
              dicUrl: "/api/blade-system/tenant/select",
              addDisplay: false,
              editDisplay: false,
              viewDisplay: website.tenantMode,
              span: 24,
              props: {
                label: "tenantName",
                value: "tenantId"
              },
              hide: !website.tenantMode,
              search: website.tenantMode,
              rules: [{
                required: true,
                message: "请输入所属租户",
                trigger: "click"
              }]
            },
            {
              label: "机构全称",
              prop: "fullName",
              search: true,
              rules: [{
                required: true,
                message: "请输入机构全称",
                trigger: "blur"
              }]
            },
            {
              label: "上级机构",
              prop: "parentId",
              dicData: [],
              type: "tree",
              hide: true,
              addDisabled: false,
              props: {
                label: "title"
              },
              rules: [{
                required: false,
                message: "请选择上级机构",
                trigger: "click"
              }]
            },
            {
              label: "机构类型",
              type: "select",
              dicUrl: "/api/blade-system/dict/dictionary?code=org_category",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              width: 120,
              prop: "deptCategory",
              slot: true,
              rules: [{
                required: true,
                message: "请输入机构类型",
                trigger: "blur"
              }]
            },
            {
              label: "排序",
              prop: "sort",
              type: "number",
              align: "right",
              width: 80,
              rules: [{
                required: true,
                message: "请输入排序",
                trigger: "blur"
              }]
            },
            {
              label: "备注",
              prop: "remark",
              rules: [{
                required: false,
                message: "请输入备注",
                trigger: "blur"
              }],
              hide: true
            }
          ]
        },
        data: []
        addBtn: this.vaildData(this.permission.dept_add, false),
        viewBtn: this.vaildData(this.permission.dept_view, false),
        delBtn: this.vaildData(this.permission.dept_delete, false),
        editBtn: this.vaildData(this.permission.dept_edit, false)
      };
    },
    computed: {
      ...mapGetters(["userInfo", "permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.dept_add, false),
          viewBtn: this.vaildData(this.permission.dept_view, false),
          delBtn: this.vaildData(this.permission.dept_delete, false),
          editBtn: this.vaildData(this.permission.dept_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      initData() {
        getDeptTree().then(res => {
          const column = this.findObject(this.option.column, "parentId");
          column.dicData = res.data.data;
        });
      },
      handleAdd(row) {
        this.parentId = row.id;
        const column = this.findObject(this.option.column, "parentId");
        column.value = row.id;
        column.addDisabled = true;
        this.$refs.crud.rowAdd();
      },
      rowSave(row, done, loading) {
        add(row).then((res) => {
          // 获取新增数据的相关字段
          const data = res.data.data;
          row.id = data.id;
          row.deptCategoryName = data.deptCategoryName;
          row.tenantId = data.tenantId;
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          // 数据回调进行刷新
          done(row);
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          // 数据回调进行刷新
          done(row);
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowDel(row, index, done) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            // 数据回调进行刷新
            done(row);
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            // 刷新表格数据并重载
            this.data = [];
            this.parentId = 0;
            this.$refs.crud.refreshTable();
            this.$refs.crud.toggleSelection();
            // 表格数据重载
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      searchReset() {
        this.query = {};
        this.parentId = 0;
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.parentId = '';
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      beforeOpen(done, type) {
        if (["add", "edit"].includes(type)) {
          this.initData();
        }
        if (["edit", "view"].includes(type)) {
          getDept(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      beforeClose(done) {
        this.parentId = "";
        const column = this.findObject(this.option.column, "parentId");
        column.value = "";
        column.addDisabled = false;
        done();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getLazyList(this.parentId, Object.assign(params, this.query)).then(res => {
          this.data = res.data.data;
          this.loading = false;
          this.selectionClear();
        });
      },
      treeLoad(tree, treeNode, resolve) {
        const parentId = tree.id;
        getLazyList(parentId).then(res => {
          resolve(res.data.data);
        });
      }
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  };
  },
  created() {
    //放在数据加载完后执行
    // this.$nextTick(() => this.$refs.crud.dicInit('cascader'))
  },
  methods: {
    initData() {
      // getDeptTree().then(res => {
      //   const column = this.findObject(this.option.column, "parentId");
      //   column.dicData = res.data.data;
      // });
    },
    handleAdd(row) {
      this.parentId = row.id;
      const column = this.findObject(this.option.column, "parentId");
      column.value = row.id;
      column.addDisabled = true;
      this.$refs.crud.rowAdd();
    },
    rowSave(row, done, loading) {
      add(row).then((res) => {
        // 获取新增数据的相关字段
        const data = res.data.data;
        row.id = data.id;
        row.deptCategoryName = data.deptCategoryName;
        row.tenantId = data.tenantId;
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        // 数据回调进行刷新
        done(row);
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        // 数据回调进行刷新
        done(row);
      }, error => {
        window.console.log(error);
        loading();
      });
    },
    rowDel(row, index, done) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          // 数据回调进行刷新
          done(row);
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          // 刷新表格数据并重载
          this.data = [];
          this.parentId = 0;
          this.$refs.crud.refreshTable();
          this.$refs.crud.toggleSelection();
          // 表格数据重载
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    searchReset() {
      this.query = {};
      this.parentId = 0;
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.parentId = '';
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    beforeOpen(done, type) {
      if (["add", "edit"].includes(type)) {
        this.initData();
      }
      if (["edit", "view"].includes(type)) {
        getDept(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    beforeClose(done) {
      this.parentId = "";
      const column = this.findObject(this.option.column, "parentId");
      column.value = "";
      column.addDisabled = false;
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getLazyList(this.parentId, Object.assign(params, this.query)).then(res => {
        this.data = res.data.data;
        //手动初始化字典,否则不能回显
        this.$nextTick(() => this.$refs.crud.dicInit('cascader'))
        this.loading = false;
        this.selectionClear();
      });
    },
    treeLoad(tree, treeNode, resolve) {
      const parentId = tree.id;
      getLazyList(parentId).then(res => {
        resolve(res.data.data);
      });
    }
  }
};
</script>

<style>

 src/views/system/user.vue

@@ -1,15 +1,15 @@
<template>
  <el-row>
    <el-col :span="5">
      <div class="box">
        <el-scrollbar>
          <basic-container>
            <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>
          </basic-container>
        </el-scrollbar>
      </div>
    </el-col>
    <el-col :span="19">
<!--    <el-col :span="5">-->
<!--      <div class="box">-->
<!--        <el-scrollbar>-->
<!--          <basic-container>-->
<!--            <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>-->
<!--          </basic-container>-->
<!--        </el-scrollbar>-->
<!--      </div>-->
<!--    </el-col>-->
    <el-col :span="24">
      <basic-container>
        <avue-crud :option="option"
                   :search.sync="search"
@@ -38,13 +38,13 @@
                       v-if="permission.user_delete"
                       @click="handleDelete">删 除
            </el-button>
            <el-button type="info"
                       size="small"
                       plain
                       v-if="permission.user_role"
                       icon="el-icon-user"
                       @click="handleGrant">角色配置
            </el-button>
<!--            <el-button type="info"-->
<!--                       size="small"-->
<!--                       plain-->
<!--                       v-if="permission.user_role"-->
<!--                       icon="el-icon-user"-->
<!--                       @click="handleGrant">角色配置-->
<!--            </el-button>-->
            <el-button type="info"
                       size="small"
                       plain
@@ -52,34 +52,34 @@
                       icon="el-icon-refresh"
                       @click="handleReset">密码重置
            </el-button>
            <el-button type="info"
                       size="small"
                       plain
                       v-if="userInfo.role_name.includes('admin')"
                       icon="el-icon-setting"
                       @click="handlePlatform">平台配置
            </el-button>
            <el-button type="info"
                       size="small"
                       plain
                       v-if="userInfo.role_name.includes('admin')"
                       icon="el-icon-coordinate"
                       @click="handleLock">账号解封
            </el-button>
            <el-button type="success"
                       size="small"
                       plain
                       v-if="userInfo.role_name.includes('admin')"
                       icon="el-icon-upload2"
                       @click="handleImport">导入
            </el-button>
            <el-button type="warning"
                       size="small"
                       plain
                       v-if="userInfo.role_name.includes('admin')"
                       icon="el-icon-download"
                       @click="handleExport">导出
            </el-button>
<!--            <el-button type="info"-->
<!--                       size="small"-->
<!--                       plain-->
<!--                       v-if="userInfo.role_name.includes('admin')"-->
<!--                       icon="el-icon-setting"-->
<!--                       @click="handlePlatform">平台配置-->
<!--            </el-button>-->
<!--            <el-button type="info"-->
<!--                       size="small"-->
<!--                       plain-->
<!--                       v-if="userInfo.role_name.includes('admin')"-->
<!--                       icon="el-icon-coordinate"-->
<!--                       @click="handleLock">账号解封-->
<!--            </el-button>-->
<!--            <el-button type="success"-->
<!--                       size="small"-->
<!--                       plain-->
<!--                       v-if="userInfo.role_name.includes('admin')"-->
<!--                       icon="el-icon-upload2"-->
<!--                       @click="handleImport">导入-->
<!--            </el-button>-->
<!--            <el-button type="warning"-->
<!--                       size="small"-->
<!--                       plain-->
<!--                       v-if="userInfo.role_name.includes('admin')"-->
<!--                       icon="el-icon-download"-->
<!--                       @click="handleExport">导出-->
<!--            </el-button>-->
          </template>
          <template slot-scope="{row}"
                    slot="tenantName">
@@ -274,28 +274,10 @@
          border: true,
          index: true,
          selection: true,
          viewBtn: true,
          viewBtn: false,
          dialogType: 'drawer',
          dialogClickModal: false,
          column: [
            {
              label: "登录账号",
              prop: "account",
              search: true,
              display: false
            },
            {
              label: "所属租户",
              prop: "tenantName",
              slot: true,
              display: false
            },
            {
              label: "用户姓名",
              prop: "realName",
              search: true,
              display: false
            },
            {
              label: "所属角色",
              prop: "roleName",
@@ -303,35 +285,51 @@
              display: false
            },
            {
              label: "所属部门",
              label: "用户名",
              prop: "account",
              search: true,
              searchSpan:4,
              display: false
            },
            {
              label: "真实姓名",
              prop: "realName",
              search: true,
              searchSpan:4,
              display: false
            },
            {
              label: "用户性别",
              prop: "sex",
              type: "select",
              dicData: [
                {
                  label: "男",
                  value: 1
                },
                {
                  label: "女",
                  value: 2
                },
                {
                  label: "未知",
                  value: 3
                }
              ],
              display: false,
            },
            {
              label: "手机号码",
              prop: "phone",
              search: true,
              searchSpan:4,
              display: false,
            },
            {
              label: "所属单位",
              prop: "deptName",
              slot: true,
              display: false
            },
            {
              label: "用户平台",
              prop: "userTypeName",
              slot: true,
              display: false
            },
            {
              label: "用户平台",
              type: "select",
              dicUrl: "/api/blade-system/dict/dictionary?code=user_type",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              search: true,
              hide: true,
              display: false,
              prop: "userType",
              rules: [{
                required: true,
                message: "请选择用户平台",
                trigger: "blur"
              }]
            },
          ],
          group: [
@@ -341,26 +339,6 @@
              icon: 'el-icon-user-solid',
              column: [
                {
                  label: "所属租户",
                  prop: "tenantId",
                  type: "tree",
                  dicUrl: "/api/blade-system/tenant/select",
                  props: {
                    label: "tenantName",
                    value: "tenantId"
                  },
                  hide: !website.tenantMode,
                  addDisplay: website.tenantMode,
                  editDisplay: website.tenantMode,
                  viewDisplay: website.tenantMode,
                  rules: [{
                    required: true,
                    message: "请输入所属租户",
                    trigger: "click"
                  }],
                  span: 24,
                },
                {
                  label: "登录账号",
                  prop: "account",
                  rules: [{
@@ -368,23 +346,6 @@
                    message: "请输入登录账号",
                    trigger: "blur"
                  }],
                },
                {
                  label: "用户平台",
                  type: "select",
                  dicUrl: "/api/blade-system/dict/dictionary?code=user_type",
                  props: {
                    label: "dictValue",
                    value: "dictKey"
                  },
                  dataType: "number",
                  slot: true,
                  prop: "userType",
                  rules: [{
                    required: true,
                    message: "请选择用户平台",
                    trigger: "blur"
                  }]
                },
                {
                  label: '密码',
@@ -463,14 +424,14 @@
                  ],
                  hide: true
                },
                {
                  label: "用户生日",
                  type: "date",
                  prop: "birthday",
                  format: "yyyy-MM-dd hh:mm:ss",
                  valueFormat: "yyyy-MM-dd hh:mm:ss",
                  hide: true
                },
                // {
                //   label: "用户生日",
                //   type: "date",
                //   prop: "birthday",
                //   format: "yyyy-MM-dd hh:mm:ss",
                //   valueFormat: "yyyy-MM-dd hh:mm:ss",
                //   hide: true
                // },
                {
                  label: "账号状态",
                  prop: "statusName",
@@ -484,13 +445,14 @@
              prop: 'dutyInfo',
              icon: 'el-icon-s-custom',
              column: [
                {
                  label: "用户编号",
                  prop: "code",
                },
                // {
                //   label: "用户编号",
                //   prop: "code",
                // },
                {
                  label: "所属角色",
                  prop: "roleId",
                  search:true,
                  multiple: true,
                  type: "tree",
                  dicData: [],
@@ -506,10 +468,10 @@
                  }]
                },
                {
                  label: "所属部门",
                  label: "所属单位",
                  prop: "deptId",
                  type: "tree",
                  multiple: true,
                  // multiple: true,
                  dicData: [],
                  props: {
                    label: "title"
@@ -518,26 +480,26 @@
                  slot: true,
                  rules: [{
                    required: true,
                    message: "请选择所属部门",
                    message: "请选择所属单位",
                    trigger: "click"
                  }]
                },
                {
                  label: "所属岗位",
                  prop: "postId",
                  type: "tree",
                  multiple: true,
                  dicData: [],
                  props: {
                    label: "postName",
                    value: "id"
                  },
                  rules: [{
                    required: true,
                    message: "请选择所属岗位",
                    trigger: "click"
                  }],
                },
                // {
                //   label: "所属岗位",
                //   prop: "postId",
                //   type: "tree",
                //   multiple: true,
                //   dicData: [],
                //   props: {
                //     label: "postName",
                //     value: "id"
                //   },
                //   rules: [{
                //     required: true,
                //     message: "请选择所属岗位",
                //     trigger: "click"
                //   }],
                // },
              ]
            },
          ]

 src/views/vehicle/vehicle.vue

New file
@@ -0,0 +1,327 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.vehicle_delete"
                   @click="handleDelete">删 除
        </el-button>
      </template>
<!--      <template slot-scope="{type,size,row,index}" slot="menu">-->
<!--        <el-button icon="el-icon-edit" :size="size" :type="type" @click="$refs.crud.rowEdit(row,index)">编 辑</el-button>-->
<!--        <el-button icon="el-icon-delete" :size="size" :type="type" @click="$refs.crud.rowDel(row,index)">删 除</el-button>-->
<!--      </template>-->
    </avue-crud>
  </basic-container>
</template>

<script>
import {getList, getDetail, add, update, remove} from "@/api/vehicle/vehicle";
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "车辆id",
            prop: "id",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
          },
          {
            label: "车牌号",
            prop: "licensePlate",
            type: "input",
            span: 24,
            search: true,
            rules: [{
              required: true,
              message: "请输入车牌号",
              trigger: "blur"
            }],
          },
          {
            label: "所在单位",
            prop: "deptId",
            type: "select",
            dicUrl: '/api/blade-system/dept/list',
            props: {
              label: "deptName",
              value: "id"
            },
            span: 24,
            rules: [{
              required: true,
              message: "请选择所在单位",
              trigger: "blur"
            }],
          },
          {
            label: "车辆类型",
            prop: "type",
            type: "select",
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=vehicle_type',
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 24,
            rules: [{
              required: true,
              message: "请选择车辆类型",
              trigger: "blur"
            }],
          },
          {
            label: "创建人",
            prop: "createUser",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "创建部门",
            prop: "createDept",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "创建时间",
            prop: "createTime",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "修改人",
            prop: "updateUser",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "操作时间",
            prop: "updateTime",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
          },
          {
            label: "状态",
            prop: "status",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "是否已删除",
            prop: "isDeleted",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
          {
            label: "租户ID",
            prop: "tenantId",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
          },
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.vehicle_add, false),
        viewBtn: this.vaildData(this.permission.vehicle_view, false),
        delBtn: this.vaildData(this.permission.vehicle_delete, false),
        editBtn: this.vaildData(this.permission.vehicle_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  methods: {
    rowSave(row, done, loading) {
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    }
  }
};
</script>

<style>
</style>