合并冲突

shuishen

2022-07-29 d6a0abe9024f87fc517a2b71df0f17c5cadc41a0

合并冲突

 src/views/authority/apiscope.vue

@@ -1,643 +1,653 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               v-model="form"
               :permission="permissionList"
               :before-open="beforeOpen"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
               @tree-load="treeLoad">
      <template slot-scope="{row}" slot="menu">
        <el-button type="text"
                   icon="el-icon-setting"
                   size="small"
                   v-if="permission.api_scope_setting"
                   plain
                   style="border: 0;background-color: transparent !important;"
                   @click.stop="handleDataScope(row)">权限配置
        </el-button>
      </template>
      <template slot-scope="{row}" slot="source">
        <div style="text-align:center">
          <i :class="row.source"/>
        </div>
      </template>
    </avue-crud>
    <el-drawer :title="`[${scopeMenuName}] 接口权限配置`" :visible.sync="drawerVisible" :direction="direction"
               append-to-body
               :before-close="handleDrawerClose" size="1000px">
      <basic-container>
        <avue-crud :option="optionScope"
                   :data="dataScope"
                   :page="pageScope"
                   v-model="formScope"
                   :table-loading="scopeLoading"
                   ref="crudScope"
                   @row-del="rowDelScope"
                   @row-update="rowUpdateScope"
                   @row-save="rowSaveScope"
                   :before-open="beforeOpenScope"
                   @search-change="searchChangeScope"
                   @search-reset="searchResetScope"
                   @selection-change="selectionChangeScope"
                   @current-change="currentChangeScope"
                   @size-change="sizeChangeScope"
                   @on-load="onLoadScope">
          <template slot="menuLeft">
            <el-button type="danger"
                       size="small"
                       icon="el-icon-delete"
                       plain
                       @click="handleDeleteScope">删 除
            </el-button>
          </template>
          <template slot-scope="{row}"
                    slot="scopeType">
            <el-tag>{{row.scopeTypeName}}</el-tag>
          </template>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            ref="crud"
            v-model="form"
            :permission="permissionList"
            :before-open="beforeOpen"
            @row-del="rowDel"
            @row-update="rowUpdate"
            @row-save="rowSave"
            @search-change="searchChange"
            @search-reset="searchReset"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
            @tree-load="treeLoad"
        >
            <template slot-scope="{row}" slot="menu">
                <el-button
                    type="text"
                    icon="el-icon-setting"
                    size="small"
                    v-if="permission.api_scope_setting"
                    plain
                    style="border: 0;background-color: transparent !important;"
                    @click.stop="handleDataScope(row)"
                >权限配置</el-button>
            </template>
            <template slot-scope="{row}" slot="source">
                <div style="text-align:center">
                    <i :class="row.source" />
                </div>
            </template>
        </avue-crud>
      </basic-container>
    </el-drawer>
  </basic-container>
        <el-drawer
            :title="`[${scopeMenuName}] 接口权限配置`"
            :visible.sync="drawerVisible"
            :direction="direction"
            append-to-body
            :before-close="handleDrawerClose"
            size="1000px"
        >
            <basic-container>
                <avue-crud
                    :option="optionScope"
                    :data="dataScope"
                    :page="pageScope"
                    v-model="formScope"
                    :table-loading="scopeLoading"
                    ref="crudScope"
                    @row-del="rowDelScope"
                    @row-update="rowUpdateScope"
                    @row-save="rowSaveScope"
                    :before-open="beforeOpenScope"
                    @search-change="searchChangeScope"
                    @search-reset="searchResetScope"
                    @selection-change="selectionChangeScope"
                    @current-change="currentChangeScope"
                    @size-change="sizeChangeScope"
                    @on-load="onLoadScope"
                >
                    <template slot="menuLeft">
                        <el-button
                            type="danger"
                            size="small"
                            icon="el-icon-delete"
                            plain
                            @click="handleDeleteScope"
                        >删 除</el-button>
                    </template>
                    <template slot-scope="{row}" slot="scopeType">
                        <el-tag>{{row.scopeTypeName}}</el-tag>
                    </template>
                </avue-crud>
            </basic-container>
        </el-drawer>
    </basic-container>
</template>

<script>
  import {
import {
    add,
    remove,
    update,
    getLazyMenuList,
    getMenu
  } from "@/api/system/menu";
  import {
} from "@/api/system/menu"
import {
    addApiScope,
    removeApiScope,
    updateApiScope,
    getListApiScope,
    getMenuApiScope
  } from "@/api/system/scope";
  import {mapGetters} from "vuex";
  import iconList from "@/config/iconList";
} from "@/api/system/scope"
import { mapGetters } from "vuex"
import iconList from "@/config/iconList"

  export default {
    data() {
      return {
        form: {},
        selectionList: [],
        query: {},
        loading: true,
        parentId: 0,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        drawerVisible: false,
        direction: 'rtl',
        scopeLoading: false,
        scopeMenuId: 0,
        scopeMenuName: "菜单",
        menu: true,
        option: {
          lazy: true,
          tip: false,
          simplePage: true,
          searchShow: true,
          searchMenuSpan: 6,
          dialogWidth: "60%",
          tree: true,
          border: true,
          index: true,
          selection: true,
          viewBtn: false,
          editBtn: false,
          addBtn: false,
          delBtn: false,
          menuWidth: 150,
          dialogClickModal: false,
          column: [
            {
              label: "菜单名称",
              prop: "name",
              search: true,
              rules: [
                {
                  required: true,
                  message: "请输入菜单名称",
                  trigger: "blur"
                }
              ]
export default {
    data () {
        return {
            form: {},
            selectionList: [],
            query: {},
            loading: true,
            parentId: 0,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            {
              label: "路由地址",
              prop: "path",
              rules: [
                {
                  required: true,
                  message: "请输入路由地址",
                  trigger: "blur"
                }
              ]
            drawerVisible: false,
            direction: 'rtl',
            scopeLoading: false,
            scopeMenuId: 0,
            scopeMenuName: "菜单",
            menu: true,
            option: {
                lazy: true,
                tip: false,
                simplePage: true,
                searchShow: true,
                searchMenuSpan: 6,
                dialogWidth: "60%",
                tree: true,
                border: true,
                index: true,
                selection: true,
                viewBtn: false,
                editBtn: false,
                addBtn: false,
                delBtn: false,
                menuWidth: 150,
                dialogClickModal: false,
                column: [
                    {
                        label: "菜单名称",
                        prop: "name",
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入菜单名称",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "路由地址",
                        prop: "path",
                        rules: [
                            {
                                required: true,
                                message: "请输入路由地址",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "上级菜单",
                        prop: "parentId",
                        type: "tree",
                        dicUrl: "/api/blade-system/menu/tree",
                        hide: true,
                        props: {
                            label: "title"
                        },
                        rules: [
                            {
                                required: false,
                                message: "请选择上级菜单",
                                trigger: "click"
                            }
                        ]
                    },
                    {
                        label: "菜单图标",
                        prop: "source",
                        type: "icon",
                        slot: true,
                        width: 80,
                        iconList: iconList,
                        rules: [
                            {
                                required: true,
                                message: "请输入菜单图标",
                                trigger: "click"
                            }
                        ]
                    },
                    {
                        label: "菜单编号",
                        prop: "code",
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入菜单编号",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "菜单类型",
                        prop: "category",
                        type: "radio",
                        dicData: [
                            {
                                label: "菜单",
                                value: 1
                            },
                            {
                                label: "按钮",
                                value: 2
                            }
                        ],
                        hide: true,
                        rules: [
                            {
                                required: true,
                                message: "请选择菜单类型",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "菜单别名",
                        prop: "alias",
                        rules: [
                            {
                                required: true,
                                message: "请输入菜单别名",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "按钮功能",
                        prop: "action",
                        type: "radio",
                        dicData: [
                            {
                                label: "工具栏",
                                value: 0
                            },
                            {
                                label: "操作栏",
                                value: 1
                            },
                            {
                                label: "工具操作栏",
                                value: 2
                            }
                        ],
                        hide: true,
                        rules: [
                            {
                                required: true,
                                message: "请选择按钮功能",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "菜单排序",
                        prop: "sort",
                        type: "number",
                        width: 80,
                        rules: [
                            {
                                required: true,
                                message: "请输入菜单排序",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "新窗口",
                        prop: "isOpen",
                        type: "radio",
                        dicData: [
                            {
                                label: "否",
                                value: 0
                            },
                            {
                                label: "是",
                                value: 1
                            },
                        ],
                        hide: true
                    },
                    {
                        label: "菜单备注",
                        prop: "remark",
                        type: "textarea",
                        span: 24,
                        minRows: 6,
                        hide: true
                    }
                ]
            },
            {
              label: "上级菜单",
              prop: "parentId",
              type: "tree",
              dicUrl: "/api/blade-system/menu/tree",
              hide: true,
              props: {
                label: "title"
              },
              rules: [
                {
                  required: false,
                  message: "请选择上级菜单",
                  trigger: "click"
                }
              ]
            data: [],
            formScope: {},
            selectionListScope: [],
            pageScope: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            {
              label: "菜单图标",
              prop: "source",
              type: "icon",
              slot: true,
              width: 80,
              iconList: iconList,
              rules: [
                {
                  required: true,
                  message: "请输入菜单图标",
                  trigger: "click"
                }
              ]
            optionScope: {
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                selection: true,
                menuWidth: 200,
                dialogWidth: 900,
                dialogClickModal: false,
                column: [
                    {
                        label: "权限名称",
                        prop: "scopeName",
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入权限名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "权限编号",
                        prop: "resourceCode",
                        search: true,
                        width: 180,
                        rules: [{
                            required: true,
                            message: "请输入权限编号",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "权限路径",
                        prop: "scopePath",
                        width: 180,
                        rules: [{
                            required: true,
                            message: "请输入权限编号",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "接口类型",
                        type: "select",
                        dicUrl: "/api/blade-system/dict/dictionary?code=api_scope_type",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dataType: "number",
                        slot: true,
                        width: 100,
                        prop: "scopeType",
                        rules: [{
                            required: true,
                            message: "请输入通知类型",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "备注",
                        prop: "remark",
                        span: 24,
                        hide: true,
                    },
                ]
            },
            {
              label: "菜单编号",
              prop: "code",
              search: true,
              rules: [
                {
                  required: true,
                  message: "请输入菜单编号",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "菜单类型",
              prop: "category",
              type: "radio",
              dicData: [
                {
                  label: "菜单",
                  value: 1
                },
                {
                  label: "按钮",
                  value: 2
                }
              ],
              hide: true,
              rules: [
                {
                  required: true,
                  message: "请选择菜单类型",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "菜单别名",
              prop: "alias",
              rules: [
                {
                  required: true,
                  message: "请输入菜单别名",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "按钮功能",
              prop: "action",
              type: "radio",
              dicData: [
                {
                  label: "工具栏",
                  value: 0
                },
                {
                  label: "操作栏",
                  value: 1
                },
                {
                  label: "工具操作栏",
                  value: 2
                }
              ],
              hide: true,
              rules: [
                {
                  required: true,
                  message: "请选择按钮功能",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "菜单排序",
              prop: "sort",
              type: "number",
              width: 80,
              rules: [
                {
                  required: true,
                  message: "请输入菜单排序",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "新窗口",
              prop: "isOpen",
              type: "radio",
              dicData: [
                {
                  label: "否",
                  value: 0
                },
                {
                  label: "是",
                  value: 1
                },
              ],
              hide: true
            },
            {
              label: "菜单备注",
              prop: "remark",
              type: "textarea",
              span: 24,
              minRows: 6,
              hide: true
            }
          ]
        },
        data: [],
        formScope: {},
        selectionListScope: [],
        pageScope: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        optionScope: {
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          menuWidth: 200,
          dialogWidth: 900,
          dialogClickModal: false,
          column: [
            {
              label: "权限名称",
              prop: "scopeName",
              search: true,
              rules: [{
                required: true,
                message: "请输入权限名称",
                trigger: "blur"
              }]
            },
            {
              label: "权限编号",
              prop: "resourceCode",
              search: true,
              width: 180,
              rules: [{
                required: true,
                message: "请输入权限编号",
                trigger: "blur"
              }]
            },
            {
              label: "权限路径",
              prop: "scopePath",
              width: 180,
              rules: [{
                required: true,
                message: "请输入权限编号",
                trigger: "blur"
              }]
            },
            {
              label: "接口类型",
              type: "select",
              dicUrl: "/api/blade-system/dict/dictionary?code=api_scope_type",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              slot: true,
              width: 100,
              prop: "scopeType",
              rules: [{
                required: true,
                message: "请输入通知类型",
                trigger: "blur"
              }]
            },
            {
              label: "备注",
              prop: "remark",
              span: 24,
              hide: true,
            },
          ]
        },
        dataScope: []
      };
            dataScope: []
        }
    },

    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.menu_add, false),
          viewBtn: this.vaildData(this.permission.menu_view, false),
          delBtn: this.vaildData(this.permission.menu_delete, false),
          editBtn: this.vaildData(this.permission.menu_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
      scopeIds() {
        let ids = [];
        this.selectionListScope.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.menu_add, false),
                viewBtn: this.vaildData(this.permission.menu_view, false),
                delBtn: this.vaildData(this.permission.menu_delete, false),
                editBtn: this.vaildData(this.permission.menu_edit, false)
            }
        },
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
        scopeIds () {
            let ids = []
            this.selectionListScope.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 => {
          window.console.log(error);
          loading();
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            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();
      },
      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)) {
          getMenu(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        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;
        getLazyMenuList(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;
        getLazyMenuList(parentId).then(res => {
          resolve(res.data.data);
        });
      },
      // 数据权限模块
      handleDataScope(row) {
        this.drawerVisible = true;
        this.scopeMenuId = row.id;
        this.scopeMenuName = row.name;
        this.onLoadScope(this.pageScope)
      },
      handleDrawerClose(hide) {
        hide();
      },
      rowSaveScope(row, done, loading) {
        row = {
          ...row,
          menuId: this.scopeMenuId,
        };
        addApiScope(row).then(() => {
          this.onLoadScope(this.pageScope);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowUpdateScope(row, index, done, loading) {
        row = {
          ...row,
          menuId: this.scopeMenuId,
        };
        updateApiScope(row).then(() => {
          this.onLoadScope(this.pageScope);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowDelScope(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return removeApiScope(row.id);
          })
          .then(() => {
            this.onLoadScope(this.pageScope);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDeleteScope() {
        if (this.selectionListScope.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return removeApiScope(this.scopeIds);
          })
          .then(() => {
            this.onLoadScope(this.pageScope);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crudScope.toggleSelection();
          });
      },
      beforeOpenScope(done, type) {
        if (["edit", "view"].includes(type)) {
          getMenuApiScope(this.formScope.id).then(res => {
            this.formScope = res.data.data;
          });
        }
        done();
      },
      searchResetScope() {
        this.onLoadScope(this.pageScope);
      },
      searchChangeScope(params, done) {
        this.onLoadScope(this.pageScope, params);
        done();
      },
      selectionChangeScope(list) {
        this.selectionListScope = list;
      },
      currentChangeScope(currentPage) {
        this.pageScope.currentPage = currentPage;
      },
      sizeChangeScope(pageSize) {
        this.pageScope.pageSize = pageSize;
      },
      onLoadScope(page, params = {}) {
        this.scopeLoading = true;
        const values = {
          ...params,
          menuId: this.scopeMenuId,
        }
        getListApiScope(page.currentPage, page.pageSize, Object.assign(values, this.query)).then(res => {
          const data = res.data.data;
          this.pageScope.total = data.total;
          this.dataScope = data.records;
          this.selectionListScope = [];
          this.scopeLoading = false;
        });
      },
        // 菜单管理模块
        rowSave (row, done, loading) {
            add(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    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()
        },
        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)) {
                getMenu(this.form.id).then(res => {
                    this.form = res.data.data
                })
            }
            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
            getLazyMenuList(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
            getLazyMenuList(parentId).then(res => {
                resolve(res.data.data)
            })
        },
        // 数据权限模块
        handleDataScope (row) {
            this.drawerVisible = true
            this.scopeMenuId = row.id
            this.scopeMenuName = row.name
            this.onLoadScope(this.pageScope)
        },
        handleDrawerClose (hide) {
            hide()
        },
        rowSaveScope (row, done, loading) {
            row = {
                ...row,
                menuId: this.scopeMenuId,
            }
            addApiScope(row).then(() => {
                this.onLoadScope(this.pageScope)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowUpdateScope (row, index, done, loading) {
            row = {
                ...row,
                menuId: this.scopeMenuId,
            }
            updateApiScope(row).then(() => {
                this.onLoadScope(this.pageScope)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowDelScope (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return removeApiScope(row.id)
                })
                .then(() => {
                    this.onLoadScope(this.pageScope)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                })
        },
        handleDeleteScope () {
            if (this.selectionListScope.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return removeApiScope(this.scopeIds)
                })
                .then(() => {
                    this.onLoadScope(this.pageScope)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crudScope.toggleSelection()
                })
        },
        beforeOpenScope (done, type) {
            if (["edit", "view"].includes(type)) {
                getMenuApiScope(this.formScope.id).then(res => {
                    this.formScope = res.data.data
                })
            }
            done()
        },
        searchResetScope () {
            this.onLoadScope(this.pageScope)
        },
        searchChangeScope (params, done) {
            this.onLoadScope(this.pageScope, params)
            done()
        },
        selectionChangeScope (list) {
            this.selectionListScope = list
        },
        currentChangeScope (currentPage) {
            this.pageScope.currentPage = currentPage
        },
        sizeChangeScope (pageSize) {
            this.pageScope.pageSize = pageSize
        },
        onLoadScope (page, params = {}) {
            this.scopeLoading = true
            const values = {
                ...params,
                menuId: this.scopeMenuId,
            }
            getListApiScope(page.currentPage, page.pageSize, Object.assign(values, this.query)).then(res => {
                const data = res.data.data
                this.pageScope.total = data.total
                this.dataScope = data.records
                this.selectionListScope = []
                this.scopeLoading = false
            })
        },
    }
  };
};
</script>

 src/views/authority/datascope.vue

@@ -1,732 +1,742 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               v-model="form"
               :permission="permissionList"
               :before-open="beforeOpen"
               :before-close="beforeClose"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad"
               @tree-load="treeLoad">
      <template slot-scope="{row}" slot="menu">
        <el-button type="text"
                   icon="el-icon-setting"
                   size="small"
                   v-if="permission.data_scope_setting"
                   plain
                   style="border: 0;background-color: transparent !important;"
                   @click.stop="handleDataScope(row)">权限配置
        </el-button>
      </template>
      <template slot-scope="{row}" slot="source">
        <div style="text-align:center">
          <i :class="row.source"/>
        </div>
      </template>
    </avue-crud>
    <el-drawer :title="`[${scopeMenuName}] 数据权限配置`" :visible.sync="drawerVisible" :direction="direction"
               append-to-body
               :before-close="handleDrawerClose" size="1000px">
      <basic-container>
        <avue-crud :option="optionScope"
                   :data="dataScope"
                   :page="pageScope"
                   v-model="formScope"
                   :table-loading="scopeLoading"
                   ref="crudScope"
                   @row-del="rowDelScope"
                   @row-update="rowUpdateScope"
                   @row-save="rowSaveScope"
                   :before-open="beforeOpenScope"
                   @search-change="searchChangeScope"
                   @search-reset="searchResetScope"
                   @selection-change="selectionChangeScope"
                   @current-change="currentChangeScope"
                   @size-change="sizeChangeScope"
                   @on-load="onLoadScope">
          <template slot="menuLeft">
            <el-button type="danger"
                       size="small"
                       icon="el-icon-delete"
                       plain
                       @click="handleDeleteScope">删 除
            </el-button>
          </template>
          <template slot-scope="{row}"
                    slot="scopeType">
            <el-tag>{{row.scopeTypeName}}</el-tag>
          </template>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            ref="crud"
            v-model="form"
            :permission="permissionList"
            :before-open="beforeOpen"
            :before-close="beforeClose"
            @row-del="rowDel"
            @row-update="rowUpdate"
            @row-save="rowSave"
            @search-change="searchChange"
            @search-reset="searchReset"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
            @tree-load="treeLoad"
        >
            <template slot-scope="{row}" slot="menu">
                <el-button
                    type="text"
                    icon="el-icon-setting"
                    size="small"
                    v-if="permission.data_scope_setting"
                    plain
                    style="border: 0;background-color: transparent !important;"
                    @click.stop="handleDataScope(row)"
                >权限配置</el-button>
            </template>
            <template slot-scope="{row}" slot="source">
                <div style="text-align:center">
                    <i :class="row.source" />
                </div>
            </template>
        </avue-crud>
      </basic-container>
    </el-drawer>
  </basic-container>
        <el-drawer
            :title="`[${scopeMenuName}] 数据权限配置`"
            :visible.sync="drawerVisible"
            :direction="direction"
            append-to-body
            :before-close="handleDrawerClose"
            size="1000px"
        >
            <basic-container>
                <avue-crud
                    :option="optionScope"
                    :data="dataScope"
                    :page="pageScope"
                    v-model="formScope"
                    :table-loading="scopeLoading"
                    ref="crudScope"
                    @row-del="rowDelScope"
                    @row-update="rowUpdateScope"
                    @row-save="rowSaveScope"
                    :before-open="beforeOpenScope"
                    @search-change="searchChangeScope"
                    @search-reset="searchResetScope"
                    @selection-change="selectionChangeScope"
                    @current-change="currentChangeScope"
                    @size-change="sizeChangeScope"
                    @on-load="onLoadScope"
                >
                    <template slot="menuLeft">
                        <el-button
                            type="danger"
                            size="small"
                            icon="el-icon-delete"
                            plain
                            @click="handleDeleteScope"
                        >删 除</el-button>
                    </template>
                    <template slot-scope="{row}" slot="scopeType">
                        <el-tag>{{row.scopeTypeName}}</el-tag>
                    </template>
                </avue-crud>
            </basic-container>
        </el-drawer>
    </basic-container>
</template>

<script>
  import {
import {
    add,
    remove,
    update,
    getLazyMenuList,
    getMenu
  } from "@/api/system/menu";
  import {
} from "@/api/system/menu"
import {
    addDataScope,
    removeDataScope,
    updateDataScope,
    getListDataScope,
    getMenuDataScope
  } from "@/api/system/scope";
  import {mapGetters} from "vuex";
  import iconList from "@/config/iconList";
  import func from "@/util/func";
} from "@/api/system/scope"
import { mapGetters } from "vuex"
import iconList from "@/config/iconList"
import func from "@/util/func"

  export default {
    data() {
      return {
        form: {},
        selectionList: [],
        query: {},
        loading: true,
        parentId: 0,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        drawerVisible: false,
        direction: 'rtl',
        scopeMenuId: 0,
        scopeMenuCode: '',
        scopeMenuName: "菜单",
        scopeLoading: false,
        menu: true,
        watchMode: true,
        option: {
          lazy: true,
          tip: false,
          simplePage: true,
          searchShow: true,
          searchMenuSpan: 6,
          dialogWidth: "60%",
          tree: true,
          border: true,
          index: true,
          selection: true,
          viewBtn: false,
          editBtn: false,
          addBtn: false,
          delBtn: false,
          menuWidth: 150,
          dialogClickModal: false,
          column: [
            {
              label: "菜单名称",
              prop: "name",
              search: true,
              rules: [
                {
                  required: true,
                  message: "请输入菜单名称",
                  trigger: "blur"
                }
              ]
export default {
    data () {
        return {
            form: {},
            selectionList: [],
            query: {},
            loading: true,
            parentId: 0,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            {
              label: "路由地址",
              prop: "path",
              rules: [
                {
                  required: true,
                  message: "请输入路由地址",
                  trigger: "blur"
                }
              ]
            drawerVisible: false,
            direction: 'rtl',
            scopeMenuId: 0,
            scopeMenuCode: '',
            scopeMenuName: "菜单",
            scopeLoading: false,
            menu: true,
            watchMode: true,
            option: {
                lazy: true,
                tip: false,
                simplePage: true,
                searchShow: true,
                searchMenuSpan: 6,
                dialogWidth: "60%",
                tree: true,
                border: true,
                index: true,
                selection: true,
                viewBtn: false,
                editBtn: false,
                addBtn: false,
                delBtn: false,
                menuWidth: 150,
                dialogClickModal: false,
                column: [
                    {
                        label: "菜单名称",
                        prop: "name",
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入菜单名称",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "路由地址",
                        prop: "path",
                        rules: [
                            {
                                required: true,
                                message: "请输入路由地址",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "上级菜单",
                        prop: "parentId",
                        type: "tree",
                        dicUrl: "/api/blade-system/menu/tree",
                        hide: true,
                        props: {
                            label: "title"
                        },
                        rules: [
                            {
                                required: false,
                                message: "请选择上级菜单",
                                trigger: "click"
                            }
                        ]
                    },
                    {
                        label: "菜单图标",
                        prop: "source",
                        type: "icon",
                        slot: true,
                        width: 80,
                        iconList: iconList,
                        rules: [
                            {
                                required: true,
                                message: "请输入菜单图标",
                                trigger: "click"
                            }
                        ]
                    },
                    {
                        label: "菜单编号",
                        prop: "code",
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入菜单编号",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "菜单类型",
                        prop: "category",
                        type: "radio",
                        dicData: [
                            {
                                label: "菜单",
                                value: 1
                            },
                            {
                                label: "按钮",
                                value: 2
                            }
                        ],
                        hide: true,
                        rules: [
                            {
                                required: true,
                                message: "请选择菜单类型",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "菜单别名",
                        prop: "alias",
                        rules: [
                            {
                                required: true,
                                message: "请输入菜单别名",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "按钮功能",
                        prop: "action",
                        type: "radio",
                        dicData: [
                            {
                                label: "工具栏",
                                value: 0
                            },
                            {
                                label: "操作栏",
                                value: 1
                            },
                            {
                                label: "工具操作栏",
                                value: 2
                            }
                        ],
                        hide: true,
                        rules: [
                            {
                                required: true,
                                message: "请选择按钮功能",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "菜单排序",
                        prop: "sort",
                        type: "number",
                        width: 80,
                        rules: [
                            {
                                required: true,
                                message: "请输入菜单排序",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "新窗口",
                        prop: "isOpen",
                        type: "radio",
                        dicData: [
                            {
                                label: "否",
                                value: 0
                            },
                            {
                                label: "是",
                                value: 1
                            },
                        ],
                        hide: true
                    },
                    {
                        label: "菜单备注",
                        prop: "remark",
                        type: "textarea",
                        span: 24,
                        minRows: 6,
                        hide: true
                    }
                ]
            },
            {
              label: "上级菜单",
              prop: "parentId",
              type: "tree",
              dicUrl: "/api/blade-system/menu/tree",
              hide: true,
              props: {
                label: "title"
              },
              rules: [
                {
                  required: false,
                  message: "请选择上级菜单",
                  trigger: "click"
                }
              ]
            data: [],
            formScope: {},
            selectionListScope: [],
            pageScope: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            {
              label: "菜单图标",
              prop: "source",
              type: "icon",
              slot: true,
              width: 80,
              iconList: iconList,
              rules: [
                {
                  required: true,
                  message: "请输入菜单图标",
                  trigger: "click"
                }
              ]
            optionScope: {
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                selection: true,
                menuWidth: 200,
                dialogWidth: 900,
                dialogClickModal: false,
                column: [
                    {
                        label: "权限名称",
                        prop: "scopeName",
                        search: true,
                        value: "",
                        rules: [{
                            required: true,
                            message: "请输入数据权限名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "权限编号",
                        prop: "resourceCode",
                        search: true,
                        width: 100,
                        rules: [{
                            required: true,
                            message: "请输入数据权限编号",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "权限字段",
                        prop: "scopeColumn",
                        width: 130,
                        rules: [{
                            required: true,
                            message: "请输入数据权限编号",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "规则类型",
                        type: "select",
                        dicUrl: "/api/blade-system/dict/dictionary?code=data_scope_type",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dataType: "number",
                        slot: true,
                        width: 140,
                        prop: "scopeType",
                        rules: [{
                            required: true,
                            message: "请输入通知类型",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "可见字段",
                        prop: "scopeField",
                        span: 24,
                        hide: true,
                        value: "*",
                        rules: [{
                            required: true,
                            message: "请输入数据权限可见的字段",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: "权限类名",
                        prop: "scopeClass",
                        span: 24,
                        hide: true,
                        rules: [{
                            required: true,
                            message: "请输入MybatisMapper对应方法的完整类名路径",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: "规则值",
                        prop: "scopeValue",
                        span: 24,
                        minRows: 5,
                        type: "textarea",
                        display: true,
                        hide: true,
                    },
                    {
                        label: "备注",
                        prop: "remark",
                        span: 24,
                        hide: true,
                    },
                ]
            },
            {
              label: "菜单编号",
              prop: "code",
              search: true,
              rules: [
                {
                  required: true,
                  message: "请输入菜单编号",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "菜单类型",
              prop: "category",
              type: "radio",
              dicData: [
                {
                  label: "菜单",
                  value: 1
                },
                {
                  label: "按钮",
                  value: 2
                }
              ],
              hide: true,
              rules: [
                {
                  required: true,
                  message: "请选择菜单类型",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "菜单别名",
              prop: "alias",
              rules: [
                {
                  required: true,
                  message: "请输入菜单别名",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "按钮功能",
              prop: "action",
              type: "radio",
              dicData: [
                {
                  label: "工具栏",
                  value: 0
                },
                {
                  label: "操作栏",
                  value: 1
                },
                {
                  label: "工具操作栏",
                  value: 2
                }
              ],
              hide: true,
              rules: [
                {
                  required: true,
                  message: "请选择按钮功能",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "菜单排序",
              prop: "sort",
              type: "number",
              width: 80,
              rules: [
                {
                  required: true,
                  message: "请输入菜单排序",
                  trigger: "blur"
                }
              ]
            },
            {
              label: "新窗口",
              prop: "isOpen",
              type: "radio",
              dicData: [
                {
                  label: "否",
                  value: 0
                },
                {
                  label: "是",
                  value: 1
                },
              ],
              hide: true
            },
            {
              label: "菜单备注",
              prop: "remark",
              type: "textarea",
              span: 24,
              minRows: 6,
              hide: true
            }
          ]
        },
        data: [],
        formScope: {},
        selectionListScope: [],
        pageScope: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        optionScope: {
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          menuWidth: 200,
          dialogWidth: 900,
          dialogClickModal: false,
          column: [
            {
              label: "权限名称",
              prop: "scopeName",
              search: true,
              value: "",
              rules: [{
                required: true,
                message: "请输入数据权限名称",
                trigger: "blur"
              }]
            },
            {
              label: "权限编号",
              prop: "resourceCode",
              search: true,
              width: 100,
              rules: [{
                required: true,
                message: "请输入数据权限编号",
                trigger: "blur"
              }]
            },
            {
              label: "权限字段",
              prop: "scopeColumn",
              width: 130,
              rules: [{
                required: true,
                message: "请输入数据权限编号",
                trigger: "blur"
              }]
            },
            {
              label: "规则类型",
              type: "select",
              dicUrl: "/api/blade-system/dict/dictionary?code=data_scope_type",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              slot: true,
              width: 140,
              prop: "scopeType",
              rules: [{
                required: true,
                message: "请输入通知类型",
                trigger: "blur"
              }]
            },
            {
              label: "可见字段",
              prop: "scopeField",
              span: 24,
              hide: true,
              value: "*",
              rules: [{
                required: true,
                message: "请输入数据权限可见的字段",
                trigger: "blur"
              }],
            },
            {
              label: "权限类名",
              prop: "scopeClass",
              span: 24,
              hide: true,
              rules: [{
                required: true,
                message: "请输入MybatisMapper对应方法的完整类名路径",
                trigger: "blur"
              }],
            },
            {
              label: "规则值",
              prop: "scopeValue",
              span: 24,
              minRows: 5,
              type: "textarea",
              display: true,
              hide: true,
            },
            {
              label: "备注",
              prop: "remark",
              span: 24,
              hide: true,
            },
          ]
        },
        dataScope: []
      };
            dataScope: []
        }
    },
    watch: {
      'formScope.scopeType'() {
        this.initScope();
      }
        'formScope.scopeType' () {
            this.initScope()
        }
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.menu_add, false),
          viewBtn: this.vaildData(this.permission.menu_view, false),
          delBtn: this.vaildData(this.permission.menu_delete, false),
          editBtn: this.vaildData(this.permission.menu_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
      scopeIds() {
        let ids = [];
        this.selectionListScope.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.menu_add, false),
                viewBtn: this.vaildData(this.permission.menu_view, false),
                delBtn: this.vaildData(this.permission.menu_delete, false),
                editBtn: this.vaildData(this.permission.menu_edit, false)
            }
        },
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
        scopeIds () {
            let ids = []
            this.selectionListScope.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        }
    },
    methods: {
      initScope() {
        const scopeType = func.toInt(this.formScope.scopeType);
        const watchMode = this.watchMode;
        let column = "-", name = "暂无";
        if (scopeType === 1) {
          column = "-";
          name = "全部可见";
        } else if (scopeType === 2) {
          column = "create_user";
          name = "本人可见";
        } else if (scopeType === 3) {
          column = "create_dept";
          name = "所在机构可见";
        } else if (scopeType === 4) {
          column = "create_dept";
          name = "所在机构可见及子级可见";
        } else if (scopeType === 5) {
          column = "";
          name = "自定义";
        }
        this.$refs.crudScope.option.column.filter(item => {
          if (watchMode) {
            if (item.prop === "scopeName") {
              this.formScope.scopeName = `${this.scopeMenuName} [${name}]`;
        initScope () {
            const scopeType = func.toInt(this.formScope.scopeType)
            const watchMode = this.watchMode
            let column = "-", name = "暂无"
            if (scopeType === 1) {
                column = "-"
                name = "全部可见"
            } else if (scopeType === 2) {
                column = "create_user"
                name = "本人可见"
            } else if (scopeType === 3) {
                column = "create_dept"
                name = "所在机构可见"
            } else if (scopeType === 4) {
                column = "create_dept"
                name = "所在机构可见及子级可见"
            } else if (scopeType === 5) {
                column = ""
                name = "自定义"
            }
            if (item.prop === "resourceCode") {
              this.formScope.resourceCode = this.scopeMenuCode;
            this.$refs.crudScope.option.column.filter(item => {
                if (watchMode) {
                    if (item.prop === "scopeName") {
                        this.formScope.scopeName = `${this.scopeMenuName} [${name}]`
                    }
                    if (item.prop === "resourceCode") {
                        this.formScope.resourceCode = this.scopeMenuCode
                    }
                    if (item.prop === "scopeColumn") {
                        this.formScope.scopeColumn = column
                    }
                }
                if (item.prop === "scopeValue") {
                    item.display = scopeType === 5
                }
            })
        },
        // 菜单管理模块
        rowSave (row, done, loading) {
            add(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    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()
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            if (item.prop === "scopeColumn") {
              this.formScope.scopeColumn = column;
            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)) {
                getMenu(this.form.id).then(res => {
                    this.form = res.data.data
                })
            }
          }
          if (item.prop === "scopeValue") {
            item.display = scopeType === 5;
          }
        });
      },
      // 菜单管理模块
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            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();
      },
      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)) {
          getMenu(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      beforeClose(done) {
        this.formScope = {};
        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;
        getLazyMenuList(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;
        getLazyMenuList(parentId).then(res => {
          resolve(res.data.data);
        });
      },
      // 数据权限模块
      handleDataScope(row) {
        this.drawerVisible = true;
        this.scopeMenuId = row.id;
        this.scopeMenuCode = row.code;
        this.scopeMenuName = row.name;
        this.onLoadScope(this.pageScope)
      },
      handleDrawerClose(hide) {
        hide();
      },
      rowSaveScope(row, done, loading) {
        row = {
          ...row,
          menuId: this.scopeMenuId,
        };
        addDataScope(row).then(() => {
          this.onLoadScope(this.pageScope);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowUpdateScope(row, index, done, loading) {
        row = {
          ...row,
          menuId: this.scopeMenuId,
        };
        updateDataScope(row).then(() => {
          this.onLoadScope(this.pageScope);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowDelScope(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return removeDataScope(row.id);
          })
          .then(() => {
            this.onLoadScope(this.pageScope);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDeleteScope() {
        if (this.selectionListScope.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return removeDataScope(this.scopeIds);
          })
          .then(() => {
            this.onLoadScope(this.pageScope);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crudScope.toggleSelection();
          });
      },
      beforeOpenScope(done, type) {
        if (["add"].includes(type)) {
          this.watchMode = true;
          this.initScope();
        }
        if (["edit", "view"].includes(type)) {
          this.watchMode = false;
          getMenuDataScope(this.formScope.id).then(res => {
            this.formScope = res.data.data;
          });
        }
        done();
      },
      searchResetScope() {
        this.onLoadScope(this.pageScope);
      },
      searchChangeScope(params, done) {
        this.onLoadScope(this.pageScope, params);
        done();
      },
      selectionChangeScope(list) {
        this.selectionListScope = list;
      },
      currentChangeScope(currentPage) {
        this.pageScope.currentPage = currentPage;
      },
      sizeChangeScope(pageSize) {
        this.pageScope.pageSize = pageSize;
      },
      onLoadScope(page, params = {}) {
        this.scopeLoading = true;
        const values = {
          ...params,
          menuId: this.scopeMenuId,
        }
        getListDataScope(page.currentPage, page.pageSize, Object.assign(values, this.query)).then(res => {
          const data = res.data.data;
          this.pageScope.total = data.total;
          this.dataScope = data.records;
          this.selectionListScope = [];
          this.scopeLoading = false;
        });
      },
            done()
        },
        beforeClose (done) {
            this.formScope = {}
            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
            getLazyMenuList(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
            getLazyMenuList(parentId).then(res => {
                resolve(res.data.data)
            })
        },
        // 数据权限模块
        handleDataScope (row) {
            this.drawerVisible = true
            this.scopeMenuId = row.id
            this.scopeMenuCode = row.code
            this.scopeMenuName = row.name
            this.onLoadScope(this.pageScope)
        },
        handleDrawerClose (hide) {
            hide()
        },
        rowSaveScope (row, done, loading) {
            row = {
                ...row,
                menuId: this.scopeMenuId,
            }
            addDataScope(row).then(() => {
                this.onLoadScope(this.pageScope)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowUpdateScope (row, index, done, loading) {
            row = {
                ...row,
                menuId: this.scopeMenuId,
            }
            updateDataScope(row).then(() => {
                this.onLoadScope(this.pageScope)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowDelScope (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return removeDataScope(row.id)
                })
                .then(() => {
                    this.onLoadScope(this.pageScope)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                })
        },
        handleDeleteScope () {
            if (this.selectionListScope.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return removeDataScope(this.scopeIds)
                })
                .then(() => {
                    this.onLoadScope(this.pageScope)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crudScope.toggleSelection()
                })
        },
        beforeOpenScope (done, type) {
            if (["add"].includes(type)) {
                this.watchMode = true
                this.initScope()
            }
            if (["edit", "view"].includes(type)) {
                this.watchMode = false
                getMenuDataScope(this.formScope.id).then(res => {
                    this.formScope = res.data.data
                })
            }
            done()
        },
        searchResetScope () {
            this.onLoadScope(this.pageScope)
        },
        searchChangeScope (params, done) {
            this.onLoadScope(this.pageScope, params)
            done()
        },
        selectionChangeScope (list) {
            this.selectionListScope = list
        },
        currentChangeScope (currentPage) {
            this.pageScope.currentPage = currentPage
        },
        sizeChangeScope (pageSize) {
            this.pageScope.pageSize = pageSize
        },
        onLoadScope (page, params = {}) {
            this.scopeLoading = true
            const values = {
                ...params,
                menuId: this.scopeMenuId,
            }
            getListDataScope(page.currentPage, page.pageSize, Object.assign(values, this.query)).then(res => {
                const data = res.data.data
                this.pageScope.total = data.total
                this.dataScope = data.records
                this.selectionListScope = []
                this.scopeLoading = false
            })
        },
    }
  };
};
</script>


 src/views/authority/role.vue

@@ -1,380 +1,382 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               v-model="form"
               :permission="permissionList"
               :before-open="beforeOpen"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @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"
                   v-if="permission.role_delete"
                   plain
                   @click="handleDelete">删 除
        </el-button>
        <el-button size="small"
                   icon="el-icon-setting"
                   @click="handleRole"
                   v-if="userInfo.role_name.includes('admin')"
                   plain>权限设置
        </el-button>
      </template>
    </avue-crud>
    <el-dialog title="角色权限配置"
               append-to-body
               :visible.sync="box"
               width="345px">
      <el-tabs type="border-card">
        <el-tab-pane label="菜单权限">
          <el-tree :data="menuGrantList"
                   show-checkbox
                   node-key="id"
                   ref="treeMenu"
                   :default-checked-keys="menuTreeObj"
                   :props="props">
          </el-tree>
        </el-tab-pane>
        <el-tab-pane label="数据权限">
          <el-tree :data="dataScopeGrantList"
                   show-checkbox
                   node-key="id"
                   ref="treeDataScope"
                   :default-checked-keys="dataScopeTreeObj"
                   :props="props">
          </el-tree>
        </el-tab-pane>
        <el-tab-pane label="接口权限">
          <el-tree :data="apiScopeGrantList"
                   show-checkbox
                   node-key="id"
                   ref="treeApiScope"
                   :default-checked-keys="apiScopeTreeObj"
                   :props="props">
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            ref="crud"
            v-model="form"
            :permission="permissionList"
            :before-open="beforeOpen"
            @row-del="rowDel"
            @row-update="rowUpdate"
            @row-save="rowSave"
            @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"
                    v-if="permission.role_delete"
                    plain
                    @click="handleDelete"
                >删 除</el-button>
                <el-button
                    size="small"
                    icon="el-icon-setting"
                    @click="handleRole"
                    v-if="userInfo.role_name.includes('admin')"
                    plain
                >权限设置</el-button>
            </template>
        </avue-crud>
        <el-dialog title="角色权限配置" append-to-body :visible.sync="box" width="345px">
            <el-tabs type="border-card">
                <el-tab-pane label="菜单权限">
                    <el-tree
                        :data="menuGrantList"
                        show-checkbox
                        node-key="id"
                        ref="treeMenu"
                        :default-checked-keys="menuTreeObj"
                        :props="props"
                    ></el-tree>
                </el-tab-pane>
                <el-tab-pane label="数据权限">
                    <el-tree
                        :data="dataScopeGrantList"
                        show-checkbox
                        node-key="id"
                        ref="treeDataScope"
                        :default-checked-keys="dataScopeTreeObj"
                        :props="props"
                    ></el-tree>
                </el-tab-pane>
                <el-tab-pane label="接口权限">
                    <el-tree
                        :data="apiScopeGrantList"
                        show-checkbox
                        node-key="id"
                        ref="treeApiScope"
                        :default-checked-keys="apiScopeTreeObj"
                        :props="props"
                    ></el-tree>
                </el-tab-pane>
            </el-tabs>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="box = false">取 消</el-button>
        <el-button type="primary"
                   @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
            <span slot="footer" class="dialog-footer">
                <el-button @click="box = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </basic-container>
</template>

<script>
  import {add, getList, getRole, getRoleTreeById, grant, grantTree, remove, update} from "@/api/system/role";
  import {mapGetters} from "vuex";
  import website from '@/config/website';
import { add, getList, getRole, getRoleTreeById, grant, grantTree, remove, update } from "@/api/system/role"
import { mapGetters } from "vuex"
import website from '@/config/website'

  export default {
    data() {
      return {
        form: {},
        box: false,
        props: {
          label: "title",
          value: "key"
        },
        menuGrantList: [],
        dataScopeGrantList: [],
        apiScopeGrantList: [],
        apiGrantList: [],
        menuTreeObj: [],
        dataScopeTreeObj: [],
        apiScopeTreeObj: [],
        selectionList: [],
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        option: {
          tip: false,
          simplePage: true,
          searchShow: true,
          searchMenuSpan: 6,
          tree: true,
          border: true,
          index: true,
          selection: true,
          viewBtn: true,
          dialogWidth: 900,
          dialogClickModal: false,
          column: [
            {
              label: "角色名称",
              prop: "roleName",
              search: true,
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请输入角色名称",
                  trigger: "blur"
                }
              ]
export default {
    data () {
        return {
            form: {},
            box: false,
            props: {
                label: "title",
                value: "key"
            },
            {
              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"
              }]
            menuGrantList: [],
            dataScopeGrantList: [],
            apiScopeGrantList: [],
            apiGrantList: [],
            menuTreeObj: [],
            dataScopeTreeObj: [],
            apiScopeTreeObj: [],
            selectionList: [],
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            {
              label: "角色别名",
              prop: "roleAlias",
              search: true,
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请输入角色别名",
                  trigger: "blur"
                }
              ]
            option: {
                tip: false,
                simplePage: true,
                searchShow: true,
                searchMenuSpan: 6,
                tree: true,
                border: true,
                index: true,
                selection: true,
                viewBtn: true,
                dialogWidth: 900,
                dialogClickModal: false,
                column: [
                    {
                        label: "角色名称",
                        prop: "roleName",
                        search: true,
                        span: 24,
                        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: "roleAlias",
                        search: true,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入角色别名",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "上级角色",
                        prop: "parentId",
                        dicData: [],
                        type: "tree",
                        hide: true,
                        span: 24,
                        props: {
                            label: "title"
                        },
                        rules: [
                            {
                                required: false,
                                message: "请选择上级角色",
                                trigger: "click"
                            }
                        ]
                    },
                    {
                        label: "角色排序",
                        prop: "sort",
                        type: "number",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入角色排序",
                                trigger: "blur"
                            }
                        ]
                    }
                ]
            },
            {
              label: "上级角色",
              prop: "parentId",
              dicData: [],
              type: "tree",
              hide: true,
              span: 24,
              props: {
                label: "title"
              },
              rules: [
                {
                  required: false,
                  message: "请选择上级角色",
                  trigger: "click"
                }
              ]
            },
            {
              label: "角色排序",
              prop: "sort",
              type: "number",
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请输入角色排序",
                  trigger: "blur"
                }
              ]
            }
          ]
        },
        data: []
      };
            data: []
        }
    },
    computed: {
      ...mapGetters(["userInfo", "permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.role_add, false),
          viewBtn: this.vaildData(this.permission.role_view, false),
          delBtn: this.vaildData(this.permission.role_delete, false),
          editBtn: this.vaildData(this.permission.role_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        ...mapGetters(["userInfo", "permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.role_add, false),
                viewBtn: this.vaildData(this.permission.role_view, false),
                delBtn: this.vaildData(this.permission.role_delete, false),
                editBtn: this.vaildData(this.permission.role_edit, false)
            }
        },
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)

        });
        return ids.join(",");
      },
      idsArray() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids;
      }
            })
            return ids.join(",")
        },
        idsArray () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids
        }
    },
    methods: {
      initData(roleId){
        getRoleTreeById(roleId).then(res => {
          const column = this.findObject(this.option.column, "parentId");
          column.dicData = res.data.data;
        });
      },
      submit() {
        const menuList = this.$refs.treeMenu.getCheckedKeys();
        const dataScopeList = this.$refs.treeDataScope.getCheckedKeys();
        const apiScopeList = this.$refs.treeApiScope.getCheckedKeys();
        grant(this.idsArray, menuList, dataScopeList, apiScopeList).then(() => {
          this.box = false;
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.onLoad(this.page);
        });
      },
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
        initData (roleId) {
            getRoleTreeById(roleId).then(res => {
                const column = this.findObject(this.option.column, "parentId")
                column.dicData = res.data.data
            })
        },
        submit () {
            const menuList = this.$refs.treeMenu.getCheckedKeys()
            const dataScopeList = this.$refs.treeDataScope.getCheckedKeys()
            const apiScopeList = this.$refs.treeApiScope.getCheckedKeys()
            grant(this.idsArray, menuList, dataScopeList, apiScopeList).then(() => {
                this.box = false
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                this.onLoad(this.page)
            })
        },
        rowSave (row, done, loading) {
            add(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                })
        },

      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();
      },
      beforeOpen(done, type) {
        if (["add", "edit"].includes(type)) {
          this.initData(this.form.id);
        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()
        },
        beforeOpen (done, type) {
            if (["add", "edit"].includes(type)) {
                this.initData(this.form.id)
            }
            done()
        },
        handleRole () {
            if (this.selectionList.length !== 1) {
                this.$message.warning("只能选择一条数据")
                return
            }
            this.menuTreeObj = []
            this.dataScopeTreeObj = []
            this.apiScopeTreeObj = []
            grantTree()
                .then(res => {
                    this.menuGrantList = res.data.data.menu
                    this.dataScopeGrantList = res.data.data.dataScope
                    this.apiScopeGrantList = res.data.data.apiScope
                    getRole(this.ids).then(res => {
                        this.menuTreeObj = res.data.data.menu
                        this.dataScopeTreeObj = res.data.data.dataScope
                        this.apiScopeTreeObj = res.data.data.apiScope
                        this.box = true
                    })
                })
        },
        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()
                })
        },
        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 => {
                this.data = res.data.data
                this.loading = false
                this.selectionClear()
            })
        }
        done();
      },
      handleRole() {
        if (this.selectionList.length !== 1) {
          this.$message.warning("只能选择一条数据");
          return;
        }
        this.menuTreeObj = [];
        this.dataScopeTreeObj = [];
        this.apiScopeTreeObj = [];
        grantTree()
          .then(res => {
            this.menuGrantList = res.data.data.menu;
            this.dataScopeGrantList = res.data.data.dataScope;
            this.apiScopeGrantList = res.data.data.apiScope;
            getRole(this.ids).then(res => {
              this.menuTreeObj = res.data.data.menu;
              this.dataScopeTreeObj = res.data.data.dataScope;
              this.apiScopeTreeObj = res.data.data.apiScope;
              this.box = true;
            });
          });
      },
      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();
          });
      },
      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 => {
          this.data = res.data.data;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
};
</script>

 src/views/base/region.vue

@@ -1,429 +1,463 @@
<template>
  <el-row>
    <el-col :span="9">
      <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="15">
      <basic-container>
        <el-button-group>
          <el-button v-if="permission.region_add" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addChildren">新增下级</el-button>
          <el-button v-if="permission.region_delete" type="primary" size="small" icon="el-icon-delete" @click="handleDelete">删除</el-button>
          <el-button v-if="permission.region_import" type="primary" size="small" icon="el-icon-upload2" @click="handleImport">导入</el-button>
          <el-button v-if="permission.region_export" type="primary" size="small" icon="el-icon-download" @click="handleExport">导出</el-button>
          <el-button v-if="permission.region_debug" type="primary" size="small" icon="el-icon-video-play" @click="handleDebug">调试</el-button>
        </el-button-group>
      </basic-container>
      <basic-container>
        <avue-form ref="form" :option="regionOption" v-model="regionForm" @submit="handleSubmit">
          <template slot="code" slot-scope="{}">
            <el-input placeholder="请输入 区划子编号" v-model="regionForm.subCode">
              <template slot="prepend">{{regionForm.parentCode}}</template>
            </el-input>
          </template>
        </avue-form>
        <el-dialog title="行政区划数据导入"
                   append-to-body
                   :visible.sync="excelBox"
                   width="555px">
          <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
            <template slot="excelTemplate">
              <el-button type="primary" @click="handleTemplate">
                点击下载<i class="el-icon-download el-icon--right"></i>
              </el-button>
            </template>
          </avue-form>
        </el-dialog>
        <el-dialog title="行政区划数据调试"
                   append-to-body
                   :visible.sync="debugBox"
                   width="350px">
          <avue-form :option="debugOption" v-model="debugForm"/>
        </el-dialog>
      </basic-container>
    </el-col>
  </el-row>
    <el-row>
        <el-col :span="9">
            <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="15">
            <basic-container>
                <el-button-group>
                    <el-button
                        v-if="permission.region_add"
                        type="primary"
                        size="small"
                        icon="el-icon-circle-plus-outline"
                        @click="addChildren"
                    >新增下级</el-button>
                    <el-button
                        v-if="permission.region_delete"
                        type="primary"
                        size="small"
                        icon="el-icon-delete"
                        @click="handleDelete"
                    >删除</el-button>
                    <el-button
                        v-if="permission.region_import"
                        type="primary"
                        size="small"
                        icon="el-icon-upload2"
                        @click="handleImport"
                    >导入</el-button>
                    <el-button
                        v-if="permission.region_export"
                        type="primary"
                        size="small"
                        icon="el-icon-download"
                        @click="handleExport"
                    >导出</el-button>
                    <el-button
                        v-if="permission.region_debug"
                        type="primary"
                        size="small"
                        icon="el-icon-video-play"
                        @click="handleDebug"
                    >调试</el-button>
                </el-button-group>
            </basic-container>
            <basic-container>
                <avue-form
                    ref="form"
                    :option="regionOption"
                    v-model="regionForm"
                    @submit="handleSubmit"
                >
                    <template slot="code" slot-scope="{}">
                        <el-input placeholder="请输入 区划子编号" v-model="regionForm.subCode">
                            <template slot="prepend">{{regionForm.parentCode}}</template>
                        </el-input>
                    </template>
                </avue-form>
                <el-dialog title="行政区划数据导入" append-to-body :visible.sync="excelBox" width="555px">
                    <avue-form
                        :option="excelOption"
                        v-model="excelForm"
                        :upload-after="uploadAfter"
                    >
                        <template slot="excelTemplate">
                            <el-button type="primary" @click="handleTemplate">
                                点击下载
                                <i class="el-icon-download el-icon--right"></i>
                            </el-button>
                        </template>
                    </avue-form>
                </el-dialog>
                <el-dialog title="行政区划数据调试" append-to-body :visible.sync="debugBox" width="350px">
                    <avue-form :option="debugOption" v-model="debugForm" />
                </el-dialog>
            </basic-container>
        </el-col>
    </el-row>
</template>

<script>
  import {getLazyTree, getDetail, submit, remove} from "@/api/base/region";
  import {exportBlob} from "@/api/common";
  import {mapGetters} from "vuex";
  import {validatenull} from "@/util/validate";
  import {downloadXls} from "@/util/util";
  import {dateNow} from "@/util/date";
  import {getToken} from "@/util/auth";
  import NProgress from 'nprogress';
  import 'nprogress/nprogress.css';
import { getLazyTree, getDetail, submit, remove } from "@/api/base/region"
import { exportBlob } from "@/api/common"
import { mapGetters } from "vuex"
import { validatenull } from "@/util/validate"
import { downloadXls } from "@/util/util"
import { dateNow } from "@/util/date"
import { getToken } from "@/util/auth"
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

  export default {
    data() {
      return {
        topCode: '00',
        treeCode: '',
        treeParentCode: '',
        treeData: [],
        treeOption: {
          nodeKey: 'id',
          lazy: true,
          treeLoad: function (node, resolve) {
            const parentCode = (node.level === 0) ? "00" : node.data.id;
            getLazyTree(parentCode).then(res => {
              resolve(res.data.data.map(item => {
                return {
                  ...item,
                  leaf: !item.hasChildren
                }
              }))
            });
          },
          addBtn: false,
          menu: false,
          size: 'small',
          props: {
            labelText: '标题',
            label: 'title',
            value: 'value',
            children: 'children'
          }
        },
        regionForm: {},
        regionOption: {
          labelWidth: 100,
          column: [
            {
              label: "父区划编号",
              prop: "parentCode",
              span: 24,
              disabled: true,
              rules: [{
                required: true,
                message: "请输入父区划编号",
                trigger: "blur"
              }]
            },
            {
              label: "父区划名称",
              prop: "parentName",
              span: 24,
              disabled: true,
            },
            {
              label: "区划编号",
              prop: "code",
              formslot: true,
              span: 24,
              rules: [{
                required: true,
                message: "请输入区划编号",
                trigger: "blur"
              }]
            },
            {
              label: "区划子编号",
              prop: "subCode",
              display: false,
            },
            {
              label: "区划名称",
              prop: "name",
              span: 24,
              rules: [{
                required: true,
                message: "请输入区划名称",
                trigger: "blur"
              }]
            },
            {
              label: "区划等级",
              prop: "regionLevel",
              type: "radio",
              dicUrl: "/api/blade-system/dict/dictionary?code=region",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              span: 24,
              rules: [{
                required: true,
                message: "请选择区划等级",
                trigger: "blur"
              }]
            },
            {
              label: "区划排序",
              prop: "sort",
              type: "number",
              span: 24,
              rules: [{
                required: true,
                message: "请输入区划排序",
                trigger: "blur"
              }]
            },
            {
              label: "区划备注",
              prop: "remark",
              type: "textarea",
              minRows: 6,
              span: 24,
            },
          ]
        },
        excelBox: false,
        excelForm: {},
        excelOption: {
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: '模板上传',
              prop: 'excelFile',
              type: 'upload',
              drag: true,
              loadText: '模板上传中，请稍等',
              span: 24,
              propsHttp: {
                res: 'data'
              },
              tip: '请上传 .xls,.xlsx 标准格式文件',
              action: "/api/blade-system/region/import-region"
            },
            {
              label: "数据覆盖",
              prop: "isCovered",
              type: "switch",
              align: "center",
              width: 80,
              dicData: [
                {
                  label: "否",
                  value: 0
export default {
    data () {
        return {
            topCode: '00',
            treeCode: '',
            treeParentCode: '',
            treeData: [],
            treeOption: {
                nodeKey: 'id',
                lazy: true,
                treeLoad: function (node, resolve) {
                    const parentCode = (node.level === 0) ? "00" : node.data.id
                    getLazyTree(parentCode).then(res => {
                        resolve(res.data.data.map(item => {
                            return {
                                ...item,
                                leaf: !item.hasChildren
                            }
                        }))
                    })
                },
                {
                  label: "是",
                  value: 1
                addBtn: false,
                menu: false,
                size: 'small',
                props: {
                    labelText: '标题',
                    label: 'title',
                    value: 'value',
                    children: 'children'
                }
              ],
              value: 0,
              slot: true,
              rules: [
                {
                  required: true,
                  message: "请选择是否覆盖",
                  trigger: "blur"
                }
              ]
            },
            {
              label: '模板下载',
              prop: 'excelTemplate',
              formslot: true,
              span: 24,
            regionForm: {},
            regionOption: {
                labelWidth: 100,
                column: [
                    {
                        label: "父区划编号",
                        prop: "parentCode",
                        span: 24,
                        disabled: true,
                        rules: [{
                            required: true,
                            message: "请输入父区划编号",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "父区划名称",
                        prop: "parentName",
                        span: 24,
                        disabled: true,
                    },
                    {
                        label: "区划编号",
                        prop: "code",
                        formslot: true,
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入区划编号",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "区划子编号",
                        prop: "subCode",
                        display: false,
                    },
                    {
                        label: "区划名称",
                        prop: "name",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入区划名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "区划等级",
                        prop: "regionLevel",
                        type: "radio",
                        dicUrl: "/api/blade-system/dict/dictionary?code=region",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dataType: "number",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请选择区划等级",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "区划排序",
                        prop: "sort",
                        type: "number",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入区划排序",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "区划备注",
                        prop: "remark",
                        type: "textarea",
                        minRows: 6,
                        span: 24,
                    },
                ]
            },
            excelBox: false,
            excelForm: {},
            excelOption: {
                submitBtn: false,
                emptyBtn: false,
                column: [
                    {
                        label: '模板上传',
                        prop: 'excelFile',
                        type: 'upload',
                        drag: true,
                        loadText: '模板上传中，请稍等',
                        span: 24,
                        propsHttp: {
                            res: 'data'
                        },
                        tip: '请上传 .xls,.xlsx 标准格式文件',
                        action: "/api/blade-system/region/import-region"
                    },
                    {
                        label: "数据覆盖",
                        prop: "isCovered",
                        type: "switch",
                        align: "center",
                        width: 80,
                        dicData: [
                            {
                                label: "否",
                                value: 0
                            },
                            {
                                label: "是",
                                value: 1
                            }
                        ],
                        value: 0,
                        slot: true,
                        rules: [
                            {
                                required: true,
                                message: "请选择是否覆盖",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: '模板下载',
                        prop: 'excelTemplate',
                        formslot: true,
                        span: 24,
                    }
                ]
            },
            debugBox: false,
            debugForm: {},
            debugOption: {
                labelWidth: 50,
                submitBtn: false,
                emptyBtn: false,
                column: [
                    {
                        label: '省份',
                        prop: 'province',
                        type: 'select',
                        props: {
                            label: 'name',
                            value: 'code'
                        },
                        cascader: ['city'],
                        dicUrl: '/api/blade-system/region/select',
                        span: 24,
                    },
                    {
                        label: '地市',
                        prop: 'city',
                        type: 'select',
                        props: {
                            label: 'name',
                            value: 'code'
                        },
                        cascader: ['district'],
                        dicFlag: false,
                        dicUrl: '/api/blade-system/region/select?code={{province}}',
                        span: 24,
                    },
                    {
                        label: '区县',
                        prop: 'district',
                        type: 'select',
                        props: {
                            label: 'name',
                            value: 'code'
                        },
                        dicFlag: false,
                        dicUrl: '/api/blade-system/region/select?code={{city}}',
                        span: 24,
                    }
                ]
            }
          ]
        },
        debugBox: false,
        debugForm: {},
        debugOption: {
          labelWidth: 50,
          submitBtn: false,
          emptyBtn: false,
          column: [
            {
              label: '省份',
              prop: 'province',
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              cascader: ['city'],
              dicUrl: '/api/blade-system/region/select',
              span: 24,
            },
            {
              label: '地市',
              prop: 'city',
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              cascader: ['district'],
              dicFlag: false,
              dicUrl: '/api/blade-system/region/select?code={{province}}',
              span: 24,
            },
            {
              label: '区县',
              prop: 'district',
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              dicFlag: false,
              dicUrl: '/api/blade-system/region/select?code={{city}}',
              span: 24,
            }
          ]
        }
      };
    },
    watch: {
      'regionForm.subCode'() {
        this.regionForm.code = this.regionForm.parentCode + this.regionForm.subCode;
      },
      'excelForm.isCovered'() {
        if (this.excelForm.isCovered !== '') {
          const column = this.findObject(this.excelOption.column, "excelFile");
          column.action = `/api/blade-system/region/import-region?isCovered=${this.excelForm.isCovered}`;
        'regionForm.subCode' () {
            this.regionForm.code = this.regionForm.parentCode + this.regionForm.subCode
        },
        'excelForm.isCovered' () {
            if (this.excelForm.isCovered !== '') {
                const column = this.findObject(this.excelOption.column, "excelFile")
                column.action = `/api/blade-system/region/import-region?isCovered=${this.excelForm.isCovered}`
            }
        }
      }
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.region_add, false),
          viewBtn: this.vaildData(this.permission.region_view, false),
          delBtn: this.vaildData(this.permission.region_delete, false),
          editBtn: this.vaildData(this.permission.region_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.region_add, false),
                viewBtn: this.vaildData(this.permission.region_view, false),
                delBtn: this.vaildData(this.permission.region_delete, false),
                editBtn: this.vaildData(this.permission.region_edit, false)
            }
        },
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        }
    },
    methods: {
      initTree() {
        this.treeData = [];
        getLazyTree(this.topCode).then(res => {
          this.treeData = res.data.data.map(item => {
            return {
              ...item,
              leaf: !item.hasChildren
        initTree () {
            this.treeData = []
            getLazyTree(this.topCode).then(res => {
                this.treeData = res.data.data.map(item => {
                    return {
                        ...item,
                        leaf: !item.hasChildren
                    }
                })
            })
        },
        nodeClick (data) {
            const column = this.findObject(this.regionOption.column, "parentCode")
            column.disabled = true
            this.treeCode = data.id
            this.treeParentCode = data.parentId
            getDetail(this.treeCode).then(res => {
                this.regionForm = res.data.data
                this.regionForm.subCode = this.regionForm.code.replace(this.regionForm.parentCode, '')
            })
        },
        addChildren () {
            if (validatenull(this.regionForm.code) || validatenull(this.regionForm.name)) {
                this.$message.warning("请先选择一项区划")
                return
            }
          })
        });
      },
      nodeClick(data) {
        const column = this.findObject(this.regionOption.column, "parentCode");
        column.disabled = true;
        this.treeCode = data.id;
        this.treeParentCode = data.parentId;
        getDetail(this.treeCode).then(res => {
          this.regionForm = res.data.data;
          this.regionForm.subCode = this.regionForm.code.replace(this.regionForm.parentCode, '');
        })
      },
      addChildren() {
        if (validatenull(this.regionForm.code) || validatenull(this.regionForm.name)) {
          this.$message.warning("请先选择一项区划");
          return;
        }
        this.regionForm.parentCode = this.regionForm.code;
        this.regionForm.parentName = this.regionForm.name;
        this.regionForm.code = '';
        this.regionForm.subCode = '';
        this.regionForm.name = '';
        this.regionForm.regionLevel = (this.regionForm.regionLevel === 5) ? 5 : this.regionForm.regionLevel + 1;
      },
      handleSubmit(form, done, loading) {
        const parentCode = form.parentCode === this.topCode ? '' : form.parentCode;
        form.code = parentCode + form.subCode;
        submit(form).then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.initTree();
          this.regionForm.subCode = '';
          this.$refs.form.resetForm();
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
      },
      handleDelete() {
        if (validatenull(this.regionForm.code)) {
          this.$message.warning("请先选择一项区划");
          return;
        }
        this.$confirm(`确定将 [${this.regionForm.name}] 数据删除?`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(this.treeCode);
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.initTree();
            this.regionForm.subCode = '';
            this.$refs.form.resetForm();
          });
      },
      uploadAfter(res, done, loading, column) {
        window.console.log(column);
        this.excelBox = false;
        this.initTree();
        done();
      },
      handleDebug() {
        this.debugBox = true;
      },
      handleImport() {
        this.excelBox = true;
      },
      handleExport() {
        this.$confirm("是否导出行政区划数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          NProgress.start();
          exportBlob(`/api/blade-system/region/export-region?${this.website.tokenHeader}=${getToken()}`).then(res => {
            downloadXls(res.data, `行政区划数据${dateNow()}.xlsx`);
            NProgress.done();
          })
        });
      },
      handleTemplate() {
        exportBlob(`/api/blade-system/region/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
          downloadXls(res.data, "行政区划模板.xlsx");
        })
      },
            this.regionForm.parentCode = this.regionForm.code
            this.regionForm.parentName = this.regionForm.name
            this.regionForm.code = ''
            this.regionForm.subCode = ''
            this.regionForm.name = ''
            this.regionForm.regionLevel = (this.regionForm.regionLevel === 5) ? 5 : this.regionForm.regionLevel + 1
        },
        handleSubmit (form, done, loading) {
            const parentCode = form.parentCode === this.topCode ? '' : form.parentCode
            form.code = parentCode + form.subCode
            submit(form).then(() => {
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                this.initTree()
                this.regionForm.subCode = ''
                this.$refs.form.resetForm()
                done()
            }, error => {
                loading()
                window.console.log(error)
            })
        },
        handleDelete () {
            if (validatenull(this.regionForm.code)) {
                this.$message.warning("请先选择一项区划")
                return
            }
            this.$confirm(`确定将 [${this.regionForm.name}] 数据删除?`, {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(this.treeCode)
                })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.initTree()
                    this.regionForm.subCode = ''
                    this.$refs.form.resetForm()
                })
        },
        uploadAfter (res, done, loading, column) {
            window.console.log(column)
            this.excelBox = false
            this.initTree()
            done()
        },
        handleDebug () {
            this.debugBox = true
        },
        handleImport () {
            this.excelBox = true
        },
        handleExport () {
            this.$confirm("是否导出行政区划数据?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                NProgress.start()
                exportBlob(`/api/blade-system/region/export-region?${this.website.tokenHeader}=${getToken()}`).then(res => {
                    downloadXls(res.data, `行政区划数据${dateNow()}.xlsx`)
                    NProgress.done()
                })
            })
        },
        handleTemplate () {
            exportBlob(`/api/blade-system/region/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
                downloadXls(res.data, "行政区划模板.xlsx")
            })
        },
    }
  };
};
</script>

<style>
  .box {
.box {
    height: 800px;
  }
}

  .el-scrollbar {
.el-scrollbar {
    height: 100%;
  }
}

  .box .el-scrollbar__wrap {
.box .el-scrollbar__wrap {
    overflow: scroll;
  }
}
</style>

 src/views/desk/notice.vue

@@ -1,293 +1,295 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               ref="crud"
               @row-del="rowDel"
               v-model="form"
               :permission="permissionList"
               @row-update="rowUpdate"
               @row-save="rowSave"
               :before-open="beforeOpen"
               @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.notice_delete"
                   @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="{row}"
                slot="category">
        <el-tag>{{row.categoryName}}</el-tag>
      </template>
    </avue-crud>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            :page.sync="page"
            ref="crud"
            @row-del="rowDel"
            v-model="form"
            :permission="permissionList"
            @row-update="rowUpdate"
            @row-save="rowSave"
            :before-open="beforeOpen"
            @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.notice_delete"
                    @click="handleDelete"
                >删 除</el-button>
            </template>
            <template slot-scope="{row}" slot="category">
                <el-tag>{{row.categoryName}}</el-tag>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
  import {getList, remove, update, add, getNotice} from "@/api/desk/notice";
  import {mapGetters} from "vuex";
import { getList, remove, update, add, getNotice } from "@/api/desk/notice"
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,
          dialogWidth: 950,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          excelBtn: true,
          dialogClickModal: false,
          column: [
            {
              label: "通知标题",
              prop: "title",
              span: 24,
              row: true,
              search: true,
              rules: [{
                required: true,
                message: "请输入通知标题",
                trigger: "blur"
              }]
export default {
    data () {
        return {
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            {
              label: "通知类型",
              type: "select",
              dicUrl: "/api/blade-system/dict/dictionary?code=notice",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              slot: true,
              prop: "category",
              search: true,
              rules: [{
                required: true,
                message: "请输入通知类型",
                trigger: "blur"
              }]
            selectionList: [],
            option: {
                height: 'auto',
                calcHeight: 30,
                dialogWidth: 950,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                selection: true,
                excelBtn: true,
                dialogClickModal: false,
                column: [
                    {
                        label: "通知标题",
                        prop: "title",
                        span: 24,
                        row: true,
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入通知标题",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "通知类型",
                        type: "select",
                        dicUrl: "/api/blade-system/dict/dictionary?code=notice",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dataType: "number",
                        slot: true,
                        prop: "category",
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入通知类型",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "通知时间",
                        prop: "releaseTimeRange",
                        type: "datetime",
                        format: "yyyy-MM-dd hh:mm:ss",
                        valueFormat: "yyyy-MM-dd hh:mm:ss",
                        searchRange: true,
                        hide: true,
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入通知时间",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "通知日期",
                        prop: "releaseTime",
                        type: "date",
                        format: "yyyy-MM-dd hh:mm:ss",
                        valueFormat: "yyyy-MM-dd hh:mm:ss",
                        rules: [{
                            required: true,
                            message: "请输入通知日期",
                            trigger: "click"
                        }]
                    },
                    {
                        label: "通知内容",
                        prop: "content",
                        component: 'AvueUeditor',
                        options: {
                            action: '/api/blade-resource/oss/endpoint/put-file',
                            props: {
                                res: "data",
                                url: "link",
                            }
                        },
                        hide: true,
                        minRows: 6,
                        span: 24,
                    }
                ]
            },
            {
              label: "通知时间",
              prop: "releaseTimeRange",
              type: "datetime",
              format: "yyyy-MM-dd hh:mm:ss",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
              searchRange:true,
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              search: true,
              rules: [{
                required: true,
                message: "请输入通知时间",
                trigger: "blur"
              }]
            },
            {
              label: "通知日期",
              prop: "releaseTime",
              type: "date",
              format: "yyyy-MM-dd hh:mm:ss",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
              rules: [{
                required: true,
                message: "请输入通知日期",
                trigger: "click"
              }]
            },
            {
              label: "通知内容",
              prop: "content",
              component: 'AvueUeditor',
              options: {
                action: '/api/blade-resource/oss/endpoint/put-file',
                props: {
                  res: "data",
                  url: "link",
                }
              },
              hide: true,
              minRows: 6,
              span: 24,
            }
          ]
        },
        data: []
      };
            data: []
        }
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.notice_add, false),
          viewBtn: this.vaildData(this.permission.notice_view, false),
          delBtn: this.vaildData(this.permission.notice_delete, false),
          editBtn: this.vaildData(this.permission.notice_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.notice_add, false),
                viewBtn: this.vaildData(this.permission.notice_view, false),
                delBtn: this.vaildData(this.permission.notice_delete, false),
                editBtn: this.vaildData(this.permission.notice_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 => {
          window.console.log(error);
          loading();
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          window.console.log(error);
          loading();
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      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();
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        rowSave (row, done, loading) {
            add(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowUpdate (row, index, done, loading) {
            update(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                window.console.log(error)
                loading()
            })
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                })
        },
        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()
        },
        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)) {
                getNotice(this.form.id).then(res => {
                    this.form = res.data.data
                })
            }
            done()
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            const { releaseTimeRange } = this.query
            let values = {
                ...params,
                ...this.query
            }
            if (releaseTimeRange) {
                values = {
                    ...values,
                    releaseTime_datege: releaseTimeRange[0],
                    releaseTime_datelt: releaseTimeRange[1],
                }
                values.releaseTimeRange = null
            }
            this.loading = true
            getList(page.currentPage, page.pageSize, values).then(res => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
        }
        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)) {
          getNotice(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        const {releaseTimeRange} = this.query;
        let values = {
          ...params,
          ...this.query
        };
        if (releaseTimeRange) {
          values = {
            ...values,
            releaseTime_datege: releaseTimeRange[0],
            releaseTime_datelt: releaseTimeRange[1],
          };
          values.releaseTimeRange = null;
        }
        this.loading = true;
        getList(page.currentPage, page.pageSize, values).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
};
</script>

<style>

 src/views/farm/farm.vue

@@ -1,458 +1,449 @@
<template>
  <basic-container>
    <avue-crud
      class="tablesss"
      :before-open="beforeOpen"
      :option="option"
      :data="data"
      :page.sync="page"
      v-model="form"
      ref="crud"
      :permission="permissionList"
      @on-load="onLoad"
      :table-loading="loading"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="searchReset"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @selection-change="selectionChange"
      @refresh-change="refreshChange"
      @change="change"
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          plain
          icon="el-icon-delete"
          v-if="permission.farm_delete"
          @click="handleDelete"
        >删 除
        </el-button>
      </template>
      <!-- 地图插入 -->
      <template slot-scope="{ type, disabled }" slot="lineForm">
        <getMapDataInThere
          ref="getMapData"
          id="getMapData"
          @setMapData="setMapData"
        ></getMapDataInThere>
      </template>
      <template slot-scope="{ type, size, row }" slot="menu">
        <el-button
          icon="el-icon-view"
          type="text"
          size="mini"
          @click="goToFarmDetail(row)"
          :size="size"
        >查看
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
    <basic-container>
        <avue-crud
            class="tablesss"
            :before-open="beforeOpen"
            :option="option"
            :data="data"
            :page.sync="page"
            v-model="form"
            ref="crud"
            :permission="permissionList"
            @on-load="onLoad"
            :table-loading="loading"
            @row-save="rowSave"
            @search-change="searchChange"
            @search-reset="searchReset"
            @row-update="rowUpdate"
            @row-del="rowDel"
            @selection-change="selectionChange"
            @refresh-change="refreshChange"
            @change="change"
        >
            <template slot="menuLeft">
                <el-button
                    type="danger"
                    size="small"
                    plain
                    icon="el-icon-delete"
                    v-if="permission.farm_delete"
                    @click="handleDelete"
                >删 除</el-button>
            </template>
            <!-- 地图插入 -->
            <template slot-scope="{ type, disabled }" slot="lineForm">
                <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
            </template>
            <template slot-scope="{ type, size, row }" slot="menu">
                <el-button
                    icon="el-icon-view"
                    type="text"
                    size="mini"
                    @click="goToFarmDetail(row)"
                >查看</el-button>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import getMapDataInThere from "./getMapDataInThere.vue";
import getMapDataInThere from "./getMapDataInThere.vue"

import { getList,add,update, remove,getDetails } from "@/api/farm/farm";
import { mapGetters } from "vuex";
import { getList, add, update, remove, getDetails } from "@/api/farm/farm"
import { mapGetters } from "vuex"

export default {
  components: {
    getMapDataInThere
  },
  data() {
    return {
      loading: true,
      selectionList: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      form: {},
      query: {},
      data: [],
      option: {
        index: true,
        tip: false,
        addBtn: true,
        searchMenuSpan: 6,
        height: 583,
        menuWidth: 300,
        border: true,
        viewBtn:false,
        align: "center",
        selection: true,
        column: [
          {
            label: "农场名称",
            search: true,
            prop: "farmName",
            labelWidth: 145,
            rules: [{
              required: true,
              message: "请输入农场名称",
              trigger: "blur"
            }]
          },
          {
            label: '省份',
            prop: 'province',
            type: 'select',
            hide: true,
            labelWidth: 145,
            row:true,
            defaultIndex:2,
            props: {
              label: 'name',
              value: 'code'
            },
            cascader: ['city'],
            dicUrl: '/api/blade-system/region/select',
            rules: [{
              required: true,
              message: "请选择省份",
              trigger: "blur"
            }],
          },
          {
            label: '地市',
            prop: 'city',
            type: 'select',
            hide: true,
            labelWidth: 145,
            props: {
              label: 'name',
              value: 'code'
            },
            cascader: ['district'],
            dicFlag: false,
            dicUrl: '/api/blade-system/region/select?code={{province}}',
          },
          {
            label: '区县',
            prop: 'district',
            type: 'select',
            hide: true,
            labelWidth: 145,
            props: {
              label: 'name',
              value: 'code'
            },
            dicFlag: false,
            dicUrl: '/api/blade-system/region/select?code={{city}}',
          },
          {
            label: "农场地址",
            prop: "farmAddress",
            rules: [{
              required: true,
              message: "请输入农场地址",
              trigger: "blur"
            }],
            labelWidth: 145,
            overHidden:true,
          },
          {
            label: "农场面积",
            prop: "farmArea",
            labelWidth: 145,
            rules: [{
              required: true,
              message: "请输入农场面积",
              trigger: "blur"
            }],
          },
          {
            label: "口号",
            prop: "slogan",
            labelWidth: 145,
            rules: [{
              required: true,
              message: "请输入农场口号",
              trigger: "blur"
            }],
          },
          {
            label:"360全景地址",
            prop:"panoramic",
            labelWidth:145,
            hide:true,
            rules:[{
              required:false,
              message:"请输入地址",
              trigger:"blur"
            }]
          },
          {
            label: "介绍",
            prop: "introduce",
            type:"textarea",
            span: 24,
            labelWidth: 145,
            rules: [{
              required: true,
              message: "请输入农场介绍",
              trigger: "blur"
            }],
            overHidden:true
          },
          {
            label: "农场环境图片",
            prop: "picture",
            type: "upload",
            labelWidth: 145,
            dataType: "string",
            span: 24,
            limit: 5,
            listType: "picture-card",
            tip: "建议上传手机横屏拍摄的照片，宽高比16:9，最多上传5张",
            canvasOption: {
              text: "",
              ratio: 1.0,
            },
            propsHttp: {
              res: "data",
              url: "url"
            },
            action: "/api/blade-resource/oss/endpoint/put-files"
          },
          {
            label: "路线展示",
            labelWidth: 145,
            prop: "line",
            className: "mapClass",
            hide: true,
            display: true,
            span: 24,
            formslot: true,
            addDisplay: true
          }
        ],
      }
    };
  },
  created() {
    // this.getRailLazyTree();
  },
  computed: {
    ...mapGetters(["userInfo", "permission", "polygonsFarm"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.farm_delete, false),
        viewBtn: this.vaildData(this.permission.farm_delete, false),
        delBtn: this.vaildData(this.permission.farm_delete, false),
        editBtn: this.vaildData(this.permission.farm_delete, false)
      };
    components: {
        getMapDataInThere
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  mounted() {
  },
  methods: {
    rowSave(row, done, loading) {
      row['tenantId'] = this.userInfo.tenant_id;
      row['deptId'] = this.userInfo.dept_id;
      if (this.polygonsFarm.length == 0) {
        //没有面的数据
        this.$refs.getMapData.isCheck = true;
        loading();
      } else {
        //如果有值，空间坐标转换
        let pol = this.polygonsFarm;
        let polLength = this.polygonsFarm.length - 1;
        let usePolygons = "";
        for (let k in pol) {
          usePolygons += pol[k].lng + "," + pol[k].lat;
          if (k != polLength) {
            usePolygons += ";";
          }
        }
        //设置坐标点
        row.position = usePolygons;
      }
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      if (this.polygonsFarm.length == 0) {
        //没有面的数据
        this.$refs.getMapData.isCheck = true;
        loading();
      } else {
        //如果有值，空间坐标转换
        let pol = this.polygonsFarm;
        let polLength = this.polygonsFarm.length - 1;
        let usePolygons = "";
        for (let k in pol) {
          usePolygons += pol[k].lng + "," + pol[k].lat;
          if (k != polLength) {
            usePolygons += ";";
          }
        }
        //设置坐标点
        row.position = usePolygons;
      }
      // 修改
      update(row).then((res) => {
        if (res.data.success) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.refreshChange();
          done();
        } else {
          this.$message({
            message: "操作失败",
            type: "warning",
          });
          done();
        }
      });
    },
    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) {
      //先清空面的数据
      this.$store.commit('clear_polygonsFarm');
      if (["edit", "view"].includes(type)) {
        getDetails(this.form.id).then((res) => {
          if (res.data.code == 200) {
            this.form = res.data.data;
            let usePolygons = this.form.position
              .split("POLYGON((")[1]
              .split("))")[0]
              .split(",");
            for (let k in usePolygons) {
              usePolygons[k] = {
                lng: +usePolygons[k].split(" ")[0],
                lat: +usePolygons[k].split(" ")[1],
              };
    data () {
        return {
            loading: true,
            selectionList: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            form: {},
            query: {},
            data: [],
            option: {
                index: true,
                tip: false,
                addBtn: true,
                searchMenuSpan: 6,
                height: 583,
                menuWidth: 300,
                border: true,
                viewBtn: false,
                align: "center",
                selection: true,
                column: [
                    {
                        label: "农场名称",
                        search: true,
                        prop: "farmName",
                        labelWidth: 145,
                        rules: [{
                            required: true,
                            message: "请输入农场名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '省份',
                        prop: 'province',
                        type: 'select',
                        hide: true,
                        labelWidth: 145,
                        row: true,
                        defaultIndex: 2,
                        props: {
                            label: 'name',
                            value: 'code'
                        },
                        cascader: ['city'],
                        dicUrl: '/api/blade-system/region/select',
                        rules: [{
                            required: true,
                            message: "请选择省份",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: '地市',
                        prop: 'city',
                        type: 'select',
                        hide: true,
                        labelWidth: 145,
                        props: {
                            label: 'name',
                            value: 'code'
                        },
                        cascader: ['district'],
                        dicFlag: false,
                        dicUrl: '/api/blade-system/region/select?code={{province}}',
                    },
                    {
                        label: '区县',
                        prop: 'district',
                        type: 'select',
                        hide: true,
                        labelWidth: 145,
                        props: {
                            label: 'name',
                            value: 'code'
                        },
                        dicFlag: false,
                        dicUrl: '/api/blade-system/region/select?code={{city}}',
                    },
                    {
                        label: "农场地址",
                        prop: "farmAddress",
                        rules: [{
                            required: true,
                            message: "请输入农场地址",
                            trigger: "blur"
                        }],
                        labelWidth: 145,
                        overHidden: true,
                    },
                    {
                        label: "农场面积",
                        prop: "farmArea",
                        labelWidth: 145,
                        rules: [{
                            required: true,
                            message: "请输入农场面积",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: "口号",
                        prop: "slogan",
                        labelWidth: 145,
                        rules: [{
                            required: true,
                            message: "请输入农场口号",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: "360全景地址",
                        prop: "panoramic",
                        labelWidth: 145,
                        hide: true,
                        rules: [{
                            required: false,
                            message: "请输入地址",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "介绍",
                        prop: "introduce",
                        type: "textarea",
                        span: 24,
                        labelWidth: 145,
                        rules: [{
                            required: true,
                            message: "请输入农场介绍",
                            trigger: "blur"
                        }],
                        overHidden: true
                    },
                    {
                        label: "农场环境图片",
                        prop: "picture",
                        type: "upload",
                        labelWidth: 145,
                        dataType: "string",
                        span: 24,
                        limit: 5,
                        listType: "picture-card",
                        tip: "建议上传手机横屏拍摄的照片，宽高比16:9，最多上传5张",
                        canvasOption: {
                            text: "",
                            ratio: 1.0,
                        },
                        propsHttp: {
                            res: "data",
                            url: "url"
                        },
                        action: "/api/blade-resource/oss/endpoint/put-files"
                    },
                    {
                        label: "路线展示",
                        labelWidth: 145,
                        prop: "line",
                        className: "mapClass",
                        hide: true,
                        display: true,
                        span: 24,
                        formslot: true,
                        addDisplay: true
                    }
                ],
            }
            this.$refs.getMapData.draw(usePolygons);
          }
        });
      }
      done();
        }
    },
    //查看农场详情
    goToFarmDetail(row) {
      this.$router.push({
        path: `/farm/farmInfoDetail`,
        query: row
      });
    created () {
        // this.getRailLazyTree();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    computed: {
        ...mapGetters(["userInfo", "permission", "polygonsFarm"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.farm_delete, false),
                viewBtn: this.vaildData(this.permission.farm_delete, false),
                delBtn: this.vaildData(this.permission.farm_delete, false),
                editBtn: this.vaildData(this.permission.farm_delete, false)
            }
        },
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        }
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    mounted () {
    },
    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();
      });
    methods: {
        rowSave (row, done, loading) {
            row['tenantId'] = this.userInfo.tenant_id
            row['deptId'] = this.userInfo.dept_id
            if (this.polygonsFarm.length == 0) {
                //没有面的数据
                this.$refs.getMapData.isCheck = true
                loading()
            } else {
                //如果有值，空间坐标转换
                let pol = this.polygonsFarm
                let polLength = this.polygonsFarm.length - 1
                let usePolygons = ""
                for (let k in pol) {
                    usePolygons += pol[k].lng + "," + pol[k].lat
                    if (k != polLength) {
                        usePolygons += ";"
                    }
                }
                //设置坐标点
                row.position = usePolygons
            }
            add(row).then(() => {
                this.onLoad(this.page)
                this.$message({
                    type: "success",
                    message: "操作成功!"
                })
                done()
            }, error => {
                loading()
                window.console.log(error)
            })
        },
        rowUpdate (row, index, done, loading) {
            if (this.polygonsFarm.length == 0) {
                //没有面的数据
                this.$refs.getMapData.isCheck = true
                loading()
            } else {
                //如果有值，空间坐标转换
                let pol = this.polygonsFarm
                let polLength = this.polygonsFarm.length - 1
                let usePolygons = ""
                for (let k in pol) {
                    usePolygons += pol[k].lng + "," + pol[k].lat
                    if (k != polLength) {
                        usePolygons += ";"
                    }
                }
                //设置坐标点
                row.position = usePolygons
            }
            // 修改
            update(row).then((res) => {
                if (res.data.success) {
                    this.$message({
                        message: "操作成功",
                        type: "success",
                    })
                    this.refreshChange()
                    done()
                } else {
                    this.$message({
                        message: "操作失败",
                        type: "warning",
                    })
                    done()
                }
            })
        },
        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) {
            //先清空面的数据
            this.$store.commit('clear_polygonsFarm')
            if (["edit", "view"].includes(type)) {
                getDetails(this.form.id).then((res) => {
                    if (res.data.code == 200) {
                        this.form = res.data.data
                        let usePolygons = this.form.position
                            .split("POLYGON((")[1]
                            .split("))")[0]
                            .split(",")
                        for (let k in usePolygons) {
                            usePolygons[k] = {
                                lng: +usePolygons[k].split(" ")[0],
                                lat: +usePolygons[k].split(" ")[1],
                            }
                        }
                        this.$refs.getMapData.draw(usePolygons)
                    }
                })
            }
            done()
        },
        //查看农场详情
        goToFarmDetail (row) {
            this.$router.push({
                path: `/farm/farmInfoDetail`,
                query: row
            })
        },
        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 lang="scss">

.mapClass div label {
  display: none;
    display: none;
}

.mapClassMain {
  padding-left: 5rem !important;
    padding-left: 5rem !important;
}


#getMapData {
  width: calc(100% + 90px);
  position: relative;
  left: -90px;
  height: 400px;
    width: calc(100% + 90px);
    position: relative;
    left: -90px;
    height: 400px;
}
</style>

 src/views/farm/farmInfoDetail.vue

@@ -1,291 +1,282 @@
<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 基本信息 -->
      <el-tab-pane label="基本信息" name="tab1">
        <basic-container>
          <avue-form
            ref="form"
            v-model="objBase"
            :option="optionBase"
            @submit="submitBase"
          >
            <!-- 地图插入 -->
            <template slot-scope="{}" slot="position">
              <getMapDataInThere
                ref="getMapData"
                id="getMapData"
                @setMapData="setMapData"
              ></getMapDataInThere>
            </template>
          </avue-form>
        </basic-container>
      </el-tab-pane>
      <!-- 检测报告信息 -->
      <el-tab-pane label="检测报告信息" name="tab2">
        <farmReport
        :farmId="farmId"
        ></farmReport>
      </el-tab-pane>
      <!-- 认证证书信息 -->
      <el-tab-pane label="认证证书信息" name="tab3">
        <farmPaper
        :farmId="farmId"
        ></farmPaper>
      </el-tab-pane>
        <!-- 基本信息 -->
        <el-tab-pane label="基本信息" name="tab1">
            <basic-container>
                <avue-form ref="form" v-model="objBase" :option="optionBase" @submit="submitBase">
                    <!-- 地图插入 -->
                    <template slot-scope="{}" slot="position">
                        <getMapDataInThere
                            ref="getMapData"
                            id="getMapData"
                            @setMapData="setMapData"
                        ></getMapDataInThere>
                    </template>
                </avue-form>
            </basic-container>
        </el-tab-pane>
        <!-- 检测报告信息 -->
        <el-tab-pane label="检测报告信息" name="tab2">
            <farmReport :farmId="farmId"></farmReport>
        </el-tab-pane>
        <!-- 认证证书信息 -->
        <el-tab-pane label="认证证书信息" name="tab3">
            <farmPaper :farmId="farmId"></farmPaper>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import getMapDataInThere from "./getMapDataInThere.vue";
import farmPaper from "./farmPaper.vue";
import farmReport from "./farmReport.vue";
import { update, getDetails } from "@/api/farm/farm";
import { mapGetters } from "vuex";
import getMapDataInThere from "./getMapDataInThere.vue"
import farmPaper from "./farmPaper.vue"
import farmReport from "./farmReport.vue"
import { update, getDetails } from "@/api/farm/farm"
import { mapGetters } from "vuex"

export default {
  components: {
    getMapDataInThere,
    farmPaper,
    farmReport
  },
  data() {
    return {
      farmId:"",
      activeName: "tab1",
      objBase: {},
      optionBase: {
        emptyBtn: false,
        submitText: "保存",
        gutter: 30,
        group: [
          {
            icon: "",
            label: "农场基本信息",
            collapse: true,
            prop: "group1",
            column: [
              {
                label: "",
                labelWidth: 20,
                type: "title",
                prop: "title",
                span: 24,
                styles: {
                  fontSize: "24px",
                },
              },
              {
                label: "农场名称",
                prop: "farmName",
                span: 12,
                labelWidth: 145,
                rules: [
                  {
                    required: true,
                    message: "请输入农场名称",
                    trigger: "blur",
                  },
    components: {
        getMapDataInThere,
        farmPaper,
        farmReport
    },
    data () {
        return {
            farmId: "",
            activeName: "tab1",
            objBase: {},
            optionBase: {
                emptyBtn: false,
                submitText: "保存",
                gutter: 30,
                group: [
                    {
                        icon: "",
                        label: "农场基本信息",
                        collapse: true,
                        prop: "group1",
                        column: [
                            {
                                label: "",
                                labelWidth: 20,
                                type: "title",
                                prop: "title",
                                span: 24,
                                styles: {
                                    fontSize: "24px",
                                },
                            },
                            {
                                label: "农场名称",
                                prop: "farmName",
                                span: 12,
                                labelWidth: 145,
                                rules: [
                                    {
                                        required: true,
                                        message: "请输入农场名称",
                                        trigger: "blur",
                                    },
                                ],
                            },
                            {
                                label: "农场地址",
                                prop: "farmAddress",
                                span: 12,
                                labelWidth: 145,
                                width: 110,
                                rules: [
                                    {
                                        required: true,
                                        message: "请输入农场地址",
                                        trigger: "click",
                                    },
                                ],
                            },
                            {
                                label: "农场面积",
                                prop: "farmArea",
                                span: 12,
                                labelWidth: 145,
                                width: 110,
                                rules: [
                                    {
                                        required: true,
                                        message: "请输入农场面积",
                                        trigger: "click",
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        icon: "",
                        label: "农场介绍",
                        prop: "group2",
                        column: [
                            {
                                label: "口号",
                                prop: "slogan",
                                span: 12,
                                labelWidth: 145,
                                rules: [
                                    {
                                        required: true,
                                        message: "请输入口号",
                                        trigger: "blur",
                                    },
                                ],
                            },
                            {
                                label: "介绍",
                                type: "textarea",
                                prop: "introduce",
                                span: 24,
                                labelWidth: 145,
                                rules: [
                                    {
                                        required: true,
                                        message: "请输入介绍",
                                        trigger: "blur",
                                    },
                                ],
                            },
                            {
                                label: "农场环境图片",
                                prop: "picture",
                                type: "upload",
                                labelWidth: 145,
                                dataType: "string",
                                span: 24,
                                limit: 5,
                                listType: "picture-card",
                                tip: "建议上传手机横屏拍摄的照片，宽高比16:9，最多上传5张",
                                canvasOption: {
                                    text: "",
                                    ratio: 1.0,
                                },
                                propsHttp: {
                                    res: "data",
                                    url: "url"
                                },
                                action: "/api/blade-resource/oss/endpoint/put-files"
                            },
                            {
                                label: "农场位置",
                                prop: "position",
                                className: "mapClass",
                                span: 24,
                                formslot: true,
                                labelWidth: 145,
                            },
                        ],
                    },
                ],
              },
              {
                label: "农场地址",
                prop: "farmAddress",
                span: 12,
                labelWidth: 145,
                width: 110,
                rules: [
                  {
                    required: true,
                    message: "请输入农场地址",
                    trigger: "click",
                  },
                ],
              },
              {
                label: "农场面积",
                prop: "farmArea",
                span: 12,
                labelWidth: 145,
                width: 110,
                rules: [
                  {
                    required: true,
                    message: "请输入农场面积",
                    trigger: "click",
                  },
                ],
              },
            ],
          },
          {
            icon: "",
            label: "农场介绍",
            prop: "group2",
            column: [
              {
                label: "口号",
                prop: "slogan",
                span: 12,
                labelWidth: 145,
                rules: [
                  {
                    required: true,
                    message: "请输入口号",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "介绍",
                type: "textarea",
                prop: "introduce",
                span: 24,
                labelWidth: 145,
                rules: [
                  {
                    required: true,
                    message: "请输入介绍",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "农场环境图片",
                prop: "picture",
                type: "upload",
                labelWidth: 145,
                dataType: "string",
                span: 24,
                limit: 5,
                listType: "picture-card",
                tip: "建议上传手机横屏拍摄的照片，宽高比16:9，最多上传5张",
                canvasOption: {
                  text: "",
                  ratio: 1.0,
                },
                propsHttp: {
                  res: "data",
                  url: "url"
                },
                action: "/api/blade-resource/oss/endpoint/put-files"
              },
              {
                label: "农场位置",
                prop: "position",
                className: "mapClass",
                span: 24,
                formslot: true,
                labelWidth: 145,
              },
            ],
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo", "permission", "polygonsFarm"]),
  },
  created(){
      this.farmId = this.$route.query.id;
  },
  mounted() {
    var flag = false,
            },
        }
    },
    computed: {
        ...mapGetters(["userInfo", "permission", "polygonsFarm"]),
    },
    created () {
        this.farmId = this.$route.query.id
    },
    mounted () {
        var flag = false,
            i = 0,
            ind = null;
    this.$store.state.tags.tagList.forEach((item, index) => {
        if (item.label == "农场详情信息") {
            if (flag == false) {
                ind = index;
                flag = true;
            ind = null
        this.$store.state.tags.tagList.forEach((item, index) => {
            if (item.label == "农场详情信息") {
                if (flag == false) {
                    ind = index
                    flag = true
                }
                i++
            }
            i++;
        })
        if (i > 1) {
            this.$store.state.tags.tagList.splice(ind, 1)
        }
    });
    if (i > 1) {
        this.$store.state.tags.tagList.splice(ind, 1);
    }
    var that = this;
    //先清空面的数据
    this.$store.commit('clear_polygonsFarm');
    this.$nextTick(() => {
      getDetails(this.$route.query.id).then((res) => {
        if (res.data.code == 200) {
          that.objBase = res.data.data;
          that.farmId = that.objBase.id;
          let usePolygons = that.objBase.position
            .split("POLYGON((")[1]
            .split("))")[0]
            .split(",");
          for (let k in usePolygons) {
            usePolygons[k] = {
              lng: +usePolygons[k].split(" ")[0],
              lat: +usePolygons[k].split(" ")[1],
            };
          }
          this.$refs.getMapData.draw(usePolygons);
        }
      });
    });
  },
  methods: {
    //农场基本信息提交
    submitBase(form, loading, done) {
      if (this.polygonsFarm.length == 0) {
        //没有面的数据
        this.$refs.getMapData.isCheck = true;
        loading();
      } else {
        //如果有值，空间坐标转换
        let pol = this.polygonsFarm;
        let polLength = this.polygonsFarm.length - 1;
        let usePolygons = "";
        for (let k in pol) {
          usePolygons += pol[k].lng + "," + pol[k].lat;
          if (k != polLength) {
            usePolygons += ";";
          }
        }
        //设置坐标点
        form.position = usePolygons;
      }
      // 修改
      update(form).then((res) => {
        if (res.data.success) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.refreshChange();
          done();
        } else {
          this.$message({
            message: "操作失败",
            type: "warning",
          });
          done();
        }
      });
        var that = this
        //先清空面的数据
        this.$store.commit('clear_polygonsFarm')
        this.$nextTick(() => {
            getDetails(this.$route.query.id).then((res) => {
                if (res.data.code == 200) {
                    that.objBase = res.data.data
                    that.farmId = that.objBase.id
                    let usePolygons = that.objBase.position
                        .split("POLYGON((")[1]
                        .split("))")[0]
                        .split(",")
                    for (let k in usePolygons) {
                        usePolygons[k] = {
                            lng: +usePolygons[k].split(" ")[0],
                            lat: +usePolygons[k].split(" ")[1],
                        }
                    }
                    this.$refs.getMapData.draw(usePolygons)
                }
            })
        })
    },
    setMapData(val) {
      this.LineData = val[0];
      this.PointData = val[1];
    methods: {
        //农场基本信息提交
        submitBase (form, loading, done) {
            if (this.polygonsFarm.length == 0) {
                //没有面的数据
                this.$refs.getMapData.isCheck = true
                loading()
            } else {
                //如果有值，空间坐标转换
                let pol = this.polygonsFarm
                let polLength = this.polygonsFarm.length - 1
                let usePolygons = ""
                for (let k in pol) {
                    usePolygons += pol[k].lng + "," + pol[k].lat
                    if (k != polLength) {
                        usePolygons += ";"
                    }
                }
                //设置坐标点
                form.position = usePolygons
            }
            // 修改
            update(form).then((res) => {
                if (res.data.success) {
                    this.$message({
                        message: "操作成功",
                        type: "success",
                    })
                    this.refreshChange()
                    done()
                } else {
                    this.$message({
                        message: "操作失败",
                        type: "warning",
                    })
                    done()
                }
            })
        },
        setMapData (val) {
            this.LineData = val[0]
            this.PointData = val[1]
        },
    },
  },
  watch: {},
    watch: {},
};
</script>

<style lang="scss" scoped>
.mapClass div label {
  display: none;
    display: none;
}

#getMapData {
  width: 80%;
  position: relative;
  height: 500px;
  top: 10px;
    width: 80%;
    position: relative;
    height: 500px;
    top: 10px;
}

// .el-collapse-item {

 src/views/farm/farmPaper.vue

@@ -1,285 +1,284 @@
<template>
  <basic-container class="paper">
    <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
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
    <basic-container class="paper">
        <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
                    @click="handleDelete"
                >删 除</el-button>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import { getDetail, getList, update, remove, save } from "@/api/farm/farmPaper";
import { mapGetters } from "vuex";
import { getDetail, getList, update, remove, save } from "@/api/farm/farmPaper"
import { mapGetters } from "vuex"
export default {
  props: ["farmId"],
  data() {
    return {
      visible: true,
      form: {},
      query: {},
      loading: true,
      excelBox: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        tip: false,
        searchSize: "mini",
        searchMenuSpan: 8,
        height: "auto",
        editBtn: true,
        delBtn: true,
        viewBtn: true,
        menuWidth: 200,
        menuAlign: "center",
        align: "center",
        selection: true,
        column: [
          {
            label: "证书名称",
            prop: "name",
            rules: [
              {
                required: true,
                message: "请输入证书名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "颁证机构",
            prop: "organName",
            rules: [
              {
                required: true,
                message: "请输入颁证机构",
                trigger: "blur",
              },
            ],
          },
          {
            label: "证书编号",
            prop: "code",
            rules: [
              {
                required: true,
                message: "请输入证书编号",
                trigger: "blur",
              },
            ],
          },
          {
            label: "颁证日期",
            prop: "time",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [
              {
                required: true,
                message: "请选择颁证日期",
                trigger: "blur",
              },
            ],
          },
          {
            label: "证书图片",
            prop: "pictures",
            type: "upload",
            dataType: "string",
            span: 24,
            limit: 3,
            listType: "picture-card",
            tip: "只能上传jpg/png文件,最多上传3张",
            propsHttp: {
              res: "data",
              url: "url"
    props: ["farmId"],
    data () {
        return {
            visible: true,
            form: {},
            query: {},
            loading: true,
            excelBox: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            action: "/api/blade-resource/oss/endpoint/put-files"
          },
        ],
      },
      data: [],
    };
  },
  created() {},
  computed: {
    ...mapGetters(["permission", "userInfo"]),
    // permissionList() {
    //   return {
    //     addBtn: this.vaildData(this.permission.social_add, true),
    //     viewBtn: this.vaildData(this.permission.social_view, false),
    //     delBtn: this.vaildData(this.permission.social_delete, false),
    //     editBtn: this.vaildData(this.permission.social_edit, false),
    //   };
    // },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  mounted() {},
  methods: {
    //新增
    rowSave(row, done, loading) {
      row["farmId"] = this.farmId;
      row["type"] = 2;
      save(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
            selectionList: [],
            option: {
                tip: false,
                searchSize: "mini",
                searchMenuSpan: 8,
                height: "auto",
                editBtn: true,
                delBtn: true,
                viewBtn: true,
                menuWidth: 200,
                menuAlign: "center",
                align: "center",
                selection: true,
                column: [
                    {
                        label: "证书名称",
                        prop: "name",
                        rules: [
                            {
                                required: true,
                                message: "请输入证书名称",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "颁证机构",
                        prop: "organName",
                        rules: [
                            {
                                required: true,
                                message: "请输入颁证机构",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "证书编号",
                        prop: "code",
                        rules: [
                            {
                                required: true,
                                message: "请输入证书编号",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "颁证日期",
                        prop: "time",
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        rules: [
                            {
                                required: true,
                                message: "请选择颁证日期",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "证书图片",
                        prop: "pictures",
                        type: "upload",
                        dataType: "string",
                        span: 24,
                        limit: 3,
                        listType: "picture-card",
                        tip: "只能上传jpg/png文件,最多上传3张",
                        propsHttp: {
                            res: "data",
                            url: "url"
                        },
                        action: "/api/blade-resource/oss/endpoint/put-files"
                    },
                ],
            },
            data: [],
        }
      );
    },
    //修改
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    created () { },
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        // permissionList() {
        //   return {
        //     addBtn: this.vaildData(this.permission.social_add, true),
        //     viewBtn: this.vaildData(this.permission.social_view, false),
        //     delBtn: this.vaildData(this.permission.social_delete, false),
        //     editBtn: this.vaildData(this.permission.social_edit, false),
        //   };
        // },
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
        (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: "操作成功!",
          });
        });
    mounted () { },
    methods: {
        //新增
        rowSave (row, done, loading) {
            row["farmId"] = this.farmId
            row["type"] = 2
            save(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 = {}) {
            params['type'] = 2
            params['farmId'] = this.farmId
            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()
            })
        },
    },
    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 = {}) {
      params['type'] = 2;
      params['farmId'] = this.farmId;
      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>


 src/views/farm/farmReport.vue

@@ -1,285 +1,284 @@
<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
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
    <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
                    @click="handleDelete"
                >删 除</el-button>
            </template>
        </avue-crud>
    </basic-container>
</template>
 
<script>
import { getDetail, getList, update, remove, save } from "@/api/farm/farmPaper";
import { mapGetters } from "vuex";
import { getDetail, getList, update, remove, save } from "@/api/farm/farmPaper"
import { mapGetters } from "vuex"
export default {
  props: ["farmId"],
  data() {
    return {
      visible: true,
      form: {},
      query: {},
      loading: true,
      excelBox: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        tip: false,
        searchSize: "mini",
        searchMenuSpan: 8,
        height: "auto",
        editBtn: true,
        delBtn: true,
        viewBtn: true,
        menuWidth: 200,
        menuAlign: "center",
        align: "center",
        selection: true,
        column: [
          {
            label: "检测项目",
            prop: "name",
            rules: [
              {
                required: true,
                message: "请输入检测项目",
                trigger: "blur",
              },
            ],
          },
          {
            label: "检测机构",
            prop: "organName",
            rules: [
              {
                required: true,
                message: "请输入检测机构",
                trigger: "blur",
              },
            ],
          },
          {
            label: "报告编号",
            prop: "code",
            rules: [
              {
                required: true,
                message: "请输入报告编号",
                trigger: "blur",
              },
            ],
          },
          {
            label: "颁发日期",
            prop: "time",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [
              {
                required: true,
                message: "请选择颁发日期",
                trigger: "blur",
              },
            ],
          },
          {
            label: "报告图片",
            prop: "pictures",
            type: "upload",
            dataType: "string",
            span: 24,
            limit: 3,
            listType: "picture-card",
            tip: "只能上传jpg/png文件,最多上传3张",
            propsHttp: {
              res: "data",
              url: "url"
    props: ["farmId"],
    data () {
        return {
            visible: true,
            form: {},
            query: {},
            loading: true,
            excelBox: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            action: "/api/blade-resource/oss/endpoint/put-files"
          },
        ],
      },
      data: [],
    };
  },
  created() {},
  computed: {
    ...mapGetters(["permission", "userInfo"]),
    // permissionList() {
    //   return {
    //     addBtn: this.vaildData(this.permission.social_add, true),
    //     viewBtn: this.vaildData(this.permission.social_view, false),
    //     delBtn: this.vaildData(this.permission.social_delete, false),
    //     editBtn: this.vaildData(this.permission.social_edit, false),
    //   };
    // },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  mounted() {},
  methods: {
    //新增
    rowSave(row, done, loading) {
      row["farmId"] = this.farmId;
      row["type"] = 1;
      save(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
            selectionList: [],
            option: {
                tip: false,
                searchSize: "mini",
                searchMenuSpan: 8,
                height: "auto",
                editBtn: true,
                delBtn: true,
                viewBtn: true,
                menuWidth: 200,
                menuAlign: "center",
                align: "center",
                selection: true,
                column: [
                    {
                        label: "检测项目",
                        prop: "name",
                        rules: [
                            {
                                required: true,
                                message: "请输入检测项目",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "检测机构",
                        prop: "organName",
                        rules: [
                            {
                                required: true,
                                message: "请输入检测机构",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "报告编号",
                        prop: "code",
                        rules: [
                            {
                                required: true,
                                message: "请输入报告编号",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "颁发日期",
                        prop: "time",
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        rules: [
                            {
                                required: true,
                                message: "请选择颁发日期",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "报告图片",
                        prop: "pictures",
                        type: "upload",
                        dataType: "string",
                        span: 24,
                        limit: 3,
                        listType: "picture-card",
                        tip: "只能上传jpg/png文件,最多上传3张",
                        propsHttp: {
                            res: "data",
                            url: "url"
                        },
                        action: "/api/blade-resource/oss/endpoint/put-files"
                    },
                ],
            },
            data: [],
        }
      );
    },
    //修改
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    created () { },
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        // permissionList() {
        //   return {
        //     addBtn: this.vaildData(this.permission.social_add, true),
        //     viewBtn: this.vaildData(this.permission.social_view, false),
        //     delBtn: this.vaildData(this.permission.social_delete, false),
        //     editBtn: this.vaildData(this.permission.social_edit, false),
        //   };
        // },
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
        (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: "操作成功!",
          });
        });
    mounted () { },
    methods: {
        //新增
        rowSave (row, done, loading) {
            row["farmId"] = this.farmId
            row["type"] = 1
            save(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
            params['type'] = 1
            params['farmId'] = this.farmId
            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()
            })
        },
    },
    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;
      params['type'] = 1;
      params['farmId'] = this.farmId;
      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>
 

 src/views/farm/farmingrecord.vue

@@ -1,450 +1,449 @@
<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
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
    <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
                    @click="handleDelete"
                >删 除</el-button>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import {
  getDetail,
  getList,
  update,
  remove,
  save,
} from "@/api/farm/farmingrecord";
import { getLandList } from "@/api/land/land";
import { getUserList } from "@/api/system/user";
import { selectStockFa } from "@/api/stockfactory/stockfactory";
import { mapGetters } from "vuex";
    getDetail,
    getList,
    update,
    remove,
    save,
} from "@/api/farm/farmingrecord"
import { getLandList } from "@/api/land/land"
import { getUserList } from "@/api/system/user"
import { selectStockFa } from "@/api/stockfactory/stockfactory"
import { mapGetters } from "vuex"
export default {
  data() {
    return {
      visible: true,
      form: {},
      query: {},
      loading: true,
      excelBox: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      landId:0,
      landList: [],
      option: {
        tip: false,
        height: 520,
        editBtn: true,
        delBtn: true,
        viewBtn: true,
        menuWidth: 200,
        menuAlign: "center",
        align: "center",
        selection: true,
        searchShow: true,
        searchMenuSpan: 6,
        indexFixed: false,
        selectionFixed: false,
        expandFixed: false,
        menuFixed: false,
        column: [
          {
            label: "农事类型",
            prop: "type",
            type: "select",
            search: true,
            searchSpan: 4,
            labelWidth: 110,
            searchValue:this.getType(),
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=farmingType",
            props: {
              label: "dictValue",
              value: "dictKey",
    data () {
        return {
            visible: true,
            form: {},
            query: {},
            loading: true,
            excelBox: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            rules: [
              {
                required: true,
                message: "请选择农事类型",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属地块",
            prop: "landId",
            searchSpan: 4,
            search: true,
            type: "tree",
            hide: true,
            dicData: [],
            props: {
              label: "landName",
              value: "id",
            selectionList: [],
            landId: 0,
            landList: [],
            option: {
                tip: false,
                height: 520,
                editBtn: true,
                delBtn: true,
                viewBtn: true,
                menuWidth: 200,
                menuAlign: "center",
                align: "center",
                selection: true,
                searchShow: true,
                searchMenuSpan: 6,
                indexFixed: false,
                selectionFixed: false,
                expandFixed: false,
                menuFixed: false,
                column: [
                    {
                        label: "农事类型",
                        prop: "type",
                        type: "select",
                        search: true,
                        searchSpan: 4,
                        labelWidth: 110,
                        searchValue: this.getType(),
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=farmingType",
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        rules: [
                            {
                                required: true,
                                message: "请选择农事类型",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "所属地块",
                        prop: "landId",
                        searchSpan: 4,
                        search: true,
                        type: "tree",
                        hide: true,
                        dicData: [],
                        props: {
                            label: "landName",
                            value: "id",
                        },
                        change: (val) => {
                            this.landId = val.value
                        },
                        labelWidth: 110,
                        rules: [
                            {
                                required: true,
                                message: "请选择所属地块",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "所属地块",
                        prop: "landName",
                        display: false,
                    },
                    {
                        label: "农资",
                        prop: "stockId",
                        type: "tree",
                        // hide:true,
                        dicData: [],
                        props: {
                            label: "dictValue",
                            value: "dictKey",
                        },
                        labelWidth: 110,
                        rules: [
                            {
                                required: true,
                                message: "请选择农资",
                                trigger: "blur",
                            },
                        ],
                        display: false,
                    },
                    {
                        label: "作业方式",
                        prop: "jobWay",
                        labelWidth: 110,
                        type: "select",
                        dicData: [
                            {
                                label: "人工",
                                value: "0",
                            },
                            {
                                label: "机械",
                                value: "1",
                            },
                        ],
                        rules: [
                            {
                                required: true,
                                message: "请输入作业方式",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "农事操作时间",
                        prop: "time",
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        labelWidth: 110,
                        rules: [
                            {
                                required: true,
                                message: "请选择农事操作时间",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "操作人",
                        prop: "operator",
                        type: "tree",
                        hide: true,
                        dicData: [],
                        props: {
                            label: "realName",
                            value: "id",
                        },
                        labelWidth: 110,
                        rules: [
                            {
                                required: false,
                                message: "请选择操作人",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "农事照片",
                        prop: "tp",
                        type: "upload",
                        labelWidth: 110,
                        dataType: "string",
                        span: 24,
                        limit: 5,
                        listType: "picture-card",
                        tip: "建议上传手机横屏拍摄的照片，宽高比16:9，最多上传5张",
                        canvasOption: {
                            text: "",
                            ratio: 1.0,
                        },
                        propsHttp: {
                            res: "data",
                            url: "url"
                        },
                        action: "/api/blade-resource/oss/endpoint/put-files"
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        type: "textarea",
                        span: 24,
                        labelWidth: 110,
                        hide: true,
                        rules: [
                            {
                                required: false,
                                message: "请输入备注",
                                trigger: "blur",
                            },
                        ],
                    },
                ],
            },
            change: (val) => {
              this.landId = val.value
            },
            labelWidth: 110,
            rules: [
              {
                required: true,
                message: "请选择所属地块",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属地块",
            prop: "landName",
            display: false,
          },
          {
            label: "农资",
            prop: "stockId",
            type: "tree",
            // hide:true,
            dicData: [],
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            labelWidth: 110,
            rules: [
              {
                required: true,
                message: "请选择农资",
                trigger: "blur",
              },
            ],
            display: false,
          },
          {
            label: "作业方式",
            prop: "jobWay",
            labelWidth: 110,
            type: "select",
            dicData: [
              {
                label: "人工",
                value: "0",
              },
              {
                label: "机械",
                value: "1",
              },
            ],
            rules: [
              {
                required: true,
                message: "请输入作业方式",
                trigger: "blur",
              },
            ],
          },
          {
            label: "农事操作时间",
            prop: "time",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            labelWidth: 110,
            rules: [
              {
                required: true,
                message: "请选择农事操作时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "操作人",
            prop: "operator",
            type: "tree",
            hide: true,
            dicData: [],
            props: {
              label: "realName",
              value: "id",
            },
            labelWidth: 110,
            rules: [
              {
                required: false,
                message: "请选择操作人",
                trigger: "blur",
              },
            ],
          },
          {
            label: "农事照片",
            prop: "tp",
            type: "upload",
            labelWidth: 110,
            dataType: "string",
            span: 24,
            limit: 5,
            listType: "picture-card",
            tip: "建议上传手机横屏拍摄的照片，宽高比16:9，最多上传5张",
            canvasOption: {
              text: "",
              ratio: 1.0,
            },
            propsHttp: {
              res: "data",
              url: "url"
            },
            action: "/api/blade-resource/oss/endpoint/put-files"
          },
          {
            label: "备注",
            prop: "remarks",
            type: "textarea",
            span: 24,
            labelWidth: 110,
            hide: true,
            rules: [
              {
                required: false,
                message: "请输入备注",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [],
    };
  },
  watch: {
    "form.type": {
      handler(val) {
        var stockIdcolumn = this.findObject(this.option.column, "stockId");
        if (val === "0" || val == 4 || val == 5 || val == 8 || val == 9) {
          stockIdcolumn.display = true;
        } else {
          stockIdcolumn.display = false;
            data: [],
        }
      },
      immediate: true,
    }
  },
  created() {
    this.initData();
  },
  computed: {
    ...mapGetters(["permission", "userInfo"]),
    // permissionList() {
    //   return {
    //     addBtn: this.vaildData(this.permission.social_add, true),
    //     viewBtn: this.vaildData(this.permission.social_view, false),
    //     delBtn: this.vaildData(this.permission.social_delete, false),
    //     editBtn: this.vaildData(this.permission.social_edit, false),
    //   };
    // },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  mounted() {
  },
  methods: {
    getType(){
      return this.type;
    watch: {
        "form.type": {
            handler (val) {
                var stockIdcolumn = this.findObject(this.option.column, "stockId")
                if (val === "0" || val == 4 || val == 5 || val == 8 || val == 9) {
                    stockIdcolumn.display = true
                } else {
                    stockIdcolumn.display = false
                }
            },
            immediate: true,
        }
    },
    //初始化数据
    initData() {
      var that = this;
      //获取农地数据
      getLandList(this.userInfo.dept_id).then((res) => {
        if (res.data.code == 200) {
          var landIdcolumn = that.findObject(that.option.column, "landId");
          that.landList = res.data.data;
          landIdcolumn.dicData = res.data.data;
        }
      });
      //获取操作人
      const user = {
        tenantId: this.userInfo.tenant_id,
      };
      getUserList(user).then((res) => {
        if (res.data.code == 200) {
          var operatorcolumn = that.findObject(that.option.column, "operator");
          operatorcolumn.dicData = res.data.data;
        }
      });
      //获取农资
      selectStockFa().then((res) => {
        if (res.data.code == 200) {
          var stockIdcolumn = that.findObject(that.option.column, "stockId");
          stockIdcolumn.dicData = res.data.data;
        }
      });
    created () {
        this.initData()
    },
    //新增
    rowSave(row, done, loading) {
      save(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        // permissionList() {
        //   return {
        //     addBtn: this.vaildData(this.permission.social_add, true),
        //     viewBtn: this.vaildData(this.permission.social_view, false),
        //     delBtn: this.vaildData(this.permission.social_delete, false),
        //     editBtn: this.vaildData(this.permission.social_edit, false),
        //   };
        // },
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    //修改
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    mounted () {
    },
    methods: {
        getType () {
            return this.type
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
        //初始化数据
        initData () {
            var that = this
            //获取农地数据
            getLandList(this.userInfo.dept_id).then((res) => {
                if (res.data.code == 200) {
                    var landIdcolumn = that.findObject(that.option.column, "landId")
                    that.landList = res.data.data
                    landIdcolumn.dicData = res.data.data
                }
            })
            //获取操作人
            const user = {
                tenantId: this.userInfo.tenant_id,
            }
            getUserList(user).then((res) => {
                if (res.data.code == 200) {
                    var operatorcolumn = that.findObject(that.option.column, "operator")
                    operatorcolumn.dicData = res.data.data
                }
            })
            //获取农资
            selectStockFa().then((res) => {
                if (res.data.code == 200) {
                    var stockIdcolumn = that.findObject(that.option.column, "stockId")
                    stockIdcolumn.dicData = res.data.data
                }
            })
        },
        //新增
        rowSave (row, done, loading) {
            save(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
            var datas = this.$route.query.id
            params.landId = datas
            params['tenantId'] = this.userInfo.tenant_id
            params['deptId'] = this.userInfo.dept_id
            if (this.landId) {
                params['landId'] = this.landId
            }
            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()
            })
        },
    },
    //删除
    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;
      var datas = this.$route.query.id;
      params.landId=datas;
      params['tenantId'] = this.userInfo.tenant_id;
      params['deptId'] = this.userInfo.dept_id;
      if (this.landId) {
        params['landId'] = this.landId
      }
      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>


 src/views/farm/getMapDataInThere.vue

@@ -1,337 +1,332 @@
<template>
  <div class="getMapData" :key="Refresh">
    <MapInThere ref="getMapDataRefs" />
    <div class="notDatas" v-show="isCheck">
      <div style="color: red">*</div>
      未绘画区域
    <div class="getMapData" :key="Refresh">
        <MapInThere ref="getMapDataRefs" />
        <div class="notDatas" v-show="isCheck">
            <div style="color: red">*</div>未绘画区域
        </div>
        <div class="controlMapWindowTitle">
            <el-button-group>
                <el-button type="primary" icon="el-icon-finished" @click="drawFace">绘画区域</el-button>
                <el-button type="danger" @click="giveUp" icon="el-icon-close">取消</el-button>
            </el-button-group>
        </div>
    </div>
    <div class="controlMapWindowTitle">
      <el-button-group>
        <el-button type="primary" icon="el-icon-finished" @click="drawFace"
          >绘画区域</el-button
        >
        <el-button type="danger" @click="giveUp" icon="el-icon-close"
          >取消</el-button
        >
      </el-button-group>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MapInThere from "@/components/map/mainFarm.vue";
import { mapGetters } from "vuex"
import MapInThere from "@/components/map/mainFarm.vue"
export default {
  name: "getMapData",
  components: {
    MapInThere,
  },
  computed: {
    ...mapGetters(["rotesData", "pointData", "polygonsFarm"]),
  },
  watch: {
    ourDatas: {
      handler(val) {
        this.checkDom("getMapDataRefs", (dom) => {
          dom.onceOnlodad(val);
        });
      },
      deep: true,
    name: "getMapData",
    components: {
        MapInThere,
    },
    polygons() {
      if (this.polygonsFarm.length > 0) {
        this.isCheck = false;
      }
    computed: {
        ...mapGetters(["rotesData", "pointData", "polygonsFarm"]),
    },
  },
  data() {
    return {
      Refresh: false,
      //动画效果
      animateName: "custom-classes-transition",
      animateEnter: "animated fadeIn",
      animateLeave: "animated fadeOut",
      openTitle: "路径1",
      MapDataShow: false,
      fromView: false,
      ourDatas: [],
      nowId: 0,
      isCheck: false,
    };
  },
  mounted() {
   
  },
  methods: {
    draw(usePolygons) {
      this.$store.commit("setpolygonsFarm", usePolygons); //用vuex传最终数据
      this.doThat(usePolygons)
    },
    doThat(val) {
      this.checkDom("getMapDataRefs", (dom) => {
          dom.addLines(val);
          // 移动位置
          dom.move(val);
      });
    },
    drawFace() {
      this.$refs.getMapDataRefs.drawStart();
    },
    giveUp() {
      this.$refs.getMapDataRefs.closeDraw();
    },
    openDrawLineMethod() {
      let id = this.nowId++;
      this.ourDatas.push({
        label: "路径" + +id,
        value: "",
        name: "",
        notPath: false,
        isLine: true,
        id: +id,
      });
    },
    openDrawPointMethod() {
      let id = this.nowId++;
      this.ourDatas.push({
        label: "标点" + +id,
        value: "",
        name: "",
        notPath: false,
        isLine: false,
        id: +id,
      });
    },
    deleteRowOurs(index) {
      this.ourDatas.splice(index, 1);
    },
    backMapDataOurData(val, index) {
      if (val == "line") {
        this.ourDatas[index].value = this.rotesData;
      } else if (val == "point") {
        this.ourDatas[index].value = this.pointData;
      } else if (val == "notData") {
        this.ourDatas[index].value = "";
      }
      //单个验证
      this.myRules(index);
    },
    //以上是添加数据集方法
    //选择map数据
    openMap(val, num, value) {
      this.MapDataShow = true;
      this.openTitle = val;
      this.$refs.getMapDataRefs.init(val, num, value);
    },
    closeOpenedMap() {
      this.MapDataShow = false;
      // this.openTitle = "";
    },
    //下面是旧代码
    editInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
    },
    viewInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
      this.fromView = true; //查看数据不可改
    },
    reverseMapData(val, label) {
      //解释数据
      let rname = val[0][0].split(";"),
        r = val[0][1].split(";"),
        pname = val[1][0].split(";"),
        p = val[1][1].split(";");
      this.ourDatas = [];
      for (let k in r) {
        this.ourDatas.push({
          label: "路径" + (+k + 1),
          value: r[k],
          name: rname[k],
          notPath: false,
          isLine: true,
          id: this.ourDatas.length,
        });
      }
      for (let k in p) {
        let potion = p[k].split(",");
        this.ourDatas.push({
          label: "标点" + (+k + 1),
          value: [+potion[0], +potion[1]],
          name: pname[k],
          notPath: false,
          isLine: false,
          id: this.ourDatas.length,
        });
      }
      this.nowId = +this.ourDatas.length + 1;
    },
    myRules(index) {
      //单个验证
      if (this.ourDatas[index].name && this.ourDatas[index].value) {
        this.ourDatas[index].notPath = false;
      } else {
        this.ourDatas[index].notPath = 2;
      }
    },
    //自定义验证
    myRulesUse() {
      //把一个数组拆开两个来对应之前的数据
      let ourData = this.ourDatas;
      let lineBefor = [];
      let pointBefor = [];
      for (let o in ourData) {
        if (ourData[o].isLine) {
          lineBefor.push(ourData[o]);
        } else {
          pointBefor.push(ourData[o]);
        }
      }
      let line = this.changeMapData(lineBefor, "name");
      let point = this.changeMapData(pointBefor, "name");
      if (line[0] == "namenot" || point[0] == "namenot") {
        //需要显示验证失败合集
        let errorId = [];
        if (line[0] == "namenot") {
          errorId.push(...line[1]);
        }
        if (point[0] == "namenot") {
          errorId.push(...point[1]);
        }
        for (let x in this.ourDatas) {
          let flog = true;
          for (let k in errorId) {
            if (errorId[k] == this.ourDatas[x].id) {
              flog = false;
    watch: {
        ourDatas: {
            handler (val) {
                this.checkDom("getMapDataRefs", (dom) => {
                    dom.onceOnlodad(val)
                })
            },
            deep: true,
        },
        polygons () {
            if (this.polygonsFarm.length > 0) {
                this.isCheck = false
            }
          }
          if (flog) {
            this.ourDatas[x].notPath = false;
          } else {
            this.ourDatas[x].notPath = 2;
          }
        }
        return false;
      } else {
        for (let i in this.ourDatas) {
          this.ourDatas[i].notPath = false;
        }
        return [line, point];
      }
        },
    },
    //规则
    changeMapData(item, names) {
      let name = "",
        value = "",
        notData = [];
      let itemLength = item.length - 1;
      for (let k in item) {
        let inItem = item[k];
        for (let kin in inItem) {
          if (
            inItem[kin] == "" &&
            kin != "notPath" &&
            kin != "isLine" &&
            kin != "id"
          ) {
            notData.push(inItem.id);
            break;
          }
          if (kin == names) {
            name += inItem[kin];
            if (k != itemLength) {
              name += ";";
    data () {
        return {
            Refresh: false,
            //动画效果
            animateName: "custom-classes-transition",
            animateEnter: "animated fadeIn",
            animateLeave: "animated fadeOut",
            openTitle: "路径1",
            MapDataShow: false,
            fromView: false,
            ourDatas: [],
            nowId: 0,
            isCheck: false,
        }
    },
    mounted () {

    },
    methods: {
        draw (usePolygons) {
            this.$store.commit("setpolygonsFarm", usePolygons) //用vuex传最终数据
            this.doThat(usePolygons)
        },
        doThat (val) {
            this.checkDom("getMapDataRefs", (dom) => {
                dom.addLines(val)
                // 移动位置
                dom.move(val)
            })
        },
        drawFace () {
            this.$refs.getMapDataRefs.drawStart()
        },
        giveUp () {
            this.$refs.getMapDataRefs.closeDraw()
        },
        openDrawLineMethod () {
            let id = this.nowId++
            this.ourDatas.push({
                label: "路径" + +id,
                value: "",
                name: "",
                notPath: false,
                isLine: true,
                id: +id,
            })
        },
        openDrawPointMethod () {
            let id = this.nowId++
            this.ourDatas.push({
                label: "标点" + +id,
                value: "",
                name: "",
                notPath: false,
                isLine: false,
                id: +id,
            })
        },
        deleteRowOurs (index) {
            this.ourDatas.splice(index, 1)
        },
        backMapDataOurData (val, index) {
            if (val == "line") {
                this.ourDatas[index].value = this.rotesData
            } else if (val == "point") {
                this.ourDatas[index].value = this.pointData
            } else if (val == "notData") {
                this.ourDatas[index].value = ""
            }
          }
          if (kin == "value") {
            value += inItem[kin];
            if (k != itemLength) {
              value += ";";
            //单个验证
            this.myRules(index)
        },
        //以上是添加数据集方法
        //选择map数据
        openMap (val, num, value) {
            this.MapDataShow = true
            this.openTitle = val
            this.$refs.getMapDataRefs.init(val, num, value)
        },
        closeOpenedMap () {
            this.MapDataShow = false
            // this.openTitle = "";
        },
        //下面是旧代码
        editInit (val) {
            //查看情况逆转String成为当页可使用数据,并做动作
            this.reverseMapData(val)
        },
        viewInit (val) {
            //查看情况逆转String成为当页可使用数据,并做动作
            this.reverseMapData(val)
            this.fromView = true //查看数据不可改
        },
        reverseMapData (val, label) {
            //解释数据
            let rname = val[0][0].split(";"),
                r = val[0][1].split(";"),
                pname = val[1][0].split(";"),
                p = val[1][1].split(";")
            this.ourDatas = []
            for (let k in r) {
                this.ourDatas.push({
                    label: "路径" + (+k + 1),
                    value: r[k],
                    name: rname[k],
                    notPath: false,
                    isLine: true,
                    id: this.ourDatas.length,
                })
            }
          }
        }
      }
      return notData.length > 0 ? [names + "not", notData] : [name, value];
            for (let k in p) {
                let potion = p[k].split(",")
                this.ourDatas.push({
                    label: "标点" + (+k + 1),
                    value: [+potion[0], +potion[1]],
                    name: pname[k],
                    notPath: false,
                    isLine: false,
                    id: this.ourDatas.length,
                })
            }
            this.nowId = +this.ourDatas.length + 1
        },
        myRules (index) {
            //单个验证
            if (this.ourDatas[index].name && this.ourDatas[index].value) {
                this.ourDatas[index].notPath = false
            } else {
                this.ourDatas[index].notPath = 2
            }
        },
        //自定义验证
        myRulesUse () {
            //把一个数组拆开两个来对应之前的数据
            let ourData = this.ourDatas
            let lineBefor = []
            let pointBefor = []
            for (let o in ourData) {
                if (ourData[o].isLine) {
                    lineBefor.push(ourData[o])
                } else {
                    pointBefor.push(ourData[o])
                }
            }
            let line = this.changeMapData(lineBefor, "name")
            let point = this.changeMapData(pointBefor, "name")
            if (line[0] == "namenot" || point[0] == "namenot") {
                //需要显示验证失败合集
                let errorId = []
                if (line[0] == "namenot") {
                    errorId.push(...line[1])
                }
                if (point[0] == "namenot") {
                    errorId.push(...point[1])
                }
                for (let x in this.ourDatas) {
                    let flog = true
                    for (let k in errorId) {
                        if (errorId[k] == this.ourDatas[x].id) {
                            flog = false
                        }
                    }
                    if (flog) {
                        this.ourDatas[x].notPath = false
                    } else {
                        this.ourDatas[x].notPath = 2
                    }
                }
                return false
            } else {
                for (let i in this.ourDatas) {
                    this.ourDatas[i].notPath = false
                }
                return [line, point]
            }
        },
        //规则
        changeMapData (item, names) {
            let name = "",
                value = "",
                notData = []
            let itemLength = item.length - 1
            for (let k in item) {
                let inItem = item[k]
                for (let kin in inItem) {
                    if (
                        inItem[kin] == "" &&
                        kin != "notPath" &&
                        kin != "isLine" &&
                        kin != "id"
                    ) {
                        notData.push(inItem.id)
                        break
                    }
                    if (kin == names) {
                        name += inItem[kin]
                        if (k != itemLength) {
                            name += ";"
                        }
                    }
                    if (kin == "value") {
                        value += inItem[kin]
                        if (k != itemLength) {
                            value += ";"
                        }
                    }
                }
            }
            return notData.length > 0 ? [names + "not", notData] : [name, value]
        },
        checkDom (name, fn) {
            //  声明定时器
            let that = this
            var timer = null
            //  检查dom是否执行完成
            function checkDom () {
                let dom = that.$refs[name]
                if (dom) {
                    //  执行dom加载完成后的操作
                    //  清除定时器
                    if (!timer) {
                        clearTimeout(timer)
                    }
                    if (fn) {
                        //回调函数
                        fn(dom)
                        return
                    } else {
                        return dom
                    }
                } else {
                    //  自我调用
                    timer = setTimeout(checkDom, 100)
                }
            }
            //  首次执行
            checkDom()
        },
    },
    checkDom(name, fn) {
      //  声明定时器
      let that = this;
      var timer = null;
      //  检查dom是否执行完成
      function checkDom() {
        let dom = that.$refs[name];
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
          if (!timer) {
            clearTimeout(timer);
          }
          if (fn) {
            //回调函数
            fn(dom);
            return;
          } else {
            return dom;
          }
        } else {
          //  自我调用
          timer = setTimeout(checkDom, 100);
        }
      }
      //  首次执行
      checkDom();
    },
  },
};
</script>

<style lang="scss">
.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.getMapData {
  width: 100%;
  height: 100%;
  position: relative;
  .controlMapWindowTitle {
    position: absolute;
    left: calc(50% - 42px);
    top: 0;
  }
  .notPath {
    // border-bottom: 0.5px solid red;
  }
    width: 100%;
    height: 100%;
    position: relative;
    .controlMapWindowTitle {
        position: absolute;
        left: calc(50% - 42px);
        top: 0;
    }
    .notPath {
        // border-bottom: 0.5px solid red;
    }
}

//过度动画
.list-enter {
  opacity: 0;
  transform: translateY(10px);
    opacity: 0;
    transform: translateY(10px);
}
.list-leave-to {
  opacity: 0;
  transform: translateY(-10px);
    opacity: 0;
    transform: translateY(-10px);
}

.list-enter-to,
.list-leave {
  opacity: 1;
    opacity: 1;
}

.notDatas {
  width: auto;
  height: auto;
  position: absolute;
  top: 5px;
  left: 100px;
  background-color: #fff;
  border-radius: 5px;
  padding: 2px 8px;
  div {
    display: inline;
  }
    width: auto;
    height: auto;
    position: absolute;
    top: 5px;
    left: 100px;
    background-color: #fff;
    border-radius: 5px;
    padding: 2px 8px;
    div {
        display: inline;
    }
}
</style>

 src/views/farmplant/detection.vue

@@ -1,323 +1,305 @@
<<<<<<< HEAD
  <template>
=======
<template>
>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
  <div>
    <el-dialog
      title="检测报告"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="close"
      width="60%"
      :visible.sync="visible"
      center
    >
    <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"
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
    </avue-crud>
  </el-dialog>
</div>
    <div>
        <el-dialog
            title="检测报告"
            :modal-append-to-body="false"
            :append-to-body="true"
            :close-on-click-modal="false"
            @close="close"
            width="60%"
            :visible.sync="visible"
            center
        >
            <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"
            >
                <template slot="menuLeft">
                    <el-button
                        type="danger"
                        size="small"
                        icon="el-icon-delete"
                        plain
                        @click="handleDelete"
                    >删 除</el-button>
                </template>
            </avue-crud>
        </el-dialog>
    </div>
</template>
<<<<<<< HEAD


=======
 
 
>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
<script>
import { getDetail, getList, update, remove, save } from "@/api/farm/farmPaper";
import { mapGetters } from "vuex";
import { getDetail, getList, update, remove, save } from "@/api/farm/farmPaper"
import { mapGetters } from "vuex"
export default {
  props: ["farmId"],
  data() {
    return {
      farmPlantId:null,
      visible: true,
      form: {},
      query: {},
      loading: true,
      excelBox: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        tip: false,
        searchSize: "mini",
        searchMenuSpan: 8,
        height: "400",
        editBtn: true,
        delBtn: true,
        viewBtn: true,
        menuWidth: 200,
        menuAlign: "center",
        align: "center",
        selection: true,
        column: [
          {
            label: "检测项目",
            prop: "name",
            rules: [
              {
                required: true,
                message: "请输入检测项目",
                trigger: "blur",
              },
            ],
          },
          {
            label: "检测机构",
            prop: "organName",
            rules: [
              {
                required: true,
                message: "请输入检测机构",
                trigger: "blur",
              },
            ],
          },
          {
            label: "报告编号",
            prop: "code",
            rules: [
              {
                required: true,
                message: "请输入报告编号",
                trigger: "blur",
              },
            ],
          },
          {
            label: "颁发日期",
            prop: "time",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [
              {
                required: true,
                message: "请选择颁发日期",
                trigger: "blur",
              },
            ],
          },
          {
            label: "报告图片",
            prop: "pictures",
            type: "upload",
            dataType: "string",
            span: 24,
            limit: 3,
            listType: "picture-card",
            tip: "只能上传jpg/png文件,最多上传3张",
            propsHttp: {
              res: "data",
              url: "url"
    props: ["farmId"],
    data () {
        return {
            farmPlantId: null,
            visible: true,
            form: {},
            query: {},
            loading: true,
            excelBox: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            action: "/api/blade-resource/oss/endpoint/put-files"
          },
        ],
      },
      data: [],
    };
  },
  created() { 
    
  },
  computed: {
    ...mapGetters(["permission", "userInfo"]),
    // permissionList() {
    //   return {
    //     addBtn: this.vaildData(this.permission.social_add, true),
    //     viewBtn: this.vaildData(this.permission.social_view, false),
    //     delBtn: this.vaildData(this.permission.social_delete, false),
    //     editBtn: this.vaildData(this.permission.social_edit, false),
    //   };
    // },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  mounted() {
   },
  methods: {
    init(id) {
      this.visible = true;
      this.farmPlantId = id;
      this.onLoad(this.page);
    },
    //新增
    rowSave(row, done, loading) {
      row["farmId"] = this.farmPlantId;
      //种养品
      row["type"] = 3;
      save(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
            selectionList: [],
            option: {
                tip: false,
                searchSize: "mini",
                searchMenuSpan: 8,
                height: "400",
                editBtn: true,
                delBtn: true,
                viewBtn: true,
                menuWidth: 200,
                menuAlign: "center",
                align: "center",
                selection: true,
                column: [
                    {
                        label: "检测项目",
                        prop: "name",
                        rules: [
                            {
                                required: true,
                                message: "请输入检测项目",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "检测机构",
                        prop: "organName",
                        rules: [
                            {
                                required: true,
                                message: "请输入检测机构",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "报告编号",
                        prop: "code",
                        rules: [
                            {
                                required: true,
                                message: "请输入报告编号",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "颁发日期",
                        prop: "time",
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        rules: [
                            {
                                required: true,
                                message: "请选择颁发日期",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "报告图片",
                        prop: "pictures",
                        type: "upload",
                        dataType: "string",
                        span: 24,
                        limit: 3,
                        listType: "picture-card",
                        tip: "只能上传jpg/png文件,最多上传3张",
                        propsHttp: {
                            res: "data",
                            url: "url"
                        },
                        action: "/api/blade-resource/oss/endpoint/put-files"
                    },
                ],
            },
            data: [],
        }
      );
    },
    //修改
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    created () {

    },
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        // permissionList() {
        //   return {
        //     addBtn: this.vaildData(this.permission.social_add, true),
        //     viewBtn: this.vaildData(this.permission.social_view, false),
        //     delBtn: this.vaildData(this.permission.social_delete, false),
        //     editBtn: this.vaildData(this.permission.social_edit, false),
        //   };
        // },
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
        (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: "操作成功!",
          });
        });
    mounted () {
    },
    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();
        });
    methods: {
        init (id) {
            this.visible = true
            this.farmPlantId = id
            this.onLoad(this.page)
        },
        //新增
        rowSave (row, done, loading) {
            row["farmId"] = this.farmPlantId
            //种养品
            row["type"] = 3
            save(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
            params['type'] = 3
            params['farmId'] = this.farmPlantId
            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()
            })
        },
    },
    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;
      params['type'] = 3;
      params['farmId'] = this.farmPlantId;
      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>
<<<<<<< HEAD

<style>
</style>
=======
 
<style>
</style>
>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356

 src/views/farmplant/farmplant copy.vue

@@ -1,650 +1,649 @@
<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
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
    <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
                    @click="handleDelete"
                >删 除</el-button>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import { getDetail, getList, update, remove, save } from "@/api/farmplant/farmplant";
import { getLandList } from "@/api/land/land";
import { mapGetters } from "vuex";
import { getDetail, getList, update, remove, save } from "@/api/farmplant/farmplant"
import { getLandList } from "@/api/land/land"
import { mapGetters } from "vuex"
export default {
  data() {
    return {
      visible: true,
      form: {},
      query: {},
      loading: true,
      excelBox: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      landList:[],
      option: {
        tip: false,
        height: "auto",
        editBtn: true,
        delBtn: true,
        viewBtn: true,
        menuWidth: 200,
        menuAlign: "center",
        align: "center",
        selection: true,
        searchShow: true,
        searchMenuSpan: 6,
        column: [
          {
            label: "类型",
            prop: "farmType",
            type: "select",
            labelWidth:110,
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=strainType",
            props: {
              label: "dictValue",
              value: "dictKey"
    data () {
        return {
            visible: true,
            form: {},
            query: {},
            loading: true,
            excelBox: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            cascader: ["strainId"],
            rules: [
              {
                required: true,
                message: "请输入类型",
                trigger: "blur",
              },
            ],
          },
          {
            label: "种养品",
            prop: "strainId",
            hide:true,
            labelWidth:110,
            type:"tree",
            dicUrl: `/api/strain/strain-tree?strainType={{key}}`,
            dicData: [],
            props: {
              label: "strainName",
              value: "id"
            selectionList: [],
            landList: [],
            option: {
                tip: false,
                height: "auto",
                editBtn: true,
                delBtn: true,
                viewBtn: true,
                menuWidth: 200,
                menuAlign: "center",
                align: "center",
                selection: true,
                searchShow: true,
                searchMenuSpan: 6,
                column: [
                    {
                        label: "类型",
                        prop: "farmType",
                        type: "select",
                        labelWidth: 110,
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=strainType",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        cascader: ["strainId"],
                        rules: [
                            {
                                required: true,
                                message: "请输入类型",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "种养品",
                        prop: "strainId",
                        hide: true,
                        labelWidth: 110,
                        type: "tree",
                        dicUrl: `/api/strain/strain-tree?strainType={{key}}`,
                        dicData: [],
                        props: {
                            label: "strainName",
                            value: "id"
                        },
                        rules: [
                            {
                                required: true,
                                message: "请输入种养品",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "种养品名称",
                        prop: "strainName",
                        search: true,
                        searchSpan: 5,
                        searchLabelWidth: 110,
                        addDisplay: false,
                        viewDisplay: false,
                        editDisplay: false,
                        rules: [
                            {
                                required: true,
                                message: "请输入种养品",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "品种",
                        prop: "varieties",
                        // search:true,
                        // searchSpan:5,
                        labelWidth: 110,
                        rules: [
                            {
                                required: true,
                                message: "请输入种养品名称",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "种养品图片",
                        prop: "url",
                        type: "upload",
                        listType: "picture-img",
                        width: 100,
                        labelWidth: 110,
                        display: false,
                    },
                    {
                        label: "所属地块",
                        prop: "landName",
                        display: false,
                    },
                    {
                        label: "所属地块",
                        prop: "landId",
                        searchSpan: 4,
                        search: true,
                        type: "tree",
                        hide: true,
                        dicData: [],
                        props: {
                            label: "landName",
                            value: "id"
                        },
                        labelWidth: 110,
                        rules: [
                            {
                                required: true,
                                message: "请选择所属地块",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "种植标准",
                        prop: "plant",
                        search: true,
                        searchSpan: 3,
                        labelWidth: 110,
                        type: "select",
                        dicData: [
                            {
                                label: "有机",
                                value: "0"
                            },
                            {
                                label: "绿色",
                                value: "1"
                            },
                            {
                                label: "无公害",
                                value: "2"
                            },
                            {
                                label: "普通",
                                value: "3"
                            },
                        ],
                        rules: [
                            {
                                required: true,
                                message: "请选择种植标准",
                                trigger: "blur",
                            },
                        ],
                        display: false,
                    },
                    {
                        label: "种植方式",
                        prop: "plantingWay",
                        search: true,
                        searchSpan: 3,
                        type: "select",
                        labelWidth: 110,
                        dicData: [
                            {
                                label: "移栽",
                                value: "0"
                            },
                            {
                                label: "直播",
                                value: "1"
                            },
                        ],
                        rules: [
                            {
                                required: true,
                                message: "请选择种植方式",
                                trigger: "blur",
                            },
                        ],
                        display: false,
                    },
                    {
                        label: "作业方式",
                        prop: "jobWay",
                        search: true,
                        searchSpan: 3,
                        labelWidth: 110,
                        type: "select",
                        dicData: [
                            {
                                label: "人工",
                                value: "0"
                            },
                            {
                                label: "机械",
                                value: "1"
                            },
                        ],
                        rules: [
                            {
                                required: true,
                                message: "请输入作业方式",
                                trigger: "blur",
                            },
                        ],
                        display: false,
                    },
                    {
                        label: "移栽时间",
                        prop: "transplanTime",
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        labelWidth: 110,
                        rules: [
                            {
                                required: true,
                                message: "请选择移栽时间",
                                trigger: "blur",
                            },
                        ],
                        display: false,
                    },
                    {
                        label: "预计采收时间",
                        prop: "recoveryTime",
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        hide: true,
                        labelWidth: 110,
                        rules: [
                            {
                                required: false,
                                message: "请选预计采收时间",
                                trigger: "blur",
                            },
                        ],
                        display: false,
                    },
                    {
                        label: "预计亩产",
                        prop: "per",
                        labelWidth: 110,
                        hide: true,
                        type: "number",
                        rules: [
                            {
                                required: false,
                                message: "请输入预计亩产",
                                trigger: "blur",
                            },
                        ],
                        display: false,
                    },
                    {
                        label: "株数",
                        prop: "plantNumber",
                        labelWidth: 110,
                        type: "number",
                        hide: true,
                        rules: [
                            {
                                required: false,
                                message: "请输入株数",
                                trigger: "blur",
                            },
                        ],
                        display: false,
                    },
                    {
                        label: "株间距",
                        prop: "plantSpacing",
                        labelWidth: 110,
                        type: "number",
                        hide: true,
                        rules: [
                            {
                                required: false,
                                message: "请输入株间距",
                                trigger: "blur",
                            },
                        ],
                        display: false,
                    },
                    {
                        label: "投苗时间",
                        prop: "seedingTime",
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        labelWidth: 110,
                        hide: true,
                        rules: [
                            {
                                required: true,
                                message: "请选择投苗时间",
                                trigger: "blur",
                            },
                        ],
                        display: false,
                    },
                    {
                        label: "养殖数量",
                        prop: "breed",
                        labelWidth: 110,
                        type: "number",
                        hide: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入养殖数量",
                                trigger: "blur",
                            },
                        ],
                        display: false,
                    },
                ],
            },
            rules: [
              {
                required: true,
                message: "请输入种养品",
                trigger: "blur",
              },
            ],
          },
          {
            label: "种养品名称",
            prop: "strainName",
            search:true,
            searchSpan:5,
            searchLabelWidth:110,
            addDisplay:false, 
            viewDisplay:false,
            editDisplay:false,
            rules: [
              {
                required: true,
                message: "请输入种养品",
                trigger: "blur",
              },
            ],
          },
          {
            label: "品种",
            prop: "varieties",
            // search:true,
            // searchSpan:5,
            labelWidth:110,
            rules: [
              {
                required: true,
                message: "请输入种养品名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "种养品图片",
            prop: "url",
            type: "upload",
            listType: "picture-img",
            width: 100,
            labelWidth:110,
            display:false,
          },
          {
            label: "所属地块",
            prop: "landName",
            display:false,
          },
          {
            label: "所属地块",
            prop: "landId",
            searchSpan:4,
            search:true,
            type:"tree",
            hide:true,
            dicData: [],
            props: {
              label: "landName",
              value: "id"
            },
            labelWidth:110,
            rules: [
              {
                required: true,
                message: "请选择所属地块",
                trigger: "blur",
              },
            ],
          },
          {
            label: "种植标准",
            prop: "plant",
            search:true,
            searchSpan:3,
            labelWidth:110,
            type: "select",
            dicData:[
              {
                label:"有机",
                value:"0"
              },
              {
                label:"绿色",
                value:"1"
              },
              {
                label:"无公害",
                value:"2"
              },
              {
                label:"普通",
                value:"3"
              },
            ],
            rules: [
              {
                required: true,
                message: "请选择种植标准",
                trigger: "blur",
              },
            ],
            display:false,
          },
          {
            label: "种植方式",
            prop: "plantingWay",
            search:true,
            searchSpan:3,
            type: "select",
            labelWidth:110,
            dicData:[
              {
                label:"移栽",
                value:"0"
              },
              {
                label:"直播",
                value:"1"
              },
            ],
            rules: [
              {
                required: true,
                message: "请选择种植方式",
                trigger: "blur",
              },
            ],
            display:false,
          },
          {
            label: "作业方式",
            prop: "jobWay",
            search:true,
            searchSpan:3,
            labelWidth:110,
            type: "select",
            dicData:[
              {
                label:"人工",
                value:"0"
              },
              {
                label:"机械",
                value:"1"
              },
            ],
            rules: [
              {
                required: true,
                message: "请输入作业方式",
                trigger: "blur",
              },  
            ],
            display:false,
          },
          {
            label: "移栽时间",
            prop: "transplanTime",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            labelWidth:110,
            rules: [
              {
                required: true,
                message: "请选择移栽时间",
                trigger: "blur",
              },  
            ],
            display:false,
          },
          {
            label: "预计采收时间",
            prop: "recoveryTime",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            hide:true,
            labelWidth:110,
            rules: [
              {
                required: false,
                message: "请选预计采收时间",
                trigger: "blur",
              },  
            ],
            display:false,
          },
          {
            label: "预计亩产",
            prop: "per",
            labelWidth:110,
            hide:true,
            type:"number",
            rules: [
              {
                required: false,
                message: "请输入预计亩产",
                trigger: "blur",
              },  
            ],
            display:false,
          },
          {
            label: "株数",
            prop: "plantNumber", 
            labelWidth:110,
            type:"number",
            hide:true,
            rules: [
              {
                required: false,
                message: "请输入株数",
                trigger: "blur",
              },  
            ],
            display:false,
          },
          {
            label: "株间距",
            prop: "plantSpacing",
            labelWidth:110,
            type:"number",
            hide:true,
            rules: [
              {
                required: false,
                message: "请输入株间距",
                trigger: "blur",
              },  
            ],
            display:false,
          },
          {
            label: "投苗时间",
            prop: "seedingTime",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            labelWidth:110,
            hide:true,
            rules: [
              {
                required: true,
                message: "请选择投苗时间",
                trigger: "blur",
              },  
            ],
            display:false,
          },
          {
            label: "养殖数量",
            prop: "breed",
            labelWidth:110,
            type:"number",
            hide:true,
            rules: [
              {
                required: true,
                message: "请输入养殖数量",
                trigger: "blur",
              },  
            ],
            display:false,
          },
        ],
      },
      data: [],
    };
  },
  watch: {
    "form.farmType": {
      handler(val) {
        var splantcolumn = this.findObject(this.option.column,"plant");
        var plantingWaycolumn = this.findObject(this.option.column, "plantingWay");
        var jobWaycolumn = this.findObject(this.option.column, "jobWay");
        var transplanTimecolumn = this.findObject(this.option.column, "transplanTime");
        var recoveryTimecolumn = this.findObject(this.option.column, "recoveryTime");
        var percolumn = this.findObject(this.option.column, "per");
        var plantNumbercolumn = this.findObject(this.option.column, "plantNumber");
        var plantSpacingcolumn = this.findObject(this.option.column, "plantSpacing");
        var seedingTimecolumn = this.findObject(this.option.column, "seedingTime");
        var breedcolumn = this.findObject(this.option.column, "breed");
        // var landIdcolumn = this.findObject(this.option.column, "landId");
        // landIdcolumn.dicData = this.landList;
        if (val === '0') {
          //种职业
          splantcolumn.display = true;
          splantcolumn.label = "种植标准";
          plantingWaycolumn.display = true;
          plantingWaycolumn.label = "种植方式";
          plantingWaycolumn.dicData=[
              {
                label:"移栽",
                value:"0"
              },
              {
                label:"直播",
                value:"1"
              },
            ]
          jobWaycolumn.display = true;
          transplanTimecolumn.display = true;
          transplanTimecolumn.label="移栽时间";
          recoveryTimecolumn.display = true;
          recoveryTimecolumn.label="预计采收时间";
          percolumn.display = true;
          percolumn.label = "预计亩产";
          percolumn.rules=[
              {
                required: false,
                message: "请输入预计亩产",
                trigger: "blur",
              }, 
            ],
          plantNumbercolumn.display = true;
          plantSpacingcolumn.display = true;
          seedingTimecolumn.display = false;
          breedcolumn.display = false;
        } else if(val ==1){
          //水产业
          splantcolumn.display = false;
          plantingWaycolumn.display = false;
          jobWaycolumn.display = true;
          transplanTimecolumn.display = false;
          recoveryTimecolumn.display = false;
          percolumn.display = false;
          plantNumbercolumn.display = false;
          plantSpacingcolumn.display = false;
          seedingTimecolumn.display = true;
          breedcolumn.display = true;
        }else if(val ==2){
          //禽畜业
          splantcolumn.display = true;
          splantcolumn.label = "养殖标准";
          plantingWaycolumn.display = true;
          plantingWaycolumn.label = "养殖方式";
          plantingWaycolumn.dicData=[
              {
                label:"放养",
                value:"0"
              },
              {
                label:"圈养",
                value:"1"
              },
              {
                label:"放养+圈养",
                value:"2"
              },
            ]
          jobWaycolumn.display = true;
          transplanTimecolumn.display = true;
          transplanTimecolumn.label="养殖开始时间";
          recoveryTimecolumn.display = true;
          recoveryTimecolumn.label="预计出栏时间";
          percolumn.display = true;
          percolumn.label = "养殖数量";
          percolumn.rules=[
              {
                required: true,
                message: "请输入养殖数量",
                trigger: "blur",
              },  
            ],
          plantNumbercolumn.display = false;
          plantSpacingcolumn.display = false;
          seedingTimecolumn.display = false;
          breedcolumn.display = false;
        }else{
          splantcolumn.display = false;
          plantingWaycolumn.display = false;
          jobWaycolumn.display = false;
          transplanTimecolumn.display = false;
          recoveryTimecolumn.display = false;
          percolumn.display = false;
          plantNumbercolumn.display = false;
          plantSpacingcolumn.display = false;
          seedingTimecolumn.display = false;
          breedcolumn.display = false;
            data: [],
        }
      },
      immediate: true
    },
  },
  created() {
    this.initData();
  },
  computed: {
    ...mapGetters(["permission", "userInfo"]),
    // permissionList() {
    //   return {
    //     addBtn: this.vaildData(this.permission.social_add, true),
    //     viewBtn: this.vaildData(this.permission.social_view, false),
    //     delBtn: this.vaildData(this.permission.social_delete, false),
    //     editBtn: this.vaildData(this.permission.social_edit, false),
    //   };
    // },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  mounted() {},
  methods: {
    //初始化数据
    initData(){
      var that = this;
      //获取农地数据
      getLandList(this.userInfo.user_id).then((res)=>{
          if(res.data.code==200){
              var landIdcolumn = that.findObject(that.option.column,"landId");
              that.landList = res.data.data;
              landIdcolumn.dicData = res.data.data;
          }
      })
    },
    //新增
    rowSave(row, done, loading) {
      save(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    watch: {
        "form.farmType": {
            handler (val) {
                var splantcolumn = this.findObject(this.option.column, "plant")
                var plantingWaycolumn = this.findObject(this.option.column, "plantingWay")
                var jobWaycolumn = this.findObject(this.option.column, "jobWay")
                var transplanTimecolumn = this.findObject(this.option.column, "transplanTime")
                var recoveryTimecolumn = this.findObject(this.option.column, "recoveryTime")
                var percolumn = this.findObject(this.option.column, "per")
                var plantNumbercolumn = this.findObject(this.option.column, "plantNumber")
                var plantSpacingcolumn = this.findObject(this.option.column, "plantSpacing")
                var seedingTimecolumn = this.findObject(this.option.column, "seedingTime")
                var breedcolumn = this.findObject(this.option.column, "breed")
                // var landIdcolumn = this.findObject(this.option.column, "landId");
                // landIdcolumn.dicData = this.landList;
                if (val === '0') {
                    //种职业
                    splantcolumn.display = true
                    splantcolumn.label = "种植标准"
                    plantingWaycolumn.display = true
                    plantingWaycolumn.label = "种植方式"
                    plantingWaycolumn.dicData = [
                        {
                            label: "移栽",
                            value: "0"
                        },
                        {
                            label: "直播",
                            value: "1"
                        },
                    ]
                    jobWaycolumn.display = true
                    transplanTimecolumn.display = true
                    transplanTimecolumn.label = "移栽时间"
                    recoveryTimecolumn.display = true
                    recoveryTimecolumn.label = "预计采收时间"
                    percolumn.display = true
                    percolumn.label = "预计亩产"
                    percolumn.rules = [
                        {
                            required: false,
                            message: "请输入预计亩产",
                            trigger: "blur",
                        },
                    ],
                        plantNumbercolumn.display = true
                    plantSpacingcolumn.display = true
                    seedingTimecolumn.display = false
                    breedcolumn.display = false
                } else if (val == 1) {
                    //水产业
                    splantcolumn.display = false
                    plantingWaycolumn.display = false
                    jobWaycolumn.display = true
                    transplanTimecolumn.display = false
                    recoveryTimecolumn.display = false
                    percolumn.display = false
                    plantNumbercolumn.display = false
                    plantSpacingcolumn.display = false
                    seedingTimecolumn.display = true
                    breedcolumn.display = true
                } else if (val == 2) {
                    //禽畜业
                    splantcolumn.display = true
                    splantcolumn.label = "养殖标准"
                    plantingWaycolumn.display = true
                    plantingWaycolumn.label = "养殖方式"
                    plantingWaycolumn.dicData = [
                        {
                            label: "放养",
                            value: "0"
                        },
                        {
                            label: "圈养",
                            value: "1"
                        },
                        {
                            label: "放养+圈养",
                            value: "2"
                        },
                    ]
                    jobWaycolumn.display = true
                    transplanTimecolumn.display = true
                    transplanTimecolumn.label = "养殖开始时间"
                    recoveryTimecolumn.display = true
                    recoveryTimecolumn.label = "预计出栏时间"
                    percolumn.display = true
                    percolumn.label = "养殖数量"
                    percolumn.rules = [
                        {
                            required: true,
                            message: "请输入养殖数量",
                            trigger: "blur",
                        },
                    ],
                        plantNumbercolumn.display = false
                    plantSpacingcolumn.display = false
                    seedingTimecolumn.display = false
                    breedcolumn.display = false
                } else {
                    splantcolumn.display = false
                    plantingWaycolumn.display = false
                    jobWaycolumn.display = false
                    transplanTimecolumn.display = false
                    recoveryTimecolumn.display = false
                    percolumn.display = false
                    plantNumbercolumn.display = false
                    plantSpacingcolumn.display = false
                    seedingTimecolumn.display = false
                    breedcolumn.display = false
                }
            },
            immediate: true
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    //修改
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    created () {
        this.initData()
    },
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        // permissionList() {
        //   return {
        //     addBtn: this.vaildData(this.permission.social_add, true),
        //     viewBtn: this.vaildData(this.permission.social_view, false),
        //     delBtn: this.vaildData(this.permission.social_delete, false),
        //     editBtn: this.vaildData(this.permission.social_edit, false),
        //   };
        // },
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
        (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: "操作成功!",
          });
        });
    mounted () { },
    methods: {
        //初始化数据
        initData () {
            var that = this
            //获取农地数据
            getLandList(this.userInfo.user_id).then((res) => {
                if (res.data.code == 200) {
                    var landIdcolumn = that.findObject(that.option.column, "landId")
                    that.landList = res.data.data
                    landIdcolumn.dicData = res.data.data
                }
            })
        },
        //新增
        rowSave (row, done, loading) {
            save(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()
            })
        },
    },
    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>


 src/views/farmplant/farmplant.vue

@@ -1,718 +1,711 @@
<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
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
      <template slot-scope="{ type, size, row }" slot="menu">
        <el-button
          :type="type"
          :size="size"
          icon="el-icon-money"
          @click="handleDetection(row)"
          >检测报告
        </el-button>
      </template>
    </avue-crud>
    <!-- 检测报告 -->
    <detection v-if="detectionVisible" ref="detection"></detection>
  </basic-container>
    <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
                    @click="handleDelete"
                >删 除</el-button>
            </template>
            <template slot-scope="{ type, size, row }" slot="menu">
                <el-button
                    :type="type"
                    :size="size"
                    icon="el-icon-money"
                    @click="handleDetection(row)"
                >检测报告</el-button>
            </template>
        </avue-crud>
        <!-- 检测报告 -->
        <detection v-if="detectionVisible" ref="detection"></detection>
    </basic-container>
</template>
 
<script>
import { getDetail, getList, update, remove, save } from "@/api/farmplant/farmplant";
import { getStrainList } from "@/api/farmplant/strain";
import { getLandList } from "@/api/land/land";
import { mapGetters } from "vuex";
import detection from "./detection.vue";
import { getDetail, getList, update, remove, save } from "@/api/farmplant/farmplant"
import { getStrainList } from "@/api/farmplant/strain"
import { getLandList } from "@/api/land/land"
import { mapGetters } from "vuex"
import detection from "./detection.vue"
export default {
  components: {
    detection
  },
   props:[
    "type","activeName"
  ],
  data() {
    return {
      detectionVisible:false,
      visible: true,
      form: {},
      query: {},
      loading: true,
      excelBox: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      landList:[],
      option: {
        tip: false,
        height: 520,
        editBtn: true,
        delBtn: true,
        viewBtn: true,
        menuWidth: 280,
        menuAlign: "center",
        align: "center",
        selection: true,
        searchShow: true,
        searchMenuSpan: 6,
        indexFixed: false,
        selectionFixed: false,
        expandFixed: false,
        menuFixed: false,
        column: [
          // {
          //   label: "类型",
          //   prop: "farmType",
          //   type: "select",
          //   labelWidth:110,
          //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=strainType",
          //   props: {
          //     label: "dictValue",
          //     value: "dictKey"
          //   },
          //   cascader: ["strainId"],
          //   rules: [
          //     {
          //       required: true,
          //       message: "请输入类型",
          //       trigger: "blur",
          //     },
          //   ],
          // },
          {
            label: "种养品",
            prop: "strainId",
            hide:true,
            labelWidth:110,
            type:"tree",
            // dicUrl: `/api/strain/strain-tree?strainType=0`,
            dicData: [],
            props: {
              label: "strainName",
              value: "id"
    components: {
        detection
    },
    props: [
        "type", "activeName"
    ],
    data () {
        return {
            detectionVisible: false,
            visible: true,
            form: {},
            query: {},
            loading: true,
            excelBox: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            rules: [
              {
                required: true,
                message: "请选择种养品",
                trigger: "blur",
              },
            ],
          },
          {
            label: "种养品名称",
            prop: "strainName",
            search:true,
            searchSpan:5,
            searchLabelWidth:110,
            display:false,
            rules: [
              {
                required: true,
                message: "请输入种养品",
                trigger: "blur",
              },
            ],
          },
          {
            label: "品种",
            prop: "varieties",
            // search:true,
            // searchSpan:5,
            labelWidth:110,
            rules: [
              {
                required: true,
                message: "请输入种养品名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "种养品图片",
            prop: "url",
            type: "upload",
            listType: "picture-img",
            width: 100,
            labelWidth:110,
            display:false,
          },
          {
            label: "所属地块",
            prop: "landName",
            display:false,
          },
          {
            label: "所属地块",
            prop: "landId",
            searchSpan:4,
            search:true,
            type:"tree",
            hide:true,
            dicData: [],
            props: {
              label: "landName",
              value: "id"
            selectionList: [],
            landList: [],
            option: {
                tip: false,
                height: 520,
                editBtn: true,
                delBtn: true,
                viewBtn: true,
                menuWidth: 280,
                menuAlign: "center",
                align: "center",
                selection: true,
                searchShow: true,
                searchMenuSpan: 6,
                indexFixed: false,
                selectionFixed: false,
                expandFixed: false,
                menuFixed: false,
                column: [
                    // {
                    //   label: "类型",
                    //   prop: "farmType",
                    //   type: "select",
                    //   labelWidth:110,
                    //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=strainType",
                    //   props: {
                    //     label: "dictValue",
                    //     value: "dictKey"
                    //   },
                    //   cascader: ["strainId"],
                    //   rules: [
                    //     {
                    //       required: true,
                    //       message: "请输入类型",
                    //       trigger: "blur",
                    //     },
                    //   ],
                    // },
                    {
                        label: "种养品",
                        prop: "strainId",
                        hide: true,
                        labelWidth: 110,
                        type: "tree",
                        // dicUrl: `/api/strain/strain-tree?strainType=0`,
                        dicData: [],
                        props: {
                            label: "strainName",
                            value: "id"
                        },
                        rules: [
                            {
                                required: true,
                                message: "请选择种养品",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "种养品名称",
                        prop: "strainName",
                        search: true,
                        searchSpan: 5,
                        searchLabelWidth: 110,
                        display: false,
                        rules: [
                            {
                                required: true,
                                message: "请输入种养品",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "品种",
                        prop: "varieties",
                        // search:true,
                        // searchSpan:5,
                        labelWidth: 110,
                        rules: [
                            {
                                required: true,
                                message: "请输入种养品名称",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "种养品图片",
                        prop: "url",
                        type: "upload",
                        listType: "picture-img",
                        width: 100,
                        labelWidth: 110,
                        display: false,
                    },
                    {
                        label: "所属地块",
                        prop: "landName",
                        display: false,
                    },
                    {
                        label: "所属地块",
                        prop: "landId",
                        searchSpan: 4,
                        search: true,
                        type: "tree",
                        hide: true,
                        dicData: [],
                        props: {
                            label: "landName",
                            value: "id"
                        },
                        labelWidth: 110,
                        rules: [
                            {
                                required: true,
                                message: "请选择所属地块",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "种植标准",
                        prop: "plant",
                        // search:true,
                        // searchSpan:4,
                        labelWidth: 110,
                        type: "select",
                        dicData: [
                            {
                                label: "有机",
                                value: "0"
                            },
                            {
                                label: "绿色",
                                value: "1"
                            },
                            {
                                label: "无公害",
                                value: "2"
                            },
                            {
                                label: "普通",
                                value: "3"
                            },
                        ],
                        rules: [
                            {
                                required: true,
                                message: "请选择种植标准",
                                trigger: "blur",
                            },
                        ],
                        // display:false,
                    },
                    {
                        label: "种植方式",
                        prop: "plantingWay",
                        // search:true,
                        // searchSpan:4,
                        type: "select",
                        labelWidth: 110,
                        dicData: [
                            {
                                label: "移栽",
                                value: "0"
                            },
                            {
                                label: "直播",
                                value: "1"
                            },
                        ],
                        rules: [
                            {
                                required: true,
                                message: "请选择种植方式",
                                trigger: "blur",
                            },
                        ],
                        // display:false,
                    },
                    {
                        label: "作业方式",
                        prop: "jobWay",
                        // search:true,
                        // searchSpan:4,
                        labelWidth: 110,
                        type: "select",
                        dicData: [
                            {
                                label: "人工",
                                value: "0"
                            },
                            {
                                label: "机械",
                                value: "1"
                            },
                        ],
                        rules: [
                            {
                                required: true,
                                message: "请输入作业方式",
                                trigger: "blur",
                            },
                        ],
                        // display:false,
                    },
                    {
                        label: "移栽时间",
                        prop: "transplanTime",
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        labelWidth: 110,
                        rules: [
                            {
                                required: true,
                                message: "请选择移栽时间",
                                trigger: "blur",
                            },
                        ],
                        // display:false,
                    },
                    {
                        label: "预计采收时间",
                        prop: "recoveryTime",
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        hide: true,
                        labelWidth: 110,
                        rules: [
                            {
                                required: false,
                                message: "请选预计采收时间",
                                trigger: "blur",
                            },
                        ],
                        // display:false,
                    },
                    {
                        label: "预计亩产",
                        prop: "per",
                        labelWidth: 110,
                        hide: true,
                        type: "number",
                        rules: [
                            {
                                required: false,
                                message: "请输入预计亩产",
                                trigger: "blur",
                            },
                        ],
                        // display:false,
                    },
                    {
                        label: "株数",
                        prop: "plantNumber",
                        labelWidth: 110,
                        type: "number",
                        hide: true,
                        rules: [
                            {
                                required: false,
                                message: "请输入株数",
                                trigger: "blur",
                            },
                        ],
                        // display:false,
                    },
                    {
                        label: "株间距",
                        prop: "plantSpacing",
                        labelWidth: 110,
                        type: "number",
                        hide: true,
                        rules: [
                            {
                                required: false,
                                message: "请输入株间距",
                                trigger: "blur",
                            },
                        ],
                        // display:false,
                    },
                    // {
                    //   label: "投苗时间",
                    //   prop: "seedingTime",
                    //   type: "date",
                    //   format: "yyyy-MM-dd",
                    //   valueFormat: "yyyy-MM-dd",
                    //   labelWidth:110,
                    //   hide:true,
                    //   rules: [
                    //     {
                    //       required: true,
                    //       message: "请选择投苗时间",
                    //       trigger: "blur",
                    //     },
                    //   ],
                    //   display:false,
                    // },
                    // {
                    //   label: "养殖数量",
                    //   prop: "breed",
                    //   labelWidth:110,
                    //   type:"number",
                    //   hide:true,
                    //   rules: [
                    //     {
                    //       required: true,
                    //       message: "请输入养殖数量",
                    //       trigger: "blur",
                    //     },
                    //   ],
                    //   display:false,
                    // },
                    {
                        label: "种植状态",
                        prop: "status",
                        search: true,
                        searchSpan: 4,
                        labelWidth: 110,
                        type: "select",
                        dicData: [
                            {
                                label: "种植中",
                                value: "1"
                            },
                            {
                                label: "已结束",
                                value: "2"
                            },
                        ],
                        display: false,
                    },
                ],
            },
            labelWidth:110,
            rules: [
              {
                required: true,
                message: "请选择所属地块",
                trigger: "blur",
              },
            ],
          },
          {
            label: "种植标准",
            prop: "plant",
            // search:true,
            // searchSpan:4,
            labelWidth:110,
            type: "select",
            dicData:[
              {
                label:"有机",
                value:"0"
              },
              {
                label:"绿色",
                value:"1"
              },
              {
                label:"无公害",
                value:"2"
              },
              {
                label:"普通",
                value:"3"
              },
            ],
            rules: [
              {
                required: true,
                message: "请选择种植标准",
                trigger: "blur",
              },
            ],
            // display:false,
          },
          {
            label: "种植方式",
            prop: "plantingWay",
            // search:true,
            // searchSpan:4,
            type: "select",
            labelWidth:110,
            dicData:[
              {
                label:"移栽",
                value:"0"
              },
              {
                label:"直播",
                value:"1"
              },
            ],
            rules: [
              {
                required: true,
                message: "请选择种植方式",
                trigger: "blur",
              },
            ],
            // display:false,
          },
          {
            label: "作业方式",
            prop: "jobWay",
            // search:true,
            // searchSpan:4,
            labelWidth:110,
            type: "select",
            dicData:[
              {
                label:"人工",
                value:"0"
              },
              {
                label:"机械",
                value:"1"
              },
            ],
            rules: [
              {
                required: true,
                message: "请输入作业方式",
                trigger: "blur",
              },
            ],
            // display:false,
          },
          {
            label: "移栽时间",
            prop: "transplanTime",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            labelWidth:110,
            rules: [
              {
                required: true,
                message: "请选择移栽时间",
                trigger: "blur",
              },
            ],
            // display:false,
          },
          {
            label: "预计采收时间",
            prop: "recoveryTime",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            hide:true,
            labelWidth:110,
            rules: [
              {
                required: false,
                message: "请选预计采收时间",
                trigger: "blur",
              },
            ],
            // display:false,
          },
          {
            label: "预计亩产",
            prop: "per",
            labelWidth:110,
            hide:true,
            type:"number",
            rules: [
              {
                required: false,
                message: "请输入预计亩产",
                trigger: "blur",
              },
            ],
            // display:false,
          },
          {
            label: "株数",
            prop: "plantNumber",
            labelWidth:110,
            type:"number",
            hide:true,
            rules: [
              {
                required: false,
                message: "请输入株数",
                trigger: "blur",
              },
            ],
            // display:false,
          },
          {
            label: "株间距",
            prop: "plantSpacing",
            labelWidth:110,
            type:"number",
            hide:true,
            rules: [
              {
                required: false,
                message: "请输入株间距",
                trigger: "blur",
              },
            ],
            // display:false,
          },
          // {
          //   label: "投苗时间",
          //   prop: "seedingTime",
          //   type: "date",
          //   format: "yyyy-MM-dd",
          //   valueFormat: "yyyy-MM-dd",
          //   labelWidth:110,
          //   hide:true,
          //   rules: [
          //     {
          //       required: true,
          //       message: "请选择投苗时间",
          //       trigger: "blur",
          //     },
          //   ],
          //   display:false,
          // },
          // {
          //   label: "养殖数量",
          //   prop: "breed",
          //   labelWidth:110,
          //   type:"number",
          //   hide:true,
          //   rules: [
          //     {
          //       required: true,
          //       message: "请输入养殖数量",
          //       trigger: "blur",
          //     },
          //   ],
          //   display:false,
          // },
          {
            label: "种植状态",
            prop: "status",
            search:true,
            searchSpan:4,
            labelWidth:110,
            type: "select",
            dicData:[
              {
                label:"种植中",
                value:"1"
              },
              {
                label:"已结束",
                value:"2"
              },
            ],
            display:false,
          },
        ],
      },
      data: [],
    };
  },
  watch: {
    // "form.farmType": {
    //   handler(val) {
    //     var splantcolumn = this.findObject(this.option.column,"plant");
    //     var plantingWaycolumn = this.findObject(this.option.column, "plantingWay");
    //     var jobWaycolumn = this.findObject(this.option.column, "jobWay");
    //     var transplanTimecolumn = this.findObject(this.option.column, "transplanTime");
    //     var recoveryTimecolumn = this.findObject(this.option.column, "recoveryTime");
    //     var percolumn = this.findObject(this.option.column, "per");
    //     var plantNumbercolumn = this.findObject(this.option.column, "plantNumber");
    //     var plantSpacingcolumn = this.findObject(this.option.column, "plantSpacing");
    //     var seedingTimecolumn = this.findObject(this.option.column, "seedingTime");
    //     var breedcolumn = this.findObject(this.option.column, "breed");
    //     // var landIdcolumn = this.findObject(this.option.column, "landId");
    //     // landIdcolumn.dicData = this.landList;
    //     if (val === '0') {
    //       //种职业
    //       splantcolumn.display = true;
    //       splantcolumn.label = "种植标准";
    //       plantingWaycolumn.display = true;
    //       plantingWaycolumn.label = "种植方式";
    //       plantingWaycolumn.dicData=[
    //           {
    //             label:"移栽",
    //             value:"0"
    //           },
    //           {
    //             label:"直播",
    //             value:"1"
    //           },
    //         ]
    //       jobWaycolumn.display = true;
    //       transplanTimecolumn.display = true;
    //       transplanTimecolumn.label="移栽时间";
    //       recoveryTimecolumn.display = true;
    //       recoveryTimecolumn.label="预计采收时间";
    //       percolumn.display = true;
    //       percolumn.label = "预计亩产";
    //       percolumn.rules=[
    //           {
    //             required: false,
    //             message: "请输入预计亩产",
    //             trigger: "blur",
    //           },
    //         ],
    //       plantNumbercolumn.display = true;
    //       plantSpacingcolumn.display = true;
    //       seedingTimecolumn.display = false;
    //       breedcolumn.display = false;
    //     } else if(val ==1){
    //       //水产业
    //       splantcolumn.display = false;
    //       plantingWaycolumn.display = false;
    //       jobWaycolumn.display = true;
    //       transplanTimecolumn.display = false;
    //       recoveryTimecolumn.display = false;
    //       percolumn.display = false;
    //       plantNumbercolumn.display = false;
    //       plantSpacingcolumn.display = false;
    //       seedingTimecolumn.display = true;
    //       breedcolumn.display = true;
    //     }else if(val ==2){
    //       //禽畜业
    //       splantcolumn.display = true;
    //       splantcolumn.label = "养殖标准";
    //       plantingWaycolumn.display = true;
    //       plantingWaycolumn.label = "养殖方式";
    //       plantingWaycolumn.dicData=[
    //           {
    //             label:"放养",
    //             value:"0"
    //           },
    //           {
    //             label:"圈养",
    //             value:"1"
    //           },
    //           {
    //             label:"放养+圈养",
    //             value:"2"
    //           },
    //         ]
    //       jobWaycolumn.display = true;
    //       transplanTimecolumn.display = true;
    //       transplanTimecolumn.label="养殖开始时间";
    //       recoveryTimecolumn.display = true;
    //       recoveryTimecolumn.label="预计出栏时间";
    //       percolumn.display = true;
    //       percolumn.label = "养殖数量";
    //       percolumn.rules=[
    //           {
    //             required: true,
    //             message: "请输入养殖数量",
    //             trigger: "blur",
    //           },
    //         ],
    //       plantNumbercolumn.display = false;
    //       plantSpacingcolumn.display = false;
    //       seedingTimecolumn.display = false;
    //       breedcolumn.display = false;
    //     }else{
    //       splantcolumn.display = false;
    //       plantingWaycolumn.display = false;
    //       jobWaycolumn.display = false;
    //       transplanTimecolumn.display = false;
    //       recoveryTimecolumn.display = false;
    //       percolumn.display = false;
    //       plantNumbercolumn.display = false;
    //       plantSpacingcolumn.display = false;
    //       seedingTimecolumn.display = false;
    //       breedcolumn.display = false;
    //     }
    //   },
    //   immediate: true
    // },
  },
  mounted(){
    if(this.activeName =="tab1"){
          this.option.height = 520;
            data: [],
        }
  },
  created() {
    this.initData();
  },
  computed: {
    ...mapGetters(["permission", "userInfo"]),
    // permissionList() {
    //   return {
    //     addBtn: this.vaildData(this.permission.social_add, true),
    //     viewBtn: this.vaildData(this.permission.social_view, false),
    //     delBtn: this.vaildData(this.permission.social_delete, false),
    //     editBtn: this.vaildData(this.permission.social_edit, false),
    //   };
    // },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  methods: {
    //初始化数据
    initData(){
      var that = this;
      //获取农地数据
      getLandList(this.userInfo.dept_id).then((res)=>{
          if(res.data.code==200){
              var landIdcolumn = that.findObject(that.option.column,"landId");
              that.landList = res.data.data;
              landIdcolumn.dicData = res.data.data;
          }
      })
      //获取农产品数据
      getStrainList(0).then((res)=>{
          if(res.data.code==200){
              var strainId = that.findObject(that.option.column,"strainId");
              strainId.dicData = res.data.data;
          }
      })
<<<<<<< HEAD

=======
 
>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
    watch: {
        // "form.farmType": {
        //   handler(val) {
        //     var splantcolumn = this.findObject(this.option.column,"plant");
        //     var plantingWaycolumn = this.findObject(this.option.column, "plantingWay");
        //     var jobWaycolumn = this.findObject(this.option.column, "jobWay");
        //     var transplanTimecolumn = this.findObject(this.option.column, "transplanTime");
        //     var recoveryTimecolumn = this.findObject(this.option.column, "recoveryTime");
        //     var percolumn = this.findObject(this.option.column, "per");
        //     var plantNumbercolumn = this.findObject(this.option.column, "plantNumber");
        //     var plantSpacingcolumn = this.findObject(this.option.column, "plantSpacing");
        //     var seedingTimecolumn = this.findObject(this.option.column, "seedingTime");
        //     var breedcolumn = this.findObject(this.option.column, "breed");
        //     // var landIdcolumn = this.findObject(this.option.column, "landId");
        //     // landIdcolumn.dicData = this.landList;
        //     if (val === '0') {
        //       //种职业
        //       splantcolumn.display = true;
        //       splantcolumn.label = "种植标准";
        //       plantingWaycolumn.display = true;
        //       plantingWaycolumn.label = "种植方式";
        //       plantingWaycolumn.dicData=[
        //           {
        //             label:"移栽",
        //             value:"0"
        //           },
        //           {
        //             label:"直播",
        //             value:"1"
        //           },
        //         ]
        //       jobWaycolumn.display = true;
        //       transplanTimecolumn.display = true;
        //       transplanTimecolumn.label="移栽时间";
        //       recoveryTimecolumn.display = true;
        //       recoveryTimecolumn.label="预计采收时间";
        //       percolumn.display = true;
        //       percolumn.label = "预计亩产";
        //       percolumn.rules=[
        //           {
        //             required: false,
        //             message: "请输入预计亩产",
        //             trigger: "blur",
        //           },
        //         ],
        //       plantNumbercolumn.display = true;
        //       plantSpacingcolumn.display = true;
        //       seedingTimecolumn.display = false;
        //       breedcolumn.display = false;
        //     } else if(val ==1){
        //       //水产业
        //       splantcolumn.display = false;
        //       plantingWaycolumn.display = false;
        //       jobWaycolumn.display = true;
        //       transplanTimecolumn.display = false;
        //       recoveryTimecolumn.display = false;
        //       percolumn.display = false;
        //       plantNumbercolumn.display = false;
        //       plantSpacingcolumn.display = false;
        //       seedingTimecolumn.display = true;
        //       breedcolumn.display = true;
        //     }else if(val ==2){
        //       //禽畜业
        //       splantcolumn.display = true;
        //       splantcolumn.label = "养殖标准";
        //       plantingWaycolumn.display = true;
        //       plantingWaycolumn.label = "养殖方式";
        //       plantingWaycolumn.dicData=[
        //           {
        //             label:"放养",
        //             value:"0"
        //           },
        //           {
        //             label:"圈养",
        //             value:"1"
        //           },
        //           {
        //             label:"放养+圈养",
        //             value:"2"
        //           },
        //         ]
        //       jobWaycolumn.display = true;
        //       transplanTimecolumn.display = true;
        //       transplanTimecolumn.label="养殖开始时间";
        //       recoveryTimecolumn.display = true;
        //       recoveryTimecolumn.label="预计出栏时间";
        //       percolumn.display = true;
        //       percolumn.label = "养殖数量";
        //       percolumn.rules=[
        //           {
        //             required: true,
        //             message: "请输入养殖数量",
        //             trigger: "blur",
        //           },
        //         ],
        //       plantNumbercolumn.display = false;
        //       plantSpacingcolumn.display = false;
        //       seedingTimecolumn.display = false;
        //       breedcolumn.display = false;
        //     }else{
        //       splantcolumn.display = false;
        //       plantingWaycolumn.display = false;
        //       jobWaycolumn.display = false;
        //       transplanTimecolumn.display = false;
        //       recoveryTimecolumn.display = false;
        //       percolumn.display = false;
        //       plantNumbercolumn.display = false;
        //       plantSpacingcolumn.display = false;
        //       seedingTimecolumn.display = false;
        //       breedcolumn.display = false;
        //     }
        //   },
        //   immediate: true
        // },
    },
    //新增
    rowSave(row, done, loading) {
      row['farmType'] = 0;
      row['createUser'] = this.userInfo.user_id;
      save(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    mounted () {
        if (this.activeName == "tab1") {
            this.option.height = 520
        }
    },
    created () {
        this.initData()
    },
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        // permissionList() {
        //   return {
        //     addBtn: this.vaildData(this.permission.social_add, true),
        //     viewBtn: this.vaildData(this.permission.social_view, false),
        //     delBtn: this.vaildData(this.permission.social_delete, false),
        //     editBtn: this.vaildData(this.permission.social_edit, false),
        //   };
        // },
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    //修改
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    methods: {
        //初始化数据
        initData () {
            var that = this
            //获取农地数据
            getLandList(this.userInfo.dept_id).then((res) => {
                if (res.data.code == 200) {
                    var landIdcolumn = that.findObject(that.option.column, "landId")
                    that.landList = res.data.data
                    landIdcolumn.dicData = res.data.data
                }
            })
            //获取农产品数据
            getStrainList(0).then((res) => {
                if (res.data.code == 200) {
                    var strainId = that.findObject(that.option.column, "strainId")
                    strainId.dicData = res.data.data
                }
            })
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
        //新增
        rowSave (row, done, loading) {
            row['farmType'] = 0
            row['createUser'] = this.userInfo.user_id
            save(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 = {}) {
            params['tenantId'] = this.userInfo.tenant_id
            params['deptId'] = this.userInfo.dept_id
            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()
            })
        },
        //检测报告
        handleDetection (row) {
            this.detectionVisible = true
            this.$nextTick(() => {
                this.$refs.detection.init(row.id)
            })
        },
    },
    //删除
    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 = {}) {
      params['tenantId'] = this.userInfo.tenant_id;
      params['deptId'] = this.userInfo.dept_id;
      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();
      });
    },
    //检测报告
    handleDetection(row){
      this.detectionVisible = true;
      this.$nextTick(() => {
        this.$refs.detection.init(row.id);
      });
    },
  },
};
</script>
 

 src/views/farmplant/farmproductstock copy.vue

@@ -1,371 +1,370 @@
<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
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
    <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
                    @click="handleDelete"
                >删 除</el-button>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import {
  getDetail,
  getList,
  update,
  remove,
  save,
} from "@/api/farmplant/farmproductstock";
import { getStrainList } from "@/api/farmplant/strain";
import { mapGetters } from "vuex";
    getDetail,
    getList,
    update,
    remove,
    save,
} from "@/api/farmplant/farmproductstock"
import { getStrainList } from "@/api/farmplant/strain"
import { mapGetters } from "vuex"
export default {
  data() {
    return {
      visible: true,
      form: {},
      query: {},
      loading: true,
      excelBox: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        height: "auto",
        editBtn: true,
        delBtn: true,
        viewBtn: true,
        menuWidth: 200,
        menuAlign: "center",
        align: "center",
        selection: true,
        column: [
          {
            label: "农产品名称",
            prop: "strainId",
            span: 12,
            search:true,
            searchSpan:4,
            searchLabelWidth:100,
            type: "tree",
            dicData: [],
            props: {
              label: "strainName",
              value: "id"
    data () {
        return {
            visible: true,
            form: {},
            query: {},
            loading: true,
            excelBox: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            labelWidth: 145,
            rules: [
              {
                required: true,
                message: "请输入农产品名称",
                trigger: "blur",
              },
            ],
            disabled:true,
          },
          {
            label: "农产品图片",
            prop: "url",
            span: 12,
            addDisplay:false,
            editDisplay:false,
            type: "upload",
            dataType: "string",
            listType: "picture-card",
            labelWidth: 145,
            rules: [
              {
                required: true,
                message: "请上传农产品图片",
                trigger: "click",
              },
            ],
          },
          {
            label: "库存重量/公斤",
            prop: "weight",
            tip: '公斤',
            span: 12,
            labelWidth: 145,
            controls:false,
            type:'number',
            rules: [
              {
                required: true,
                message: "请输入库存重量 公斤",
                trigger: "click",
              },
            ],
          },
          {
            label: "采收时间",
            prop: "time",
            addDisplay:false,
            editDisplay:false,
            span: 12,
            labelWidth: 145,
            type: "datetime",
            format: "yyyy-MM-dd HH:mm",
            valueFormat: "yyyy-MM-dd HH:mm",
            rules: [
              {
                required: true,
                message: "请选择采收时间",
                trigger: "click",
              },
            ],
          },
          // {
          //   label: "操作人",
          //   prop: "operator",
          //   type: "tree",
          //   dicData: [],
          //   props: {
          //     label: "realName",
          //     value: "id",
          //   },
          //   span: 12,
          //   labelWidth: 145,
          //   rules: [
          //     {
          //       required: true,
          //       message: "请输入操作人",
          //       trigger: "click",
          //     },
          //   ],
          // },
          {
            label: "产品等级",
            prop: "leaves",
            span: 12,
            labelWidth: 145,
            search:true,
            searchSpan:4,
            type: "select",
            dicData:[
              {
                label:"一等品",
                value:"0"
              },
              {
                label:"二等品",
                value:"1"
              },
              {
                label:"三等品",
                value:"2"
              },
              {
                label:"四等品",
                value:"3"
              },
              {
                label:"五等品",
                value:"4"
              },
            ],
            rules: [
              {
                required: true,
                message: "请输入产品等级",
                trigger: "click",
              },
            ],
          },
        ],
      },
      data: [],
    };
  },
  created() {
    this.initData();
    
  },
  computed: {
    ...mapGetters(["permission", "userInfo"]),
    // permissionList() {
    //   return {
    //     addBtn: this.vaildData(this.permission.social_add, true),
    //     viewBtn: this.vaildData(this.permission.social_view, false),
    //     delBtn: this.vaildData(this.permission.social_delete, false),
    //     editBtn: this.vaildData(this.permission.social_edit, false),
    //   };
    // },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  mounted() {},
  methods: {
    initData(){
      var that = this;
      //获取农产品数据
      getStrainList(0).then((res)=>{
          if(res.data.code==200){
              var strainId = that.findObject(that.option.column,"strainId");
              strainId.dicData = res.data.data;
          }
      })
    },
    //新增
    rowSave(row, done, loading) {
      row['strainType'] =0;
      save(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
            selectionList: [],
            option: {
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                height: "auto",
                editBtn: true,
                delBtn: true,
                viewBtn: true,
                menuWidth: 200,
                menuAlign: "center",
                align: "center",
                selection: true,
                column: [
                    {
                        label: "农产品名称",
                        prop: "strainId",
                        span: 12,
                        search: true,
                        searchSpan: 4,
                        searchLabelWidth: 100,
                        type: "tree",
                        dicData: [],
                        props: {
                            label: "strainName",
                            value: "id"
                        },
                        labelWidth: 145,
                        rules: [
                            {
                                required: true,
                                message: "请输入农产品名称",
                                trigger: "blur",
                            },
                        ],
                        disabled: true,
                    },
                    {
                        label: "农产品图片",
                        prop: "url",
                        span: 12,
                        addDisplay: false,
                        editDisplay: false,
                        type: "upload",
                        dataType: "string",
                        listType: "picture-card",
                        labelWidth: 145,
                        rules: [
                            {
                                required: true,
                                message: "请上传农产品图片",
                                trigger: "click",
                            },
                        ],
                    },
                    {
                        label: "库存重量/公斤",
                        prop: "weight",
                        tip: '公斤',
                        span: 12,
                        labelWidth: 145,
                        controls: false,
                        type: 'number',
                        rules: [
                            {
                                required: true,
                                message: "请输入库存重量 公斤",
                                trigger: "click",
                            },
                        ],
                    },
                    {
                        label: "采收时间",
                        prop: "time",
                        addDisplay: false,
                        editDisplay: false,
                        span: 12,
                        labelWidth: 145,
                        type: "datetime",
                        format: "yyyy-MM-dd HH:mm",
                        valueFormat: "yyyy-MM-dd HH:mm",
                        rules: [
                            {
                                required: true,
                                message: "请选择采收时间",
                                trigger: "click",
                            },
                        ],
                    },
                    // {
                    //   label: "操作人",
                    //   prop: "operator",
                    //   type: "tree",
                    //   dicData: [],
                    //   props: {
                    //     label: "realName",
                    //     value: "id",
                    //   },
                    //   span: 12,
                    //   labelWidth: 145,
                    //   rules: [
                    //     {
                    //       required: true,
                    //       message: "请输入操作人",
                    //       trigger: "click",
                    //     },
                    //   ],
                    // },
                    {
                        label: "产品等级",
                        prop: "leaves",
                        span: 12,
                        labelWidth: 145,
                        search: true,
                        searchSpan: 4,
                        type: "select",
                        dicData: [
                            {
                                label: "一等品",
                                value: "0"
                            },
                            {
                                label: "二等品",
                                value: "1"
                            },
                            {
                                label: "三等品",
                                value: "2"
                            },
                            {
                                label: "四等品",
                                value: "3"
                            },
                            {
                                label: "五等品",
                                value: "4"
                            },
                        ],
                        rules: [
                            {
                                required: true,
                                message: "请输入产品等级",
                                trigger: "click",
                            },
                        ],
                    },
                ],
            },
            data: [],
        }
      );
    },
    //修改
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    created () {
        this.initData()

    },
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        // permissionList() {
        //   return {
        //     addBtn: this.vaildData(this.permission.social_add, true),
        //     viewBtn: this.vaildData(this.permission.social_view, false),
        //     delBtn: this.vaildData(this.permission.social_delete, false),
        //     editBtn: this.vaildData(this.permission.social_edit, false),
        //   };
        // },
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
        (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: "操作成功!",
          });
        });
    mounted () { },
    methods: {
        initData () {
            var that = this
            //获取农产品数据
            getStrainList(0).then((res) => {
                if (res.data.code == 200) {
                    var strainId = that.findObject(that.option.column, "strainId")
                    strainId.dicData = res.data.data
                }
            })
        },
        //新增
        rowSave (row, done, loading) {
            row['strainType'] = 0
            save(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()
            })
        },
    },
    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>


 src/views/farmplant/farmproductstock.vue

@@ -1,6 +1,6 @@
<template>
  <div class="body">
    <!-- <div class="search">
    <div class="body">
        <!-- <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
@@ -15,1017 +15,1033 @@
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="table">
      <div class="content">
        <div class="farm" v-for="(item, index) in data" :key="index">
          <div class="farm-img"><img :src="item.url" class="img"/></div>
          <!-- <div class="farm-img">
        </div>-->
        <div class="table">
            <div class="content">
                <div class="farm" v-for="(item, index) in data" :key="index">
                    <div class="farm-img">
                        <img :src="item.url" class="img" />
                    </div>
                    <!-- <div class="farm-img">
            <img src="../../../public/img/map.png" class="img" />
          </div> -->
          <div class="cai">{{ item.strainName }}</div>
          <div class="area">库存量：<span>{{ item.weight }}</span>公斤</div>
          <div class="btn">
            <el-button style="width: 65px;" plain size="small" @click="openWindow(0,item)">
              <span style="color: #5abf78">销售</span></el-button
            >
            <el-button style="width: 65px;padding-left:8px" plain size="small" @click="openWindow(1,item)">
              <span>库存损耗</span>
            </el-button
            >
          </div>
          <div class="btn">
            <el-button style="width: 65px;" plain size="small" @click="openWindow(3,item)"
            ><span style="color: #5abf78">出库</span>
            </el-button>
            <el-button style="width: 65px;" plain size="small" @click="openWindow(2,item)">
              加工
            </el-button>
          </div>
                    </div>-->
                    <div class="cai">{{ item.strainName }}</div>
                    <div class="area">
                        库存量：
                        <span>{{ item.weight }}</span>公斤
                    </div>
                    <div class="btn">
                        <el-button
                            style="width: 65px;"
                            plain
                            size="small"
                            @click="openWindow(0,item)"
                        >
                            <span style="color: #5abf78">销售</span>
                        </el-button>
                        <el-button
                            style="width: 65px;padding-left:8px"
                            plain
                            size="small"
                            @click="openWindow(1,item)"
                        >
                            <span>库存损耗</span>
                        </el-button>
                    </div>
                    <div class="btn">
                        <el-button
                            style="width: 65px;"
                            plain
                            size="small"
                            @click="openWindow(3,item)"
                        >
                            <span style="color: #5abf78">出库</span>
                        </el-button>
                        <el-button
                            style="width: 65px;"
                            plain
                            size="small"
                            @click="openWindow(2,item)"
                        >加工</el-button>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
    <div class="el-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :hide-on-single-page="value"
        :page-size="page.pageSize"
        background
        layout="total, prev, pager, next"
        :total="page.total"
      >
      </el-pagination>
    </div>
    <!--销售-->
    <el-dialog
      title="农产品销售"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      :before-close="cleanData"
      @close="close"
      width="30%"
      :visible.sync="visible"
      center
    >
      <!--      <el-form :model="form" label-width="auto">-->
      <!--        <el-form-item label="种养品种" required>-->
      <!--          <el-input disabled v-model="form.strainName"></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="销售时间" required>-->
      <!--          <el-date-picker v-model="form.saleTime" type="date" placeholder="请选择销售时间"-->
      <!--                          style="width: 100%;"></el-date-picker>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="销售数量" required style="margin-bottom: 0px">-->
      <!--          <el-input type="number" required="required" v-model="form.saleNum"><i slot="suffix"-->
      <!--                                                                                style="font-style:normal;margin-right: 10px;">公斤</i>-->
      <!--          </el-input>-->
      <!--          <div style="text-align: right;color: #ffb218">可销售量：{{form.weight}}公斤</div>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="销售去向" required>-->
      <!--          <el-cascader-->
      <!--            style="width: 100%;"-->
      <!--            placeholder="请选择销售去向"-->
      <!--            size="large"-->
      <!--            :options="options"-->
      <!--            v-model="selectedOptions">-->
      <!--          </el-cascader>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="销售价格">-->
      <!--          <el-input type="number" v-model="form.salePrice"><i slot="suffix"-->
      <!--                                                              style="font-style:normal;margin-right: 10px;">元/公斤</i>-->
      <!--          </el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="品牌">-->
      <!--          <el-input v-model="form.saleBrand"></el-input>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="操作人" required>-->
      <!--          <el-tag type="success">{{form.name}}</el-tag>-->
      <!--        </el-form-item>-->
      <!--        <div style="text-align: center">-->
      <!--          <el-button style="width: 120px" type="success" plain>销售</el-button>-->
      <!--        </div>-->
      <!--      </el-form>-->
      <avue-form ref="form" v-model="form" :option="option">
        <template slot-scope="{disabled,size}" slot="name">
          <div>
            <el-tag type="success">{{ form.name }}</el-tag>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="saleDestination">
          <div>
            <el-cascader
              style="width: 100%;"
              placeholder="请选择销售去向"
              size="large"
              :options="options"
              @change="handleChange"
              v-model="saleDestination">
            </el-cascader>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="saleNum">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入销售数量" v-model="form.saleNum"><i slot="suffix"
                                                                                    style="font-style:normal;margin-right: 5px;">公斤</i>
            </el-input>
            <div style="text-align: right;color: #ffb218">可销售量：{{ form.weight }}公斤</div>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="salePrice">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入销售价格" v-model="form.salePrice"><i slot="suffix"
                                                                                      style="font-style:normal;margin-right: 5px;">元/公斤</i>
            </el-input>
          </div>
        </template>
        <template slot="menuForm">
          <div style="text-align: center">
            <el-button style="width: 120px" type="success" plain @click="submitSole">销售</el-button>
          </div>
        </template>
      </avue-form>
    </el-dialog>
    <!--库存-->
    <el-dialog
      title="农产品库存损耗"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="close"
      width="30%"
      :before-close="cleanKCData"
      :visible.sync="visibleKC"
      center
    >
      <avue-form ref="form" v-model="formKC" :option="optionKC">
        <template slot-scope="{disabled,size}" slot="name">
          <div>
            <el-tag type="success">{{ formKC.name }}</el-tag>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="saleNum">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入损耗数量" v-model="formKC.saleNum"><i slot="suffix"
                                                                                      style="font-style:normal;margin-right: 5px;">公斤</i>
            </el-input>
            <div style="text-align: right;color: #ffb218">库存量：{{ formKC.weight }}公斤</div>
          </div>
        </template>
        <template slot="menuForm">
          <div style="text-align: center">
            <el-button style="width: 80px" plain @click="cleanKCData">取消</el-button>
            <el-button style="width: 80px" type="success" plain @click="submitKCloss">确认</el-button>
          </div>
        </template>
      </avue-form>
    </el-dialog>
    <!--加工-->
    <el-dialog
      title="加工产品"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="close"
      width="30%"
      :before-close="cleanJGData"
      :visible.sync="visibleJG"
      center
    >
      <avue-form ref="form" v-model="formJG" :option="optionJG">
        <template slot-scope="{disabled,size}" slot="name">
          <div>
            <el-tag type="success">{{ formJG.name }}</el-tag>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="saleNum">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入加工数量" v-model="formJG.saleNum"><i slot="suffix"
                                                                                      style="font-style:normal;margin-right: 5px;">公斤</i>
            </el-input>
            <div style="text-align: right;color: #ffb218">库存量：{{ formJG.weight }}公斤</div>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="processNum">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入产品数量" v-model="formJG.processNum"><i slot="suffix"
                                                                                         style="font-style:normal;margin-right: 5px;">公斤</i>
            </el-input>
          </div>
        </template>
        <template slot="menuForm">
          <div style="text-align: center">
            <el-button style="width: 80px" plain @click="cleanKCData">取消</el-button>
            <el-button style="width: 80px" type="success" plain @click="submitJGloss">确认</el-button>
          </div>
        </template>
      </avue-form>
    </el-dialog>
    <!--出库-->
    <el-dialog
      title="出库产品"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      :before-close="cleanCKData"
      @close="close"
      width="30%"
      :visible.sync="visibleCK"
      center
    >
      <avue-form ref="form" v-model="formCK" :option="optionCK">
        <template slot-scope="{disabled,size}" slot="name">
          <div>
            <el-tag type="success">{{ formCK.name }}</el-tag>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="saleDestination">
          <div>
            <el-cascader
              style="width: 100%;"
              placeholder="请选择出库去向"
              size="large"
              :options="optionck"
              @change="handleChangeck"
              v-model="saleDestination">
            </el-cascader>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="saleNum">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入出库数量" v-model="formCK.saleNum"><i slot="suffix"
                                                                                      style="font-style:normal;margin-right: 5px;">公斤</i>
            </el-input>
            <div style="text-align: right;color: #ffb218">可出库量：{{ formCK.weight }}公斤</div>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="salePrice">
          <!--          <div style="margin-bottom: -20px">
        <div class="el-page">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :hide-on-single-page="value"
                :page-size="page.pageSize"
                background
                layout="total, prev, pager, next"
                :total="page.total"
            ></el-pagination>
        </div>
        <!--销售-->
        <el-dialog
            title="农产品销售"
            :modal-append-to-body="false"
            :append-to-body="true"
            :close-on-click-modal="false"
            :before-close="cleanData"
            @close="close"
            width="30%"
            :visible.sync="visible"
            center
        >
            <!--      <el-form :model="form" label-width="auto">-->
            <!--        <el-form-item label="种养品种" required>-->
            <!--          <el-input disabled v-model="form.strainName"></el-input>-->
            <!--        </el-form-item>-->
            <!--        <el-form-item label="销售时间" required>-->
            <!--          <el-date-picker v-model="form.saleTime" type="date" placeholder="请选择销售时间"-->
            <!--                          style="width: 100%;"></el-date-picker>-->
            <!--        </el-form-item>-->
            <!--        <el-form-item label="销售数量" required style="margin-bottom: 0px">-->
            <!--          <el-input type="number" required="required" v-model="form.saleNum"><i slot="suffix"-->
            <!--                                                                                style="font-style:normal;margin-right: 10px;">公斤</i>-->
            <!--          </el-input>-->
            <!--          <div style="text-align: right;color: #ffb218">可销售量：{{form.weight}}公斤</div>-->
            <!--        </el-form-item>-->
            <!--        <el-form-item label="销售去向" required>-->
            <!--          <el-cascader-->
            <!--            style="width: 100%;"-->
            <!--            placeholder="请选择销售去向"-->
            <!--            size="large"-->
            <!--            :options="options"-->
            <!--            v-model="selectedOptions">-->
            <!--          </el-cascader>-->
            <!--        </el-form-item>-->
            <!--        <el-form-item label="销售价格">-->
            <!--          <el-input type="number" v-model="form.salePrice"><i slot="suffix"-->
            <!--                                                              style="font-style:normal;margin-right: 10px;">元/公斤</i>-->
            <!--          </el-input>-->
            <!--        </el-form-item>-->
            <!--        <el-form-item label="品牌">-->
            <!--          <el-input v-model="form.saleBrand"></el-input>-->
            <!--        </el-form-item>-->
            <!--        <el-form-item label="操作人" required>-->
            <!--          <el-tag type="success">{{form.name}}</el-tag>-->
            <!--        </el-form-item>-->
            <!--        <div style="text-align: center">-->
            <!--          <el-button style="width: 120px" type="success" plain>销售</el-button>-->
            <!--        </div>-->
            <!--      </el-form>-->
            <avue-form ref="form" v-model="form" :option="option">
                <template slot-scope="{disabled,size}" slot="name">
                    <div>
                        <el-tag type="success">{{ form.name }}</el-tag>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="saleDestination">
                    <div>
                        <el-cascader
                            style="width: 100%;"
                            placeholder="请选择销售去向"
                            size="large"
                            :options="options"
                            @change="handleChange"
                            v-model="saleDestination"
                        ></el-cascader>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="saleNum">
                    <div style="margin-bottom: -20px">
                        <el-input type="number" placeholder="请输入销售数量" v-model="form.saleNum">
                            <i slot="suffix" style="font-style:normal;margin-right: 5px;">公斤</i>
                        </el-input>
                        <div style="text-align: right;color: #ffb218">可销售量：{{ form.weight }}公斤</div>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="salePrice">
                    <div style="margin-bottom: -20px">
                        <el-input type="number" placeholder="请输入销售价格" v-model="form.salePrice">
                            <i slot="suffix" style="font-style:normal;margin-right: 5px;">元/公斤</i>
                        </el-input>
                    </div>
                </template>
                <template slot="menuForm">
                    <div style="text-align: center">
                        <el-button style="width: 120px" type="success" plain @click="submitSole">销售</el-button>
                    </div>
                </template>
            </avue-form>
        </el-dialog>
        <!--库存-->
        <el-dialog
            title="农产品库存损耗"
            :modal-append-to-body="false"
            :append-to-body="true"
            :close-on-click-modal="false"
            @close="close"
            width="30%"
            :before-close="cleanKCData"
            :visible.sync="visibleKC"
            center
        >
            <avue-form ref="form" v-model="formKC" :option="optionKC">
                <template slot-scope="{disabled,size}" slot="name">
                    <div>
                        <el-tag type="success">{{ formKC.name }}</el-tag>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="saleNum">
                    <div style="margin-bottom: -20px">
                        <el-input type="number" placeholder="请输入损耗数量" v-model="formKC.saleNum">
                            <i slot="suffix" style="font-style:normal;margin-right: 5px;">公斤</i>
                        </el-input>
                        <div style="text-align: right;color: #ffb218">库存量：{{ formKC.weight }}公斤</div>
                    </div>
                </template>
                <template slot="menuForm">
                    <div style="text-align: center">
                        <el-button style="width: 80px" plain @click="cleanKCData">取消</el-button>
                        <el-button style="width: 80px" type="success" plain @click="submitKCloss">确认</el-button>
                    </div>
                </template>
            </avue-form>
        </el-dialog>
        <!--加工-->
        <el-dialog
            title="加工产品"
            :modal-append-to-body="false"
            :append-to-body="true"
            :close-on-click-modal="false"
            @close="close"
            width="30%"
            :before-close="cleanJGData"
            :visible.sync="visibleJG"
            center
        >
            <avue-form ref="form" v-model="formJG" :option="optionJG">
                <template slot-scope="{disabled,size}" slot="name">
                    <div>
                        <el-tag type="success">{{ formJG.name }}</el-tag>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="saleNum">
                    <div style="margin-bottom: -20px">
                        <el-input type="number" placeholder="请输入加工数量" v-model="formJG.saleNum">
                            <i slot="suffix" style="font-style:normal;margin-right: 5px;">公斤</i>
                        </el-input>
                        <div style="text-align: right;color: #ffb218">库存量：{{ formJG.weight }}公斤</div>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="processNum">
                    <div style="margin-bottom: -20px">
                        <el-input type="number" placeholder="请输入产品数量" v-model="formJG.processNum">
                            <i slot="suffix" style="font-style:normal;margin-right: 5px;">公斤</i>
                        </el-input>
                    </div>
                </template>
                <template slot="menuForm">
                    <div style="text-align: center">
                        <el-button style="width: 80px" plain @click="cleanKCData">取消</el-button>
                        <el-button style="width: 80px" type="success" plain @click="submitJGloss">确认</el-button>
                    </div>
                </template>
            </avue-form>
        </el-dialog>
        <!--出库-->
        <el-dialog
            title="出库产品"
            :modal-append-to-body="false"
            :append-to-body="true"
            :close-on-click-modal="false"
            :before-close="cleanCKData"
            @close="close"
            width="30%"
            :visible.sync="visibleCK"
            center
        >
            <avue-form ref="form" v-model="formCK" :option="optionCK">
                <template slot-scope="{disabled,size}" slot="name">
                    <div>
                        <el-tag type="success">{{ formCK.name }}</el-tag>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="saleDestination">
                    <div>
                        <el-cascader
                            style="width: 100%;"
                            placeholder="请选择出库去向"
                            size="large"
                            :options="optionck"
                            @change="handleChangeck"
                            v-model="saleDestination"
                        ></el-cascader>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="saleNum">
                    <div style="margin-bottom: -20px">
                        <el-input type="number" placeholder="请输入出库数量" v-model="formCK.saleNum">
                            <i slot="suffix" style="font-style:normal;margin-right: 5px;">公斤</i>
                        </el-input>
                        <div style="text-align: right;color: #ffb218">可出库量：{{ formCK.weight }}公斤</div>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="salePrice">
                    <!--          <div style="margin-bottom: -20px">
                      <el-input type="number" placeholder="请输入销售价格" v-model="formCK.salePrice"><i slot="suffix"
                                                                                                style="font-style:normal;margin-right: 5px;">元/公斤</i>
                      </el-input>
                    </div>-->
        </template>
        <template slot="menuForm">
          <div style="text-align: center">
            <el-button style="width: 120px" type="success" plain @click="submitCK">出库</el-button>
          </div>
        </template>
      </avue-form>
    </el-dialog>
  </div>

                </template>
                <template slot="menuForm">
                    <div style="text-align: center">
                        <el-button style="width: 120px" type="success" plain @click="submitCK">出库</el-button>
                    </div>
                </template>
            </avue-form>
        </el-dialog>
    </div>
</template>

<script>
import {
  getDetail,
  getList,
  update,
  remove,
  save,
} from "@/api/farmplant/farmproductstock";
    getDetail,
    getList,
    update,
    remove,
    save,
} from "@/api/farmplant/farmproductstock"

import {
  add, addKC
} from "@/api/sale/sale";
    add, addKC
} from "@/api/sale/sale"

import {
  addjg
} from "@/api/process/process";
    addjg
} from "@/api/process/process"

import {
  addck
} from "@/api/retrieval/retrieval";
import {mapGetters} from "vuex";
import {regionData} from 'element-china-area-data'
    addck
} from "@/api/retrieval/retrieval"
import { mapGetters } from "vuex"
import { regionData } from 'element-china-area-data'

export default {
  data() {
    return {
      options: regionData,
      optionck: regionData,
      formInline: {
        user: "",
        region: "",
      },
      form: {
        name: "",
        proid: "",
        landId: "",
        strainId: "",
        saleTime: "",
        saleNum: "",
        saleDestination: "",
        city: "",
        county: "",
        salePrice: "",
        createUser: "",
        saleBrand: "",
      },
      //出库
      formCK: {
        name: "",
        proid: "",
        landId: "",
        strainId: "",
        saleTime: "",
        saleNum: "",
        saleDestination: "",
        city: "",
        county: "",
        createUser: "",
        remarks: "",
      },
      //损耗字段
      formKC: {
        name: "",
        proid: "",
        landId: "",
        strainId: "",
        saleNum: "",
        remarks: "",
        reason: "0",
        lossTime: "",
      },
      //加工字段
      formJG: {
        name: "",
        proid: "",
        landId: "",
        strainId: "",
        saleNum: "",
        processNum: "",
        remarks: "",
        reason: "0",
        saleTime: "",
      },
      visible: false,
      visibleCK: false,
      visibleKC: false,
      visibleJG: false,
      value: true,
      page: {
        pageSize: 16,
        currentPage: 1,
        total: 0,
      },
      option: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 30,
        column: [
          {
            label: "种养品种",
            prop: "strainName",
            span: 24,
            disabled: true,
            rules: [
              {
                required: true,
                message: "请输入种养品种",
                trigger: "blur",
              },
            ],
          },
          {
            label: "销售时间",
            prop: "saleTime",
            type: "date",
            span: 24,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [
              {
                required: true,
                message: "请选择销售时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "销售数量",
            prop: "saleNum",
            type: "number",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入销售数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "销售去向",
            prop: "saleDestination",
            span: 24,
            rules: [
              {
                required: true,
                message: "请选择销售去向",
                trigger: "blur",
              },
            ],
          },
          {
            label: "销售价格",
            prop: "salePrice",
            span: 24,
            type: "number",
          },
          {
            label: "品牌",
            prop: "saleBrand",
            span: 24,
          },
          {
            label: "操作人",
            prop: "name",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入操作人",
                trigger: "blur",
              },
            ],
          },
        ]
      },
      optionKC: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 30,
        column: [
          {
            label: "损耗品种",
            prop: "strainName",
            span: 24,
            disabled: true,
            rules: [
              {
                required: true,
                message: "请输入损耗品种",
                trigger: "blur",
              },
            ],
          },
          {
            label: "损耗时间",
            prop: "lossTime",
            type: "date",
            span: 24,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [
              {
                required: true,
                message: "请选择损耗时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "损耗数量",
            prop: "saleNum",
            type: "number",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入损耗数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "损耗原因",
            prop: "reason",
            span: 24,
            type: "select",
            value: "0",
            dicData: [
              {
                label: "库存损耗",
                value: "0",
              }],
            rules: [
              {
                required: true,
                message: "请选择损耗原因",
                trigger: "blur",
              },
            ],
          },
          {
            label: "备注",
            prop: "remarks",
            span: 24,
          },
          {
            label: "操作人",
            prop: "name",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入操作人",
                trigger: "blur",
              },
            ],
          },
        ]
      },
      optionJG: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 30,
        column: [
          {
            label: "加工品种",
            prop: "strainName",
            span: 24,
            disabled: true,
            rules: [
              {
                required: true,
                message: "请输入加工品种",
                trigger: "blur",
              },
            ],
          },
          {
            label: "加工时间",
            prop: "saleTime",
            type: "date",
            span: 24,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [
              {
                required: true,
                message: "请选择加工时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "加工数量",
            prop: "saleNum",
            type: "number",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入加工数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "加工产品",
            prop: "processId",
            span: 24,
            type: "tree",
            dicUrl: "/api/machining/machining/selectInfo",
            props: {
              label: "processName",
              value: "processId"
    data () {
        return {
            options: regionData,
            optionck: regionData,
            formInline: {
                user: "",
                region: "",
            },
            rules: [
              {
                required: true,
                message: "请输入加工产品",
                trigger: "blur",
              },
            ],
          },
          {
            label: "产品数量",
            prop: "processNum",
            type: "number",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入产品数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "备注",
            prop: "remarks",
            span: 24,
          },
          {
            label: "操作人",
            prop: "name",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入操作人",
                trigger: "blur",
              },
            ],
          },
        ]
      },
      optionCK: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 30,
        column: [
          {
            label: "出库品种",
            prop: "strainName",
            span: 24,
            disabled: true,
            rules: [
              {
                required: true,
                message: "请输入出库品种",
                trigger: "blur",
              },
            ],
          },
          {
            label: "出库时间",
            prop: "saleTime",
            type: "date",
            span: 24,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [
              {
                required: true,
                message: "请选择出库时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "出库数量",
            prop: "saleNum",
            type: "number",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入出库数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "出库去向",
            prop: "saleDestination",
            span: 24,
            rules: [
              {
                required: true,
                message: "请选择出库去向",
                trigger: "blur",
              },
            ],
          },
          {
            label: "备注",
            prop: "remarks",
            span: 24,
          },
          {
            label: "操作人",
            prop: "name",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入操作人",
                trigger: "blur",
              },
            ],
          },
        ]
      },
      selectionList: [],
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission", "userInfo"]),
    // permissionList() {
    //   return {
    //     addBtn: this.vaildData(this.permission.social_add, true),
    //     viewBtn: this.vaildData(this.permission.social_view, false),
    //     delBtn: this.vaildData(this.permission.social_delete, false),
    //     editBtn: this.vaildData(this.permission.social_edit, false),
    //   };
    // },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  mounted() {
  },
  created() {
    this.initData();
    //初始化列表数据
    this.onLoad(this.page);
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    //销售
    submitSole() {
      var that = this;
      this.$refs.form.validate((vaild, done) => {
        if (vaild) {
          add(this.form).then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            //提交完成，关闭窗口清空数据
            that.cleanData();
            done();
          }, error => {
            window.console.log(error);
            //提交失败，关闭窗口清空数据
            that.cleanData();
            done();
          });
            form: {
                name: "",
                proid: "",
                landId: "",
                strainId: "",
                saleTime: "",
                saleNum: "",
                saleDestination: "",
                city: "",
                county: "",
                salePrice: "",
                createUser: "",
                saleBrand: "",
            },
            //出库
            formCK: {
                name: "",
                proid: "",
                landId: "",
                strainId: "",
                saleTime: "",
                saleNum: "",
                saleDestination: "",
                city: "",
                county: "",
                createUser: "",
                remarks: "",
            },
            //损耗字段
            formKC: {
                name: "",
                proid: "",
                landId: "",
                strainId: "",
                saleNum: "",
                remarks: "",
                reason: "0",
                lossTime: "",
            },
            //加工字段
            formJG: {
                name: "",
                proid: "",
                landId: "",
                strainId: "",
                saleNum: "",
                processNum: "",
                remarks: "",
                reason: "0",
                saleTime: "",
            },
            visible: false,
            visibleCK: false,
            visibleKC: false,
            visibleJG: false,
            value: true,
            page: {
                pageSize: 16,
                currentPage: 1,
                total: 0,
            },
            option: {
                emptyBtn: false,
                submitBtn: false,
                gutter: 30,
                column: [
                    {
                        label: "种养品种",
                        prop: "strainName",
                        span: 24,
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入种养品种",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "销售时间",
                        prop: "saleTime",
                        type: "date",
                        span: 24,
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        rules: [
                            {
                                required: true,
                                message: "请选择销售时间",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "销售数量",
                        prop: "saleNum",
                        type: "number",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入销售数量",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "销售去向",
                        prop: "saleDestination",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请选择销售去向",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "销售价格",
                        prop: "salePrice",
                        span: 24,
                        type: "number",
                    },
                    {
                        label: "品牌",
                        prop: "saleBrand",
                        span: 24,
                    },
                    {
                        label: "操作人",
                        prop: "name",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入操作人",
                                trigger: "blur",
                            },
                        ],
                    },
                ]
            },
            optionKC: {
                emptyBtn: false,
                submitBtn: false,
                gutter: 30,
                column: [
                    {
                        label: "损耗品种",
                        prop: "strainName",
                        span: 24,
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入损耗品种",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "损耗时间",
                        prop: "lossTime",
                        type: "date",
                        span: 24,
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        rules: [
                            {
                                required: true,
                                message: "请选择损耗时间",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "损耗数量",
                        prop: "saleNum",
                        type: "number",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入损耗数量",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "损耗原因",
                        prop: "reason",
                        span: 24,
                        type: "select",
                        value: "0",
                        dicData: [
                            {
                                label: "库存损耗",
                                value: "0",
                            }],
                        rules: [
                            {
                                required: true,
                                message: "请选择损耗原因",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        span: 24,
                    },
                    {
                        label: "操作人",
                        prop: "name",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入操作人",
                                trigger: "blur",
                            },
                        ],
                    },
                ]
            },
            optionJG: {
                emptyBtn: false,
                submitBtn: false,
                gutter: 30,
                column: [
                    {
                        label: "加工品种",
                        prop: "strainName",
                        span: 24,
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入加工品种",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "加工时间",
                        prop: "saleTime",
                        type: "date",
                        span: 24,
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        rules: [
                            {
                                required: true,
                                message: "请选择加工时间",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "加工数量",
                        prop: "saleNum",
                        type: "number",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入加工数量",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "加工产品",
                        prop: "processId",
                        span: 24,
                        type: "tree",
                        dicUrl: "/api/machining/machining/selectInfo",
                        props: {
                            label: "processName",
                            value: "processId"
                        },
                        rules: [
                            {
                                required: true,
                                message: "请输入加工产品",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "产品数量",
                        prop: "processNum",
                        type: "number",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入产品数量",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        span: 24,
                    },
                    {
                        label: "操作人",
                        prop: "name",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入操作人",
                                trigger: "blur",
                            },
                        ],
                    },
                ]
            },
            optionCK: {
                emptyBtn: false,
                submitBtn: false,
                gutter: 30,
                column: [
                    {
                        label: "出库品种",
                        prop: "strainName",
                        span: 24,
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入出库品种",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "出库时间",
                        prop: "saleTime",
                        type: "date",
                        span: 24,
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        rules: [
                            {
                                required: true,
                                message: "请选择出库时间",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "出库数量",
                        prop: "saleNum",
                        type: "number",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入出库数量",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "出库去向",
                        prop: "saleDestination",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请选择出库去向",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        span: 24,
                    },
                    {
                        label: "操作人",
                        prop: "name",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入操作人",
                                trigger: "blur",
                            },
                        ],
                    },
                ]
            },
            selectionList: [],
            data: [],
        }
      })
    },
    //加工产品
    submitJGloss() {
      var that = this;
      this.$refs.form.validate((vaild, done) => {
        if (vaild) {
          addjg(this.formJG).then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            //提交完成，关闭窗口清空数据
            that.cleanJGData();
            done();
          }, error => {
            window.console.log(error);
            //提交失败，关闭窗口清空数据
            that.cleanJGData();
            done();
          });
        }
      })
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        // permissionList() {
        //   return {
        //     addBtn: this.vaildData(this.permission.social_add, true),
        //     viewBtn: this.vaildData(this.permission.social_view, false),
        //     delBtn: this.vaildData(this.permission.social_delete, false),
        //     editBtn: this.vaildData(this.permission.social_edit, false),
        //   };
        // },
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
    },
    //库存消耗
    submitKCloss() {
      var that = this;
      this.$refs.form.validate((vaild, done) => {
        if (vaild) {
          addKC(this.formKC).then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            //提交完成，关闭窗口清空数据
            that.cleanKCData();
            done();
          }, error => {
            window.console.log(error);
            //提交失败，关闭窗口清空数据
            that.cleanKCData();
            done();
          });
        }
      })
    mounted () {
    },
    //出库
    submitCK() {
      var that = this;
      this.$refs.form.validate((vaild, done) => {
        if (vaild) {
          addck(this.formCK).then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            //提交完成，关闭窗口清空数据
            that.cleanCKData();
            done();
          }, error => {
            window.console.log(error);
            //提交失败，关闭窗口清空数据
            that.cleanCKData();
            done();
          });
        }
      })
    created () {
        this.initData()
        //初始化列表数据
        this.onLoad(this.page)
    },
    handleChange(value) {
      if (value != null) {
        this.form.saleDestination = value[0];
        this.form.city = value[1];
        this.form.county = value[2];
      }
    methods: {
        onSubmit () {
            console.log("submit!")
        },
        //销售
        submitSole () {
            var that = this
            this.$refs.form.validate((vaild, done) => {
                if (vaild) {
                    add(this.form).then(() => {
                        this.onLoad(this.page)
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        })
                        //提交完成，关闭窗口清空数据
                        that.cleanData()
                        done()
                    }, error => {
                        window.console.log(error)
                        //提交失败，关闭窗口清空数据
                        that.cleanData()
                        done()
                    })
                }
            })
        },
        //加工产品
        submitJGloss () {
            var that = this
            this.$refs.form.validate((vaild, done) => {
                if (vaild) {
                    addjg(this.formJG).then(() => {
                        this.onLoad(this.page)
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        })
                        //提交完成，关闭窗口清空数据
                        that.cleanJGData()
                        done()
                    }, error => {
                        window.console.log(error)
                        //提交失败，关闭窗口清空数据
                        that.cleanJGData()
                        done()
                    })
                }
            })
        },
        //库存消耗
        submitKCloss () {
            var that = this
            this.$refs.form.validate((vaild, done) => {
                if (vaild) {
                    addKC(this.formKC).then(() => {
                        this.onLoad(this.page)
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        })
                        //提交完成，关闭窗口清空数据
                        that.cleanKCData()
                        done()
                    }, error => {
                        window.console.log(error)
                        //提交失败，关闭窗口清空数据
                        that.cleanKCData()
                        done()
                    })
                }
            })
        },
        //出库
        submitCK () {
            var that = this
            this.$refs.form.validate((vaild, done) => {
                if (vaild) {
                    addck(this.formCK).then(() => {
                        this.onLoad(this.page)
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        })
                        //提交完成，关闭窗口清空数据
                        that.cleanCKData()
                        done()
                    }, error => {
                        window.console.log(error)
                        //提交失败，关闭窗口清空数据
                        that.cleanCKData()
                        done()
                    })
                }
            })
        },
        handleChange (value) {
            if (value != null) {
                this.form.saleDestination = value[0]
                this.form.city = value[1]
                this.form.county = value[2]
            }
        },
        handleChangeck (value) {
            if (value != null) {
                this.formCK.saleDestination = value[0]
                this.formCK.city = value[1]
                this.formCK.county = value[2]
            }
        },
        initData () {
            // var that = this;
            //获取农产品数据
            // getStrainList(0).then((res) => {
            //   if (res.data.code == 200) {
            //     var strainId = that.findObject(that.option.column, "strainId");
            //     strainId.dicData = res.data.data;
            //   }
            // });
        },
        openWindow (index, data) {
            if (index == 0) {
                this.form.name = this.userInfo.nick_name
                this.form.createUser = this.userInfo.user_id
                this.form.weight = data.weight
                this.form.proid = data.id
                this.form.landId = data.landId
                this.form.strainId = data.strainId
                this.form.strainName = data.strainName
                this.visible = true
            } else if (index == 1) {
                this.formKC.name = this.userInfo.nick_name
                this.formKC.createUser = this.userInfo.user_id
                this.formKC.weight = data.weight
                this.formKC.proid = data.id
                this.formKC.landId = data.landId
                this.formKC.strainId = data.strainId
                this.formKC.strainName = data.strainName
                this.visibleKC = true
            } else if (index == 2) {
                this.formJG.name = this.userInfo.nick_name
                this.formJG.createUser = this.userInfo.user_id
                this.formJG.proid = data.id
                this.formJG.landId = data.landId
                this.formJG.weight = data.weight
                this.formJG.strainId = data.strainId
                this.formJG.strainName = data.strainName
                this.visibleJG = true
            } else if (index == 3) {
                this.formCK.name = this.userInfo.nick_name
                this.formCK.createUser = this.userInfo.user_id
                this.formCK.weight = data.weight
                this.formCK.proid = data.id
                this.formCK.landId = data.landId
                this.formCK.strainId = data.strainId
                this.formCK.strainName = data.strainName
                this.visibleCK = true
            }
        },
        cleanData () {
            var that = this
            that.form.saleDestination = ""
            that.$refs.form.resetFields()
            that.visible = false
        },
        cleanCKData () {
            var that = this
            that.formCK.saleDestination = ""
            that.$refs.form.resetFields()
            that.visibleCK = false
        },
        cleanKCData () {
            var that = this
            that.$refs.form.resetFields()
            that.visibleKC = false
        },
        cleanJGData () {
            var that = this
            that.$refs.form.resetFields()
            that.visibleJG = false
        },
        handleSizeChange (val) {
            this.page.pageSize = val
            this.onLoad(this.page)
        },
        handleCurrentChange (val) {
            this.page.currentPage = val
            this.onLoad(this.page)
        },
        onLoad (page, params = {}) {
            params['tenantId'] = this.userInfo.tenant_id
            params['deptId'] = this.userInfo.dept_id
            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()
            })
        },
    },
    handleChangeck(value) {
      if (value != null) {
        this.formCK.saleDestination = value[0];
        this.formCK.city = value[1];
        this.formCK.county = value[2];
      }
    },
    initData() {
      // var that = this;
      //获取农产品数据
      // getStrainList(0).then((res) => {
      //   if (res.data.code == 200) {
      //     var strainId = that.findObject(that.option.column, "strainId");
      //     strainId.dicData = res.data.data;
      //   }
      // });
    },
    openWindow(index, data) {
      if (index == 0) {
        this.form.name = this.userInfo.nick_name;
        this.form.createUser = this.userInfo.user_id;
        this.form.weight = data.weight;
        this.form.proid = data.id;
        this.form.landId = data.landId;
        this.form.strainId = data.strainId;
        this.form.strainName = data.strainName;
        this.visible = true;
      } else if (index == 1) {
        this.formKC.name = this.userInfo.nick_name;
        this.formKC.createUser = this.userInfo.user_id;
        this.formKC.weight = data.weight;
        this.formKC.proid = data.id;
        this.formKC.landId = data.landId;
        this.formKC.strainId = data.strainId;
        this.formKC.strainName = data.strainName;
        this.visibleKC = true;
      } else if (index == 2) {
        this.formJG.name = this.userInfo.nick_name;
        this.formJG.createUser = this.userInfo.user_id;
        this.formJG.proid = data.id;
        this.formJG.landId = data.landId;
        this.formJG.weight = data.weight;
        this.formJG.strainId = data.strainId;
        this.formJG.strainName = data.strainName;
        this.visibleJG = true;
      } else if (index == 3) {
        this.formCK.name = this.userInfo.nick_name;
        this.formCK.createUser = this.userInfo.user_id;
        this.formCK.weight = data.weight;
        this.formCK.proid = data.id;
        this.formCK.landId = data.landId;
        this.formCK.strainId = data.strainId;
        this.formCK.strainName = data.strainName;
        this.visibleCK = true;
      }
    },
    cleanData() {
      var that = this;
      that.form.saleDestination = "";
      that.$refs.form.resetFields();
      that.visible = false;
    },
    cleanCKData() {
      var that = this;
      that.formCK.saleDestination = "";
      that.$refs.form.resetFields();
      that.visibleCK = false;
    },
    cleanKCData() {
      var that = this;
      that.$refs.form.resetFields();
      that.visibleKC = false;
    },
    cleanJGData() {
      var that = this;
      that.$refs.form.resetFields();
      that.visibleJG = false;
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.onLoad(this.page);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      params['tenantId'] = this.userInfo.tenant_id;
      params['deptId'] = this.userInfo.dept_id;
      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 lang="scss" scoped>

.body {
  background-color: #fff;
  width: 98%;
  height: 95%;
  margin: 0 auto;
    background-color: #fff;
    width: 98%;
    height: 95%;
    margin: 0 auto;

  .search {
    padding-top: 20px;
    padding-left: 30px;
  }

  .table {
    .content {
      width: 99%;
      height: auto;
      min-height: 630px;
      margin: 0 auto;
      word-wrap: break-word;
      word-break: break-all;

      .farm {
        width: 168px;
        height: 310px;
        /*height: 315px;*/
        background-color: #f7f9fb;
        border-radius: 5px;
        margin-left: 30px;
        margin-top: 30px;
        float: left;

        .farm-img {
          width: 168px;
          height: 168px;

          .img {
            width: 168px;
            height: 168px;
            border-radius: 8px 8px 0px 0px;
          }
        }

        .cai {
          text-align: center;
          font-size: 18px;
          font-weight: 550;
          margin-top: 8px;
          color: #5abf78;
        }

        .area {
          text-align: center;
          font-size: 14px;
          margin-top: 5px;
          color: #333333;

          span {
            font-size: 15px;
            color: #333333;
          }
        }

        .btn {
          text-align: center;
          margin-top: 8px;
        }


      }
    .search {
        padding-top: 20px;
        padding-left: 30px;
    }
  }

  .el-page {
    padding-top: 30px;
    text-align: center;
  }
    .table {
        .content {
            width: 99%;
            height: auto;
            min-height: 630px;
            margin: 0 auto;
            word-wrap: break-word;
            word-break: break-all;

            .farm {
                width: 168px;
                height: 310px;
                /*height: 315px;*/
                background-color: #f7f9fb;
                border-radius: 5px;
                margin-left: 30px;
                margin-top: 30px;
                float: left;

                .farm-img {
                    width: 168px;
                    height: 168px;

                    .img {
                        width: 168px;
                        height: 168px;
                        border-radius: 8px 8px 0px 0px;
                    }
                }

                .cai {
                    text-align: center;
                    font-size: 18px;
                    font-weight: 550;
                    margin-top: 8px;
                    color: #5abf78;
                }

                .area {
                    text-align: center;
                    font-size: 14px;
                    margin-top: 5px;
                    color: #333333;

                    span {
                        font-size: 15px;
                        color: #333333;
                    }
                }

                .btn {
                    text-align: center;
                    margin-top: 8px;
                }
            }
        }
    }

    .el-page {
        padding-top: 30px;
        text-align: center;
    }
}

</style>

 src/views/farmplant/inventorylist.vue

@@ -1,28 +1,29 @@
<template>
  <basic-container>
      <avue-crud :option="option"
             :table-loading="loading"
             :data="data"
             ref="crud"
             v-model="form"
             :permission="permissionList"
             :before-open="beforeOpen"
             :page.sync="page"
             @search-change="searchChange"
             @search-reset="searchReset"
             @current-change="currentChange"
             @size-change="sizeChange"
             @refresh-change="refreshChange"
             @on-load="onLoad">
      </avue-crud>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            ref="crud"
            v-model="form"
            :permission="permissionList"
            :before-open="beforeOpen"
            :page.sync="page"
            @search-change="searchChange"
            @search-reset="searchReset"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
        ></avue-crud>
    </basic-container>
</template>

<script>
import {getInventoryPage} from "@/api/sale/sale"
import { getInventoryPage } from "@/api/sale/sale"

export default {
    data(){
    data () {
        return {
            visible: true,
            form: {},
@@ -54,80 +55,79 @@
                expandFixed: false,
                menuFixed: false,
                menu: false,
                column:[
                column: [
                    {
                        label: "品种",
                        prop :"strainId",
                        search:true,
                        hide:true,
                        display:true,
                        type:"select",
                        dicUrl:'api/strain/strain-tree',
                        props:{
                            label:"strainName",
                            value:"id"
                        prop: "strainId",
                        search: true,
                        hide: true,
                        display: true,
                        type: "select",
                        dicUrl: 'api/strain/strain-tree',
                        props: {
                            label: "strainName",
                            value: "id"
                        }
                    },
                    {
                        label: "品种",
                        prop :"strainName"
                        prop: "strainName"
                    },
                    {
                        label: "损耗数量",
                        prop :"saleNum",
                        prop: "saleNum",
                    },
                    {
                        label: "损耗原因",
                        prop :"reason",
                        prop: "reason",
                    },
                    {
                        label: "备注",
                        prop :"remarks",
                        prop: "remarks",
                    },
                                        {
                        label:"损耗时间",
                        prop:"lossTime",
                    {
                        label: "损耗时间",
                        prop: "lossTime",
                    },
                ],
            },
            data:[],
        };
            data: [],
        }
    },

    methods: {
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad(page, params = {}) {
            this.loading = true;
            getInventoryPage(page.currentPage,page.pageSize,Object.assign(params, this.query)).then((res)=>{
                if(res.data.code == 200){
        onLoad (page, params = {}) {
            this.loading = true
            getInventoryPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
                if (res.data.code == 200) {
                    this.data = res.data.data.records
                    this.page.total = res.data.data.total
                    this.loading = false;
                    this.loading = false
                }
            })
        },
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
    }
}
</script>

<style>

</style>

 src/views/farmplant/process.vue

@@ -1,6 +1,6 @@
<template>
  <div class="body">
    <!-- <div class="search">
    <div class="body">
        <!-- <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
@@ -15,782 +15,780 @@
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="table">
      <div class="content">
        <div class="farm" v-for="(item, index) in data" :key="index">
          <div class="farm-img"><img :src="item.tpurl" class="img"/></div>
          <!-- <div class="farm-img">
        </div>-->
        <div class="table">
            <div class="content">
                <div class="farm" v-for="(item, index) in data" :key="index">
                    <div class="farm-img">
                        <img :src="item.tpurl" class="img" />
                    </div>
                    <!-- <div class="farm-img">
            <img src="../../../public/img/map.png" class="img" />
          </div> -->
          <div class="cai">{{ item.processName }}</div>
          <div class="area">库存量：<span>{{ item.processNum }}</span>公斤</div>
<!--          <div class="btn">-->
<!--            <el-button style="width: 65px;" plain size="small" @click="openWindow(0,item)">-->
<!--              <span style="color: #5abf78">销售</span></el-button-->
<!--            >-->
<!--            <el-button style="width: 65px;padding-left:8px" plain size="small" @click="openWindow(1,item)">-->
<!--              <span>库存损耗</span>-->
<!--            </el-button-->
<!--            >-->
<!--          </div>-->
<!--          <div class="btn">-->
<!--            <el-button style="width: 65px;" plain size="small"-->
<!--            ><span style="color: #5abf78">出库</span></el-button-->
<!--            >-->
<!--            <el-button style="width: 65px;" plain size="small" @click="openWindow(2,item)">-->
<!--              加工-->
<!--            </el-button>-->
<!--          </div>-->
                    </div>-->
                    <div class="cai">{{ item.processName }}</div>
                    <div class="area">
                        库存量：
                        <span>{{ item.processNum }}</span>公斤
                    </div>
                    <!--          <div class="btn">-->
                    <!--            <el-button style="width: 65px;" plain size="small" @click="openWindow(0,item)">-->
                    <!--              <span style="color: #5abf78">销售</span></el-button-->
                    <!--            >-->
                    <!--            <el-button style="width: 65px;padding-left:8px" plain size="small" @click="openWindow(1,item)">-->
                    <!--              <span>库存损耗</span>-->
                    <!--            </el-button-->
                    <!--            >-->
                    <!--          </div>-->
                    <!--          <div class="btn">-->
                    <!--            <el-button style="width: 65px;" plain size="small"-->
                    <!--            ><span style="color: #5abf78">出库</span></el-button-->
                    <!--            >-->
                    <!--            <el-button style="width: 65px;" plain size="small" @click="openWindow(2,item)">-->
                    <!--              加工-->
                    <!--            </el-button>-->
                    <!--          </div>-->
                </div>
            </div>
        </div>
      </div>
        <div class="el-page">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :hide-on-single-page="value"
                :page-size="page.pageSize"
                background
                layout="total, prev, pager, next"
                :total="page.total"
            ></el-pagination>
        </div>

        <el-dialog
            title="农产品销售"
            :modal-append-to-body="false"
            :append-to-body="true"
            :close-on-click-modal="false"
            :before-close="cleanData"
            @close="close"
            width="30%"
            :visible.sync="visible"
            center
        >
            <avue-form ref="form" v-model="form" :option="option">
                <template slot-scope="{disabled,size}" slot="name">
                    <div>
                        <el-tag type="success">{{ form.name }}</el-tag>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="saleDestination">
                    <div>
                        <el-cascader
                            style="width: 100%;"
                            placeholder="请选择销售去向"
                            size="large"
                            :options="options"
                            @change="handleChange"
                            v-model="saleDestination"
                        ></el-cascader>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="saleNum">
                    <div style="margin-bottom: -20px">
                        <el-input type="number" placeholder="请输入销售数量" v-model="form.saleNum">
                            <i slot="suffix" style="font-style:normal;margin-right: 5px;">公斤</i>
                        </el-input>
                        <div style="text-align: right;color: #ffb218">可销售量：{{ form.weight }}公斤</div>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="salePrice">
                    <div style="margin-bottom: -20px">
                        <el-input type="number" placeholder="请输入销售价格" v-model="form.salePrice">
                            <i slot="suffix" style="font-style:normal;margin-right: 5px;">元/公斤</i>
                        </el-input>
                    </div>
                </template>
                <template slot="menuForm">
                    <div style="text-align: center">
                        <el-button style="width: 120px" type="success" plain @click="submitSole">销售</el-button>
                    </div>
                </template>
            </avue-form>
        </el-dialog>

        <el-dialog
            title="农产品库存损耗"
            :modal-append-to-body="false"
            :append-to-body="true"
            :close-on-click-modal="false"
            @close="close"
            width="30%"
            :before-close="cleanKCData"
            :visible.sync="visibleKC"
            center
        >
            <avue-form ref="form" v-model="formKC" :option="optionKC">
                <template slot-scope="{disabled,size}" slot="name">
                    <div>
                        <el-tag type="success">{{ formKC.name }}</el-tag>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="saleNum">
                    <div style="margin-bottom: -20px">
                        <el-input type="number" placeholder="请输入损耗数量" v-model="formKC.saleNum">
                            <i slot="suffix" style="font-style:normal;margin-right: 5px;">公斤</i>
                        </el-input>
                        <div style="text-align: right;color: #ffb218">库存量：{{ formKC.weight }}公斤</div>
                    </div>
                </template>
                <template slot="menuForm">
                    <div style="text-align: center">
                        <el-button style="width: 80px" plain @click="cleanKCData">取消</el-button>
                        <el-button style="width: 80px" type="success" plain @click="submitKCloss">确认</el-button>
                    </div>
                </template>
            </avue-form>
        </el-dialog>

        <el-dialog
            title="加工产品"
            :modal-append-to-body="false"
            :append-to-body="true"
            :close-on-click-modal="false"
            @close="close"
            width="30%"
            :before-close="cleanJGData"
            :visible.sync="visibleJG"
            center
        >
            <avue-form ref="form" v-model="formJG" :option="optionJG">
                <template slot-scope="{disabled,size}" slot="name">
                    <div>
                        <el-tag type="success">{{ formJG.name }}</el-tag>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="saleNum">
                    <div style="margin-bottom: -20px">
                        <el-input type="number" placeholder="请输入加工数量" v-model="formJG.saleNum">
                            <i slot="suffix" style="font-style:normal;margin-right: 5px;">公斤</i>
                        </el-input>
                        <div style="text-align: right;color: #ffb218">库存量：{{ formJG.weight }}公斤</div>
                    </div>
                </template>
                <template slot-scope="{disabled,size}" slot="processNum">
                    <div style="margin-bottom: -20px">
                        <el-input type="number" placeholder="请输入产品数量" v-model="formJG.processNum">
                            <i slot="suffix" style="font-style:normal;margin-right: 5px;">公斤</i>
                        </el-input>
                    </div>
                </template>
                <template slot="menuForm">
                    <div style="text-align: center">
                        <el-button style="width: 80px" plain @click="cleanKCData">取消</el-button>
                        <el-button style="width: 80px" type="success" plain @click="submitJGloss">确认</el-button>
                    </div>
                </template>
            </avue-form>
        </el-dialog>
    </div>
    <div class="el-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :hide-on-single-page="value"
        :page-size="page.pageSize"
        background
        layout="total, prev, pager, next"
        :total="page.total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="农产品销售"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      :before-close="cleanData"
      @close="close"
      width="30%"
      :visible.sync="visible"
      center
    >
      <avue-form ref="form" v-model="form" :option="option">
        <template slot-scope="{disabled,size}" slot="name">
          <div>
            <el-tag type="success">{{ form.name }}</el-tag>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="saleDestination">
          <div>
            <el-cascader
              style="width: 100%;"
              placeholder="请选择销售去向"
              size="large"
              :options="options"
              @change="handleChange"
              v-model="saleDestination">
            </el-cascader>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="saleNum">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入销售数量" v-model="form.saleNum"><i slot="suffix"
                                                                                    style="font-style:normal;margin-right: 5px;">公斤</i>
            </el-input>
            <div style="text-align: right;color: #ffb218">可销售量：{{ form.weight }}公斤</div>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="salePrice">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入销售价格" v-model="form.salePrice"><i slot="suffix"
                                                                                      style="font-style:normal;margin-right: 5px;">元/公斤</i>
            </el-input>
          </div>
        </template>
        <template slot="menuForm">
          <div style="text-align: center">
            <el-button style="width: 120px" type="success" plain @click="submitSole">销售</el-button>
          </div>
        </template>
      </avue-form>
    </el-dialog>


    <el-dialog
      title="农产品库存损耗"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="close"
      width="30%"
      :before-close="cleanKCData"
      :visible.sync="visibleKC"
      center
    >
      <avue-form ref="form" v-model="formKC" :option="optionKC">
        <template slot-scope="{disabled,size}" slot="name">
          <div>
            <el-tag type="success">{{ formKC.name }}</el-tag>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="saleNum">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入损耗数量" v-model="formKC.saleNum"><i slot="suffix"
                                                                                      style="font-style:normal;margin-right: 5px;">公斤</i>
            </el-input>
            <div style="text-align: right;color: #ffb218">库存量：{{ formKC.weight }}公斤</div>
          </div>
        </template>
        <template slot="menuForm">
          <div style="text-align: center">
            <el-button style="width: 80px" plain @click="cleanKCData">取消</el-button>
            <el-button style="width: 80px" type="success" plain @click="submitKCloss">确认</el-button>
          </div>
        </template>
      </avue-form>
    </el-dialog>

    <el-dialog
      title="加工产品"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="close"
      width="30%"
      :before-close="cleanJGData"
      :visible.sync="visibleJG"
      center
    >
      <avue-form ref="form" v-model="formJG" :option="optionJG">
        <template slot-scope="{disabled,size}" slot="name">
          <div>
            <el-tag type="success">{{ formJG.name }}</el-tag>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="saleNum">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入加工数量" v-model="formJG.saleNum"><i slot="suffix"
                                                                                      style="font-style:normal;margin-right: 5px;">公斤</i>
            </el-input>
            <div style="text-align: right;color: #ffb218">库存量：{{ formJG.weight }}公斤</div>
          </div>
        </template>
        <template slot-scope="{disabled,size}" slot="processNum">
          <div style="margin-bottom: -20px">
            <el-input type="number" placeholder="请输入产品数量" v-model="formJG.processNum"><i slot="suffix"
                                                                                      style="font-style:normal;margin-right: 5px;">公斤</i>
            </el-input>
          </div>
        </template>
        <template slot="menuForm">
          <div style="text-align: center">
            <el-button style="width: 80px" plain @click="cleanKCData">取消</el-button>
            <el-button style="width: 80px" type="success" plain @click="submitJGloss">确认</el-button>
          </div>
        </template>
      </avue-form>
    </el-dialog>
  </div>

</template>

<script>
import {
  getList,
} from "@/api/process/process";
    getList,
} from "@/api/process/process"

import {
  add, addKC
} from "@/api/sale/sale";
    add, addKC
} from "@/api/sale/sale"

import {
  addjg
} from "@/api/process/process";
import {mapGetters} from "vuex";
import {regionData} from 'element-china-area-data'
    addjg
} from "@/api/process/process"
import { mapGetters } from "vuex"
import { regionData } from 'element-china-area-data'

export default {
  data() {
    return {
      options: regionData,
      formInline: {
        user: "",
        region: "",
      },
      form: {
        name: "",
        proid:"",
        landId:"",
        strainId: "",
        saleTime: "",
        saleNum: "",
        saleDestination: "",
        city: "",
        county: "",
        salePrice: "",
        createUser: "",
        saleBrand: "",
      },
      //损耗字段
      formKC: {
        name: "",
        proid:"",
        landId:"",
        strainId: "",
        saleNum: "",
        remarks: "",
        reason: "0",
        lossTime: "",
      },
      //加工字段
      formJG: {
        name: "",
        proid:"",
        landId:"",
        strainId: "",
        saleNum: "",
        processNum: "",
        remarks: "",
        reason: "0",
        saleTime: "",
      },
      visible: false,
      visibleKC: false,
      visibleJG: false,
      value: true,
      page: {
        pageSize: 16,
        currentPage: 1,
        total: 0,
      },
      option: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 30,
        column: [
          {
            label: "种养品种",
            prop: "strainName",
            span: 24,
            disabled: true,
            rules: [
              {
                required: true,
                message: "请输入种养品种",
                trigger: "blur",
              },
            ],
          },
          {
            label: "销售时间",
            prop: "saleTime",
            type: "date",
            span: 24,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [
              {
                required: true,
                message: "请选择销售时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "销售数量",
            prop: "saleNum",
            type: "number",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入销售数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "销售去向",
            prop: "saleDestination",
            span: 24,
            rules: [
              {
                required: true,
                message: "请选择销售去向",
                trigger: "blur",
              },
            ],
          },
          {
            label: "销售价格",
            prop: "salePrice",
            span: 24,
            type: "number",
          },
          {
            label: "品牌",
            prop: "saleBrand",
            span: 24,
          },
          {
            label: "操作人",
            prop: "name",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入操作人",
                trigger: "blur",
              },
            ],
          },
        ]
      },
      optionKC: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 30,
        column: [
          {
            label: "损耗品种",
            prop: "strainName",
            span: 24,
            disabled: true,
            rules: [
              {
                required: true,
                message: "请输入损耗品种",
                trigger: "blur",
              },
            ],
          },
          {
            label: "损耗时间",
            prop: "lossTime",
            type: "date",
            span: 24,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [
              {
                required: true,
                message: "请选择损耗时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "损耗数量",
            prop: "saleNum",
            type: "number",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入损耗数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "损耗原因",
            prop: "reason",
            span: 24,
            type: "select",
            value: "0",
            dicData: [
              {
                label: "库存损耗",
                value: "0",
              }],
            rules: [
              {
                required: true,
                message: "请选择损耗原因",
                trigger: "blur",
              },
            ],
          },
          {
            label: "备注",
            prop: "remarks",
            span: 24,
          },
          {
            label: "操作人",
            prop: "name",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入操作人",
                trigger: "blur",
              },
            ],
          },
        ]
      },
      optionJG: {
        emptyBtn: false,
        submitBtn: false,
        gutter: 30,
        column: [
          {
            label: "加工品种",
            prop: "strainName",
            span: 24,
            disabled: true,
            rules: [
              {
                required: true,
                message: "请输入加工品种",
                trigger: "blur",
              },
            ],
          },
          {
            label: "加工时间",
            prop: "saleTime",
            type: "date",
            span: 24,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            rules: [
              {
                required: true,
                message: "请选择加工时间",
                trigger: "blur",
              },
            ],
          },
          {
            label: "加工数量",
            prop: "saleNum",
            type: "number",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入加工数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "加工产品",
            prop: "processId",
            span: 24,
            type: "tree",
            dicUrl: "/api/machining/machining/selectInfo",
            props: {
              label: "processName",
              value: "processId"
    data () {
        return {
            options: regionData,
            formInline: {
                user: "",
                region: "",
            },
            rules: [
              {
                required: true,
                message: "请输入加工产品",
                trigger: "blur",
              },
            ],
          },
          {
            label: "产品数量",
            prop: "processNum",
            type: "number",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入产品数量",
                trigger: "blur",
              },
            ],
          },
          {
            label: "备注",
            prop: "remarks",
            span: 24,
          },
          {
            label: "操作人",
            prop: "name",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入操作人",
                trigger: "blur",
              },
            ],
          },
        ]
      },
      selectionList: [],
      data: [],
    };
  },
  computed: {
    ...mapGetters(["permission", "userInfo"]),
    // permissionList() {
    //   return {
    //     addBtn: this.vaildData(this.permission.social_add, true),
    //     viewBtn: this.vaildData(this.permission.social_view, false),
    //     delBtn: this.vaildData(this.permission.social_delete, false),
    //     editBtn: this.vaildData(this.permission.social_edit, false),
    //   };
    // },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  mounted() {
  },
  created() {
    this.initData();
    //初始化列表数据
    this.onLoad(this.page);
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    submitSole() {
      var that = this;
      this.$refs.form.validate((vaild, done) => {
        if (vaild) {
          add(this.form).then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            //提交完成，关闭窗口清空数据
            that.cleanData();
            done();
          }, error => {
            window.console.log(error);
            //提交失败，关闭窗口清空数据
            that.cleanData();
            done();
          });
            form: {
                name: "",
                proid: "",
                landId: "",
                strainId: "",
                saleTime: "",
                saleNum: "",
                saleDestination: "",
                city: "",
                county: "",
                salePrice: "",
                createUser: "",
                saleBrand: "",
            },
            //损耗字段
            formKC: {
                name: "",
                proid: "",
                landId: "",
                strainId: "",
                saleNum: "",
                remarks: "",
                reason: "0",
                lossTime: "",
            },
            //加工字段
            formJG: {
                name: "",
                proid: "",
                landId: "",
                strainId: "",
                saleNum: "",
                processNum: "",
                remarks: "",
                reason: "0",
                saleTime: "",
            },
            visible: false,
            visibleKC: false,
            visibleJG: false,
            value: true,
            page: {
                pageSize: 16,
                currentPage: 1,
                total: 0,
            },
            option: {
                emptyBtn: false,
                submitBtn: false,
                gutter: 30,
                column: [
                    {
                        label: "种养品种",
                        prop: "strainName",
                        span: 24,
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入种养品种",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "销售时间",
                        prop: "saleTime",
                        type: "date",
                        span: 24,
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        rules: [
                            {
                                required: true,
                                message: "请选择销售时间",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "销售数量",
                        prop: "saleNum",
                        type: "number",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入销售数量",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "销售去向",
                        prop: "saleDestination",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请选择销售去向",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "销售价格",
                        prop: "salePrice",
                        span: 24,
                        type: "number",
                    },
                    {
                        label: "品牌",
                        prop: "saleBrand",
                        span: 24,
                    },
                    {
                        label: "操作人",
                        prop: "name",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入操作人",
                                trigger: "blur",
                            },
                        ],
                    },
                ]
            },
            optionKC: {
                emptyBtn: false,
                submitBtn: false,
                gutter: 30,
                column: [
                    {
                        label: "损耗品种",
                        prop: "strainName",
                        span: 24,
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入损耗品种",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "损耗时间",
                        prop: "lossTime",
                        type: "date",
                        span: 24,
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        rules: [
                            {
                                required: true,
                                message: "请选择损耗时间",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "损耗数量",
                        prop: "saleNum",
                        type: "number",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入损耗数量",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "损耗原因",
                        prop: "reason",
                        span: 24,
                        type: "select",
                        value: "0",
                        dicData: [
                            {
                                label: "库存损耗",
                                value: "0",
                            }],
                        rules: [
                            {
                                required: true,
                                message: "请选择损耗原因",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        span: 24,
                    },
                    {
                        label: "操作人",
                        prop: "name",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入操作人",
                                trigger: "blur",
                            },
                        ],
                    },
                ]
            },
            optionJG: {
                emptyBtn: false,
                submitBtn: false,
                gutter: 30,
                column: [
                    {
                        label: "加工品种",
                        prop: "strainName",
                        span: 24,
                        disabled: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入加工品种",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "加工时间",
                        prop: "saleTime",
                        type: "date",
                        span: 24,
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        rules: [
                            {
                                required: true,
                                message: "请选择加工时间",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "加工数量",
                        prop: "saleNum",
                        type: "number",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入加工数量",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "加工产品",
                        prop: "processId",
                        span: 24,
                        type: "tree",
                        dicUrl: "/api/machining/machining/selectInfo",
                        props: {
                            label: "processName",
                            value: "processId"
                        },
                        rules: [
                            {
                                required: true,
                                message: "请输入加工产品",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "产品数量",
                        prop: "processNum",
                        type: "number",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入产品数量",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        span: 24,
                    },
                    {
                        label: "操作人",
                        prop: "name",
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: "请输入操作人",
                                trigger: "blur",
                            },
                        ],
                    },
                ]
            },
            selectionList: [],
            data: [],
        }
      })
    },
    //加工产品
    submitJGloss() {
      var that = this;
      this.$refs.form.validate((vaild, done) => {
        if (vaild) {
          addjg(this.formJG).then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            //提交完成，关闭窗口清空数据
            that.cleanJGData();
            done();
          }, error => {
            window.console.log(error);
            //提交失败，关闭窗口清空数据
            that.cleanJGData();
            done();
          });
        }
      })
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        // permissionList() {
        //   return {
        //     addBtn: this.vaildData(this.permission.social_add, true),
        //     viewBtn: this.vaildData(this.permission.social_view, false),
        //     delBtn: this.vaildData(this.permission.social_delete, false),
        //     editBtn: this.vaildData(this.permission.social_edit, false),
        //   };
        // },
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
    },
    submitKCloss() {
      var that = this;
      this.$refs.form.validate((vaild, done) => {
        if (vaild) {
          addKC(this.formKC).then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            //提交完成，关闭窗口清空数据
            that.cleanKCData();
            done();
          }, error => {
            window.console.log(error);
            //提交失败，关闭窗口清空数据
            that.cleanKCData();
            done();
          });
        }
      })
    mounted () {
    },
    handleChange(value) {
      if (value != null) {
        this.form.saleDestination = value[0];
        this.form.city = value[1];
        this.form.county = value[2];
    created () {
        this.initData()
        //初始化列表数据
        this.onLoad(this.page)
    },
    methods: {
        onSubmit () {
            console.log("submit!")
        },
        submitSole () {
            var that = this
            this.$refs.form.validate((vaild, done) => {
                if (vaild) {
                    add(this.form).then(() => {
                        this.onLoad(this.page)
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        })
                        //提交完成，关闭窗口清空数据
                        that.cleanData()
                        done()
                    }, error => {
                        window.console.log(error)
                        //提交失败，关闭窗口清空数据
                        that.cleanData()
                        done()
                    })
                }
            })
        },
        //加工产品
        submitJGloss () {
            var that = this
            this.$refs.form.validate((vaild, done) => {
                if (vaild) {
                    addjg(this.formJG).then(() => {
                        this.onLoad(this.page)
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        })
                        //提交完成，关闭窗口清空数据
                        that.cleanJGData()
                        done()
                    }, error => {
                        window.console.log(error)
                        //提交失败，关闭窗口清空数据
                        that.cleanJGData()
                        done()
                    })
                }
            })
        },
        submitKCloss () {
            var that = this
            this.$refs.form.validate((vaild, done) => {
                if (vaild) {
                    addKC(this.formKC).then(() => {
                        this.onLoad(this.page)
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        })
                        //提交完成，关闭窗口清空数据
                        that.cleanKCData()
                        done()
                    }, error => {
                        window.console.log(error)
                        //提交失败，关闭窗口清空数据
                        that.cleanKCData()
                        done()
                    })
                }
            })
        },
        handleChange (value) {
            if (value != null) {
                this.form.saleDestination = value[0]
                this.form.city = value[1]
                this.form.county = value[2]

      }
            }
        },
        initData () {
            // var that = this;
            //获取农产品数据
            // getStrainList(0).then((res) => {
            //   if (res.data.code == 200) {
            //     var strainId = that.findObject(that.option.column, "strainId");
            //     strainId.dicData = res.data.data;
            //   }
            // });
        },
        openWindow (index, data) {
            if (index == 0) {
                this.form.name = this.userInfo.nick_name
                this.form.createUser = this.userInfo.user_id
                this.form.weight = data.weight
                this.form.proid = data.id
                this.form.landId = data.landId
                this.form.strainId = data.strainId
                this.form.strainName = data.strainName
                this.visible = true
            } else if (index == 1) {
                this.formKC.name = this.userInfo.nick_name
                this.formKC.createUser = this.userInfo.user_id
                this.formKC.weight = data.weight
                this.formKC.proid = data.id
                this.formKC.landId = data.landId
                this.formKC.strainId = data.strainId
                this.formKC.strainName = data.strainName
                this.visibleKC = true
            }
            else if (index == 2) {
                this.formJG.name = this.userInfo.nick_name
                this.formJG.createUser = this.userInfo.user_id
                this.formJG.proid = data.id
                this.formJG.landId = data.landId
                this.formJG.weight = data.weight
                this.formJG.strainId = data.strainId
                this.formJG.strainName = data.strainName
                this.visibleJG = true
            }
        },
        cleanData () {
            var that = this
            that.form.saleDestination = ""
            that.$refs.form.resetFields()
            that.visible = false
        },
        cleanKCData () {
            var that = this
            that.$refs.form.resetFields()
            that.visibleKC = false
        },
        cleanJGData () {
            var that = this
            that.$refs.form.resetFields()
            that.visibleJG = false
        },
        handleSizeChange (val) {
            this.page.pageSize = val
            this.onLoad(this.page)
        },
        handleCurrentChange (val) {
            this.page.currentPage = val
            this.onLoad(this.page)
        },
        onLoad (page, params = {}) {
            params['tenantId'] = this.userInfo.tenant_id
            params['deptId'] = this.userInfo.dept_id
            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()
            })
        },
    },
    initData() {
      // var that = this;
      //获取农产品数据
      // getStrainList(0).then((res) => {
      //   if (res.data.code == 200) {
      //     var strainId = that.findObject(that.option.column, "strainId");
      //     strainId.dicData = res.data.data;
      //   }
      // });
    },
    openWindow(index, data) {
      if (index == 0) {
        this.form.name = this.userInfo.nick_name;
        this.form.createUser = this.userInfo.user_id;
        this.form.weight = data.weight;
        this.form.proid=data.id;
        this.form.landId=data.landId;
        this.form.strainId = data.strainId;
        this.form.strainName = data.strainName;
        this.visible = true;
      } else if (index == 1) {
        this.formKC.name = this.userInfo.nick_name;
        this.formKC.createUser = this.userInfo.user_id;
        this.formKC.weight = data.weight;
        this.formKC.proid=data.id;
        this.formKC.landId=data.landId;
        this.formKC.strainId = data.strainId;
        this.formKC.strainName = data.strainName;
        this.visibleKC = true;
      }
      else if (index == 2) {
        this.formJG.name = this.userInfo.nick_name;
        this.formJG.createUser = this.userInfo.user_id;
        this.formJG.proid=data.id;
        this.formJG.landId=data.landId;
        this.formJG.weight = data.weight;
        this.formJG.strainId = data.strainId;
        this.formJG.strainName = data.strainName;
        this.visibleJG = true;
      }
    },
    cleanData() {
      var that = this;
      that.form.saleDestination = "";
      that.$refs.form.resetFields();
      that.visible = false;
    },
    cleanKCData() {
      var that = this;
      that.$refs.form.resetFields();
      that.visibleKC = false;
    },
    cleanJGData() {
      var that = this;
      that.$refs.form.resetFields();
      that.visibleJG = false;
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.onLoad(this.page);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      params['tenantId'] = this.userInfo.tenant_id;
      params['deptId'] = this.userInfo.dept_id;
      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 lang="scss" scoped>

.body {
  background-color: #fff;
  width: 98%;
  height: 95%;
  margin: 0 auto;
    background-color: #fff;
    width: 98%;
    height: 95%;
    margin: 0 auto;

  .search {
    padding-top: 20px;
    padding-left: 30px;
  }

  .table {
    .content {
      width: 99%;
      height: auto;
      min-height: 630px;
      margin: 0 auto;
      word-wrap: break-word;
      word-break: break-all;

      .farm {
        width: 168px;
        height: 240px;
        /*height: 315px;*/
        background-color: #f7f9fb;
        border-radius: 5px;
        margin-left: 30px;
        margin-top: 30px;
        float: left;

        .farm-img {
          width: 168px;
          height: 168px;

          .img {
            width: 168px;
            height: 168px;
            border-radius: 8px 8px 0px 0px;
          }
        }

        .cai {
          text-align: center;
          font-size: 18px;
          font-weight: 550;
          margin-top: 8px;
          color: #5abf78;
        }

        .area {
          text-align: center;
          font-size: 14px;
          margin-top: 5px;
          color: #333333;

          span {
            font-size: 15px;
            color: #333333;
          }
        }

        .btn {
          text-align: center;
          margin-top: 8px;
        }


      }
    .search {
        padding-top: 20px;
        padding-left: 30px;
    }
  }

  .el-page {
    padding-top: 30px;
    text-align: center;
  }
    .table {
        .content {
            width: 99%;
            height: auto;
            min-height: 630px;
            margin: 0 auto;
            word-wrap: break-word;
            word-break: break-all;

            .farm {
                width: 168px;
                height: 240px;
                /*height: 315px;*/
                background-color: #f7f9fb;
                border-radius: 5px;
                margin-left: 30px;
                margin-top: 30px;
                float: left;

                .farm-img {
                    width: 168px;
                    height: 168px;

                    .img {
                        width: 168px;
                        height: 168px;
                        border-radius: 8px 8px 0px 0px;
                    }
                }

                .cai {
                    text-align: center;
                    font-size: 18px;
                    font-weight: 550;
                    margin-top: 8px;
                    color: #5abf78;
                }

                .area {
                    text-align: center;
                    font-size: 14px;
                    margin-top: 5px;
                    color: #333333;

                    span {
                        font-size: 15px;
                        color: #333333;
                    }
                }

                .btn {
                    text-align: center;
                    margin-top: 8px;
                }
            }
        }
    }

    .el-page {
        padding-top: 30px;
        text-align: center;
    }
}

</style>

 src/views/farmplant/retrievallist.vue

@@ -1,30 +1,31 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               v-model="form"
               :permission="permissionList"
               :before-open="beforeOpen"
               :page.sync="page"
               @search-change="searchChange"
               @search-reset="searchReset"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
    </avue-crud>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            ref="crud"
            v-model="form"
            :permission="permissionList"
            :before-open="beforeOpen"
            :page.sync="page"
            @search-change="searchChange"
            @search-reset="searchReset"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
        ></avue-crud>
    </basic-container>
</template>

<script>
import {getPage} from "@/api/retrieval/retrieval"
import { getPage } from "@/api/retrieval/retrieval"

export default {
    data(){
    data () {
        return {
             visible: true,
            visible: true,
            form: {},
            query: {},
            loading: true,
@@ -54,79 +55,78 @@
                expandFixed: false,
                menuFixed: false,
                menu: false,
                column:[
                column: [
                    {
                        label: "品种",
                        prop :"strainId",
                        search:true,
                        hide:true,
                        display:true,
                        type:"select",
                        dicUrl:'api/strain/strain-tree',
                        props:{
                            label:"strainName",
                            value:"id"
                        prop: "strainId",
                        search: true,
                        hide: true,
                        display: true,
                        type: "select",
                        dicUrl: 'api/strain/strain-tree',
                        props: {
                            label: "strainName",
                            value: "id"
                        }
                    },
                    {
                        label: "品种",
                        prop :"strainName"
                        prop: "strainName"
                    },
                    {
                        label: "出库数量",
                        prop :"saleNum",
                        prop: "saleNum",
                    },
                    {
                        label:"销售地",
                        prop:"saleDestination2"
                        label: "销售地",
                        prop: "saleDestination2"
                    },
                    {
                        label: "备注",
                        prop :"remarks",
                        prop: "remarks",
                    },
                    {
                        label:"出库时间",
                        prop:"createTime",
                        label: "出库时间",
                        prop: "createTime",
                    },
                ],
            },
            data:[],
        };
            data: [],
        }
    },
    methods: {
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad(page, params = {}) {
            this.loading = true;
            getPage(page.currentPage,page.pageSize,Object.assign(params, this.query)).then((res)=>{
                if(res.data.code == 200){
        onLoad (page, params = {}) {
            this.loading = true
            getPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
                if (res.data.code == 200) {
                    this.data = res.data.data.records
                    this.page.total = res.data.data.total
                    this.loading = false;
                    this.loading = false
                }
            })
        },
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
    }
}
</script>

<style>

</style>

 src/views/farmplant/salelist.vue

@@ -1,28 +1,29 @@
<template>
  <basic-container>
        <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               v-model="form"
               :permission="permissionList"
               :before-open="beforeOpen"
               :page.sync="page"
               @search-change="searchChange"
                @search-reset="searchReset"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
    </avue-crud>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            ref="crud"
            v-model="form"
            :permission="permissionList"
            :before-open="beforeOpen"
            :page.sync="page"
            @search-change="searchChange"
            @search-reset="searchReset"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
        ></avue-crud>
    </basic-container>
</template>

<script>
import {getPage} from "@/api/sale/sale"
import { getPage } from "@/api/sale/sale"

export default {
    data(){
    data () {
        return {
            visible: true,
            form: {},
@@ -54,84 +55,83 @@
                expandFixed: false,
                menuFixed: false,
                menu: false,
                column:[
                column: [
                    {
                        label: "品种",
                        prop :"strainId",
                        search:true,
                        hide:true,
                        display:false,
                        type:"select",
                        dicUrl:'api/strain/strain-tree',
                        props:{
                            label:"strainName",
                            value:"id"
                        prop: "strainId",
                        search: true,
                        hide: true,
                        display: false,
                        type: "select",
                        dicUrl: 'api/strain/strain-tree',
                        props: {
                            label: "strainName",
                            value: "id"
                        }
                    },
                    {
                        label: "品种",
                        prop :"strainName"
                        prop: "strainName"
                    },
                    {
                        label: "销售数量",
                        prop :"saleNum",
                        prop: "saleNum",
                    },
                    {
                        label:"销售地",
                        prop:"saleDestination2"
                        label: "销售地",
                        prop: "saleDestination2"
                    },
                    {
                        label: "销售价格",
                        prop :"salePrice",
                        prop: "salePrice",
                    },
                    {
                        label: "品牌",
                        prop :"saleBrand",
                        prop: "saleBrand",
                    },
                    {
                        label:"销售时间",
                        prop:"saleTime",
                        label: "销售时间",
                        prop: "saleTime",
                    },
                ],
            },
            data:[],
        };
            data: [],
        }
    },
    methods: {

        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad(page, params = {}) {
            this.loading = true;
            getPage(page.currentPage,page.pageSize,Object.assign(params, this.query)).then((res)=>{
                if(res.data.code == 200){
        onLoad (page, params = {}) {
            this.loading = true
            getPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
                if (res.data.code == 200) {
                    this.data = res.data.data.records
                    this.page.total = res.data.data.total
                    this.loading = false;
                    this.loading = false
                }
            })
        },
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        searchReset () {
            this.query = {}
            this.onLoad(this.page)
        },
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        searchChange (params, done) {
            this.query = params
            this.page.currentPage = 1
            this.onLoad(this.page, params)
            done()
        },
    }
}
</script>

<style>

</style>

 src/views/farmplant/strain.vue

@@ -1,302 +1,301 @@
<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
          @click="handleDelete"
          >删 除
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
    <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
                    @click="handleDelete"
                >删 除</el-button>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import {
  getDetail,
  getList,
  update,
  remove,
  save,
} from "@/api/farmplant/strain";
import { mapGetters } from "vuex";
    getDetail,
    getList,
    update,
    remove,
    save,
} from "@/api/farmplant/strain"
import { mapGetters } from "vuex"
export default {
  data() {
    return {
      visible: true,
      form: {},
      query: {},
      loading: true,
      excelBox: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        height: "auto",
        editBtn: true,
        delBtn: true,
        viewBtn: true,
        menuWidth: 200,
        menuAlign: "center",
        align: "center",
        selection: true,
        column: [
          {
            label: "农产品名称",
            prop: "strainName",
            searchLabelWidth: 110,
            labelWidth: 110,
            search: true,
            searchSpan: 5,
            rules: [
              {
                required: true,
                message: "请输入农产品名称",
                trigger: "blur",
              },
            ],
          },
          // {
          //   label: "类型",
          //   prop: "strainType",
          //   type: "select",
          //   labelWidth: 110,
          //   search: true,
          //   searchSpan: 4,
          //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=strainType",
          //   props: {
          //     label: "dictValue",
          //     value: "dictKey",
          //   },
          //   dataType: "string",
          //   rules: [
          //     {
          //       required: true,
          //       message: "请输入类型",
          //       trigger: "blur",
          //     },
          //   ],
          // },
          {
            label: "别名",
            prop: "alias",
            labelWidth: 110,
            rules: [
              {
                required: false,
                message: "请输入别名",
                trigger: "blur",
              },
            ],
          },
          {
            label: "图片",
            type: "upload",
            listType: "picture-img",
            propsHttp: {
              res: "data",
              url: "url",
    data () {
        return {
            visible: true,
            form: {},
            query: {},
            loading: true,
            excelBox: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            canvasOption: {
              text: " ",
              ratio: 1.0,
            selectionList: [],
            option: {
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                height: "auto",
                editBtn: true,
                delBtn: true,
                viewBtn: true,
                menuWidth: 200,
                menuAlign: "center",
                align: "center",
                selection: true,
                column: [
                    {
                        label: "农产品名称",
                        prop: "strainName",
                        searchLabelWidth: 110,
                        labelWidth: 110,
                        search: true,
                        searchSpan: 5,
                        rules: [
                            {
                                required: true,
                                message: "请输入农产品名称",
                                trigger: "blur",
                            },
                        ],
                    },
                    // {
                    //   label: "类型",
                    //   prop: "strainType",
                    //   type: "select",
                    //   labelWidth: 110,
                    //   search: true,
                    //   searchSpan: 4,
                    //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=strainType",
                    //   props: {
                    //     label: "dictValue",
                    //     value: "dictKey",
                    //   },
                    //   dataType: "string",
                    //   rules: [
                    //     {
                    //       required: true,
                    //       message: "请输入类型",
                    //       trigger: "blur",
                    //     },
                    //   ],
                    // },
                    {
                        label: "别名",
                        prop: "alias",
                        labelWidth: 110,
                        rules: [
                            {
                                required: false,
                                message: "请输入别名",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        label: "图片",
                        type: "upload",
                        listType: "picture-img",
                        propsHttp: {
                            res: "data",
                            url: "url",
                        },
                        canvasOption: {
                            text: " ",
                            ratio: 1.0,
                        },
                        action: "/api/blade-resource/oss/endpoint/put-files",
                        tip: "",
                        span: 24,
                        labelWidth: 110,
                        prop: "url",
                        rules: [
                            {
                                required: true,
                                message: "请上传农产品图片",
                                trigger: "blur",
                            },
                        ],
                    },
                ],
            },
            action: "/api/blade-resource/oss/endpoint/put-files",
            tip: "",
            span: 24,
            labelWidth: 110,
            prop: "url",
            rules: [
              {
                required: true,
                message: "请上传农产品图片",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [],
    };
  },
  created() {},
  computed: {
    ...mapGetters(["permission", "userInfo"]),
    // permissionList() {
    //   return {
    //     addBtn: this.vaildData(this.permission.social_add, true),
    //     viewBtn: this.vaildData(this.permission.social_view, false),
    //     delBtn: this.vaildData(this.permission.social_delete, false),
    //     editBtn: this.vaildData(this.permission.social_edit, false),
    //   };
    // },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  mounted() {},
  methods: {
    //新增
    rowSave(row, done, loading) {
      row['strainType'] =0;
      row['tenantId'] = this.userInfo.tenant_id;
      row['deptId'] = this.userInfo.dept_id;
      save(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
            data: [],
        }
      );
    },
    //修改
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    created () { },
    computed: {
        ...mapGetters(["permission", "userInfo"]),
        // permissionList() {
        //   return {
        //     addBtn: this.vaildData(this.permission.social_add, true),
        //     viewBtn: this.vaildData(this.permission.social_view, false),
        //     delBtn: this.vaildData(this.permission.social_delete, false),
        //     editBtn: this.vaildData(this.permission.social_edit, false),
        //   };
        // },
        ids () {
            let ids = []
            this.selectionList.forEach((ele) => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
        (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: "操作成功!",
          });
        });
    mounted () { },
    methods: {
        //新增
        rowSave (row, done, loading) {
            row['strainType'] = 0
            row['tenantId'] = this.userInfo.tenant_id
            row['deptId'] = this.userInfo.dept_id
            save(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 = {}) {
            params['tenantId'] = this.userInfo.tenant_id
            params['deptId'] = this.userInfo.dept_id
            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()
            })
        },
    },
    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 = {}) {
      params['tenantId'] = this.userInfo.tenant_id;
      params['deptId'] = this.userInfo.dept_id;
      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>


 src/views/flow/deploy.vue

@@ -1,154 +1,160 @@
<template>
  <basic-container>
    <avue-form ref="form" :option="option" v-model="form" :upload-before="uploadBefore" :upload-after="uploadAfter"/>
  </basic-container>
    <basic-container>
        <avue-form
            ref="form"
            :option="option"
            v-model="form"
            :upload-before="uploadBefore"
            :upload-after="uploadAfter"
        />
    </basic-container>
</template>

<script>
  import {deployUpload} from "@/api/flow/flow";
  import {flowCategory} from "@/util/flow";
import { deployUpload } from "@/api/flow/flow"
import { flowCategory } from "@/util/flow"

  export default {
    data() {
      return {
        form: {
          flowCategory: '',
          tenantId: '',
          flowFile: [],
          file: {},
        },
        option: {
          labelWidth: 120,
          menuBtn: false,
          column: [
            {
              label: '流程类型',
              prop: 'flowCategory',
              type: 'select',
              dicUrl: `/api/blade-system/dict/dictionary?code=flow`,
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              row: true,
              span: 12,
              dataType: "number",
              rules: [
                {
                  required: true,
                  message: '请选择流程类型',
                  trigger: 'blur'
                }
              ]
export default {
    data () {
        return {
            form: {
                flowCategory: '',
                tenantId: '',
                flowFile: [],
                file: {},
            },
            {
              label: "流程模式",
              prop: "flowMode",
              type: "radio",
              dicData: [
                {
                  label: "通用流程",
                  value: 1
                },
                {
                  label: "定制流程",
                  value: 2
                }
              ],
              value: 1,
              row: true,
              span: 12,
              rules: [
                {
                  required: true,
                  message: '请选择流程模式',
                  trigger: 'blur'
                }
              ],
            },
            {
              label: "所属租户",
              prop: "tenantId",
              type: "tree",
              multiple: true,
              dicUrl: "/api/blade-system/tenant/select",
              props: {
                label: "tenantName",
                value: "tenantId"
              },
              display: false,
              row: true,
              span: 12,
              rules: [
                {
                  required: true,
                  message: '请选择所属租户',
                  trigger: 'blur'
                }
              ],
            },
            {
              label: '附件上传',
              prop: 'flowFile',
              type: 'upload',
              loadText: '附件上传中，请稍等',
              span: 24,
              propsHttp: {
                res: 'data'
              },
              tip: '请上传 bpmn20.xml 标准格式文件',
              action: '/api/blade-flow/manager/check-upload'
            },
          ]
            option: {
                labelWidth: 120,
                menuBtn: false,
                column: [
                    {
                        label: '流程类型',
                        prop: 'flowCategory',
                        type: 'select',
                        dicUrl: `/api/blade-system/dict/dictionary?code=flow`,
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        row: true,
                        span: 12,
                        dataType: "number",
                        rules: [
                            {
                                required: true,
                                message: '请选择流程类型',
                                trigger: 'blur'
                            }
                        ]
                    },
                    {
                        label: "流程模式",
                        prop: "flowMode",
                        type: "radio",
                        dicData: [
                            {
                                label: "通用流程",
                                value: 1
                            },
                            {
                                label: "定制流程",
                                value: 2
                            }
                        ],
                        value: 1,
                        row: true,
                        span: 12,
                        rules: [
                            {
                                required: true,
                                message: '请选择流程模式',
                                trigger: 'blur'
                            }
                        ],
                    },
                    {
                        label: "所属租户",
                        prop: "tenantId",
                        type: "tree",
                        multiple: true,
                        dicUrl: "/api/blade-system/tenant/select",
                        props: {
                            label: "tenantName",
                            value: "tenantId"
                        },
                        display: false,
                        row: true,
                        span: 12,
                        rules: [
                            {
                                required: true,
                                message: '请选择所属租户',
                                trigger: 'blur'
                            }
                        ],
                    },
                    {
                        label: '附件上传',
                        prop: 'flowFile',
                        type: 'upload',
                        loadText: '附件上传中，请稍等',
                        span: 24,
                        propsHttp: {
                            res: 'data'
                        },
                        tip: '请上传 bpmn20.xml 标准格式文件',
                        action: '/api/blade-flow/manager/check-upload'
                    },
                ]
            }
        }
      }
    },
    watch: {
      'form.flowMode'() {
        this.$refs.form.option.column.filter(item => {
          if (item.prop === "tenantId") {
            item.display = this.form.flowMode === 2;
          }
        });
      }
        'form.flowMode' () {
            this.$refs.form.option.column.filter(item => {
                if (item.prop === "tenantId") {
                    item.display = this.form.flowMode === 2
                }
            })
        }
    },
    methods: {
      uploadBefore(file, done) {
        this.$message.success('部署开始');
        this.file = file;
        done()
      },
      uploadAfter(res, done, loading) {
        if (!this.form.flowCategory) {
          this.$message.warning('清先选择流程类型');
          loading()
          return false;
        }
        if (this.form.flowMode === 2 && !this.form.tenantId) {
          this.$message.warning('清先选择对应租户');
          loading();
          return false;
        }
        if (res.success) {
          deployUpload(
            flowCategory(this.form.flowCategory),
            (this.form.tenantId) ? this.form.tenantId.join(",") : "",
            [this.file]
          ).then(res => {
            const data = res.data;
            if (data.success) {
              done()
            } else {
              this.$message.error(data.msg);
              loading()
        uploadBefore (file, done) {
            this.$message.success('部署开始')
            this.file = file
            done()
        },
        uploadAfter (res, done, loading) {
            if (!this.form.flowCategory) {
                this.$message.warning('清先选择流程类型')
                loading()
                return false
            }
          })
        } else {
          this.$message.warning('请上传 bpmn20.xml 标准格式文件');
          loading()
          return false;
        }
      },
            if (this.form.flowMode === 2 && !this.form.tenantId) {
                this.$message.warning('清先选择对应租户')
                loading()
                return false
            }
            if (res.success) {
                deployUpload(
                    flowCategory(this.form.flowCategory),
                    (this.form.tenantId) ? this.form.tenantId.join(",") : "",
                    [this.file]
                ).then(res => {
                    const data = res.data
                    if (data.success) {
                        done()
                    } else {
                        this.$message.error(data.msg)
                        loading()
                    }
                })
            } else {
                this.$message.warning('请上传 bpmn20.xml 标准格式文件')
                loading()
                return false
            }
        },
    }
  }
}
</script>

 src/views/flow/follow.vue

@@ -1,203 +1,196 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               v-model="form"
               :page.sync="page"
               :permission="permissionList"
               @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-scope="{row}"
                slot="suspensionState">
        <el-tag>{{row.suspensionState===1?'激活':'挂起'}}</el-tag>
      </template>
    </avue-crud>
    <el-dialog title="流程删除"
               append-to-body
               :visible.sync="followBox"
               width="20%">
      <el-form :model="form"
               ref="form"
               label-width="80px">
        <el-form-item label="删除理由">
          <el-input v-model="deleteReason"
                    placeholder="请输入删除理由" />
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="followBox = false">关 闭</el-button>
        <el-button type="primary"
                   @click="handleDelete">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            ref="crud"
            v-model="form"
            :page.sync="page"
            :permission="permissionList"
            @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-scope="{row}" slot="suspensionState">
                <el-tag>{{row.suspensionState===1?'激活':'挂起'}}</el-tag>
            </template>
        </avue-crud>
        <el-dialog title="流程删除" append-to-body :visible.sync="followBox" width="20%">
            <el-form :model="form" ref="form" label-width="80px">
                <el-form-item label="删除理由">
                    <el-input v-model="deleteReason" placeholder="请输入删除理由" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="followBox = false">关 闭</el-button>
                <el-button type="primary" @click="handleDelete">确 定</el-button>
            </span>
        </el-dialog>
    </basic-container>
</template>

<script>
  import {mapGetters} from "vuex";
  import {followList, deleteProcessInstance} from "@/api/flow/flow";
import { mapGetters } from "vuex"
import { followList, deleteProcessInstance } from "@/api/flow/flow"

  export default {
    data() {
      return {
        form: {},
        selectionId: '',
        processInstanceId: '',
        selectionList: [],
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        followBox: false,
        deleteReason: '',
        option: {
          height: 'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          selection: true,
          editBtn: false,
          addBtn: false,
          viewBtn: false,
          dialogWidth: 900,
          menuWidth: 100,
          dialogClickModal: false,
          column: [
            {
              label: "执行id",
              prop: "executionId",
              search: true,
              width: 320,
export default {
    data () {
        return {
            form: {},
            selectionId: '',
            processInstanceId: '',
            selectionList: [],
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            {
              label: "流程key",
              prop: "processDefinitionKey",
              search: true,
            followBox: false,
            deleteReason: '',
            option: {
                height: 'auto',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                selection: true,
                editBtn: false,
                addBtn: false,
                viewBtn: false,
                dialogWidth: 900,
                menuWidth: 100,
                dialogClickModal: false,
                column: [
                    {
                        label: "执行id",
                        prop: "executionId",
                        search: true,
                        width: 320,
                    },
                    {
                        label: "流程key",
                        prop: "processDefinitionKey",
                        search: true,
                    },
                    {
                        label: "实例id",
                        prop: "processInstanceId",
                        search: true,
                        width: 320,
                    },
                    {
                        label: "状态",
                        prop: "suspensionState",
                        slot: true,
                        width: 80,
                    },
                    {
                        label: "发起人",
                        prop: "startUser",
                        width: 100,
                    },
                    {
                        label: '开始时间',
                        prop: 'startTime',
                        width: 165,
                    },
                ]
            },
            {
              label: "实例id",
              prop: "processInstanceId",
              search: true,
              width: 320,
            },
            {
              label: "状态",
              prop: "suspensionState",
              slot: true,
              width: 80,
            },
            {
              label: "发起人",
              prop: "startUser",
              width: 100,
            },
            {
              label: '开始时间',
              prop: 'startTime',
              width: 165,
            },
          ]
        },
        data: []
      };
            data: []
        }
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          delBtn: this.vaildData(this.permission.flow_follow_delete, false),
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                delBtn: this.vaildData(this.permission.flow_follow_delete, false),
            }
        },
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        }
    },
    methods: {
      rowDel(row) {
        this.followBox = true;
        this.selectionId = row.id;
        this.processInstanceId = row.processInstanceId;
      },
      handleDelete() {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return deleteProcessInstance({deleteReason: this.deleteReason, processInstanceId: this.processInstanceId});
          })
          .then(() => {
            this.onLoad(this.page);
            this.followBox = false;
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      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;
        followList(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();
        });
      }
        rowDel (row) {
            this.followBox = true
            this.selectionId = row.id
            this.processInstanceId = row.processInstanceId
        },
        handleDelete () {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return deleteProcessInstance({ deleteReason: this.deleteReason, processInstanceId: this.processInstanceId })
                })
                .then(() => {
                    this.onLoad(this.page)
                    this.followBox = false
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                })
        },
        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
            followList(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>
  .none-border {
.none-border {
    border: 0;
    background-color: transparent !important;
  }
}
</style>

 src/views/flow/manager.vue

@@ -1,338 +1,336 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               v-model="form"
               :page.sync="page"
               :permission="permissionList"
               @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-radio-group v-model="mode" size="small">
          <el-radio-button label="1">通用流程</el-radio-button>
          <el-radio-button label="2">定制流程</el-radio-button>
        </el-radio-group>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button type="text"
                   size="small"
                   icon="el-icon-refresh"
                   v-if="permission.flow_manager_state"
                   @click.stop="handleState(scope.row,scope.index)">变更状态
        </el-button>
        <el-button type="text"
                   size="small"
                   icon="el-icon-search"
                   v-if="permission.flow_manager_image"
                   @click.stop="handleImage(scope.row,scope.index)">流程图
        </el-button>
        <el-button type="text"
                   size="small"
                   icon="el-icon-delete"
                   v-if="permission.flow_manager_remove"
                   @click.stop="handleSlotDelete(scope.row,scope.index)">删除
        </el-button>
      </template>
      <template slot-scope="{row}"
                slot="tenantId">
        <el-tag>{{row.tenantId===''?'通用':row.tenantId}}</el-tag>
      </template>
      <template slot-scope="{row}"
                slot="version">
        <el-tag>v{{row.version}}</el-tag>
      </template>
      <template slot-scope="{row}"
                slot="suspensionState">
        <el-tag>{{row.suspensionState===1?'激活':'挂起'}}</el-tag>
      </template>
      <template slot-scope="{row}"
                slot="category">
        <el-tag>{{row.categoryName}}</el-tag>
      </template>
    </avue-crud>
    <flow-design is-dialog :is-display.sync="flowBox" :process-definition-id="processDefinitionId"></flow-design>
    <el-dialog title="流程变更"
               append-to-body
               :visible.sync="stateBox"
               width="20%">
      <el-form :model="form"
               ref="form"
               label-width="80px">
        <el-form-item label="流程状态">
          <el-select v-model="flowState" placeholder="请选择" value="">
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="stateBox = false">关 闭</el-button>
        <el-button type="primary"
                   @click="handleDoState">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            ref="crud"
            v-model="form"
            :page.sync="page"
            :permission="permissionList"
            @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-radio-group v-model="mode" size="small">
                    <el-radio-button label="1">通用流程</el-radio-button>
                    <el-radio-button label="2">定制流程</el-radio-button>
                </el-radio-group>
            </template>
            <template slot-scope="scope" slot="menu">
                <el-button
                    type="text"
                    size="small"
                    icon="el-icon-refresh"
                    v-if="permission.flow_manager_state"
                    @click.stop="handleState(scope.row,scope.index)"
                >变更状态</el-button>
                <el-button
                    type="text"
                    size="small"
                    icon="el-icon-search"
                    v-if="permission.flow_manager_image"
                    @click.stop="handleImage(scope.row,scope.index)"
                >流程图</el-button>
                <el-button
                    type="text"
                    size="small"
                    icon="el-icon-delete"
                    v-if="permission.flow_manager_remove"
                    @click.stop="handleSlotDelete(scope.row,scope.index)"
                >删除</el-button>
            </template>
            <template slot-scope="{row}" slot="tenantId">
                <el-tag>{{row.tenantId===''?'通用':row.tenantId}}</el-tag>
            </template>
            <template slot-scope="{row}" slot="version">
                <el-tag>v{{row.version}}</el-tag>
            </template>
            <template slot-scope="{row}" slot="suspensionState">
                <el-tag>{{row.suspensionState===1?'激活':'挂起'}}</el-tag>
            </template>
            <template slot-scope="{row}" slot="category">
                <el-tag>{{row.categoryName}}</el-tag>
            </template>
        </avue-crud>
        <flow-design
            is-dialog
            :is-display.sync="flowBox"
            :process-definition-id="processDefinitionId"
        ></flow-design>
        <el-dialog title="流程变更" append-to-body :visible.sync="stateBox" width="20%">
            <el-form :model="form" ref="form" label-width="80px">
                <el-form-item label="流程状态">
                    <el-select v-model="flowState" placeholder="请选择" value>
                        <el-option
                            v-for="item in stateOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="stateBox = false">关 闭</el-button>
                <el-button type="primary" @click="handleDoState">确 定</el-button>
            </span>
        </el-dialog>
    </basic-container>
</template>

<script>
  import {mapGetters} from "vuex";
  import {managerList, changeState, deleteDeployment} from "@/api/flow/flow";
  import {flowCategory} from "@/util/flow";
import { mapGetters } from "vuex"
import { managerList, changeState, deleteDeployment } from "@/api/flow/flow"
import { flowCategory } from "@/util/flow"

  export default {
    data() {
      return {
        form: {},
        mode: '1',
        selectionId: '',
        selectionList: [],
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        processDefinitionId: '',
        flowBox: false,
        stateBox: false,
        flowState: '',
        stateOptions: [{
          value: 'active',
          label: '激活'
        }, {
          value: 'suspend',
          label: '挂起'
        }],
        option: {
          height: 'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          selection: true,
          editBtn: false,
          addBtn: false,
          viewBtn: false,
          delBtn: false,
          dialogWidth: 900,
          menuWidth: 250,
          dialogClickModal: false,
          column: [
            {
              label: '租户编号',
              prop: 'tenantId',
              slot: true,
              width: 120,
export default {
    data () {
        return {
            form: {},
            mode: '1',
            selectionId: '',
            selectionList: [],
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            {
              label: '流程主键',
              prop: 'id',
            processDefinitionId: '',
            flowBox: false,
            stateBox: false,
            flowState: '',
            stateOptions: [{
                value: 'active',
                label: '激活'
            }, {
                value: 'suspend',
                label: '挂起'
            }],
            option: {
                height: 'auto',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                selection: true,
                editBtn: false,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                dialogWidth: 900,
                menuWidth: 250,
                dialogClickModal: false,
                column: [
                    {
                        label: '租户编号',
                        prop: 'tenantId',
                        slot: true,
                        width: 120,
                    },
                    {
                        label: '流程主键',
                        prop: 'id',
                    },
                    {
                        label: '流程标识',
                        prop: 'key',
                        search: true,
                        width: 150,
                    },
                    {
                        label: '流程名称',
                        prop: 'name',
                        width: 150,
                    },
                    {
                        label: "流程分类",
                        type: "select",
                        row: true,
                        dicUrl: "/api/blade-system/dict/dictionary?code=flow",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dataType: "number",
                        slot: true,
                        prop: "category",
                        search: true,
                        width: 100,
                    },
                    {
                        label: '流程版本',
                        prop: 'version',
                        slot: true,
                        width: 80,
                    },
                    {
                        label: '状态',
                        prop: 'suspensionState',
                        slot: true,
                        width: 80,
                    },
                    {
                        label: '部署时间',
                        prop: 'deploymentTime',
                        width: 165,
                    },
                ]
            },
            {
              label: '流程标识',
              prop: 'key',
              search: true,
              width: 150,
            },
            {
              label: '流程名称',
              prop: 'name',
              width: 150,
            },
            {
              label: "流程分类",
              type: "select",
              row: true,
              dicUrl: "/api/blade-system/dict/dictionary?code=flow",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number",
              slot: true,
              prop: "category",
              search: true,
              width: 100,
            },
            {
              label: '流程版本',
              prop: 'version',
              slot: true,
              width: 80,
            },
            {
              label: '状态',
              prop: 'suspensionState',
              slot: true,
              width: 80,
            },
            {
              label: '部署时间',
              prop: 'deploymentTime',
              width: 165,
            },
          ]
        },
        data: []
      };
            data: []
        }
    },
    watch: {
      'mode'() {
        this.onLoad(this.page);
      }
        'mode' () {
            this.onLoad(this.page)
        }
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          delBtn: this.vaildData(this.permission.flow_manager_remove, false),
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
      deploymentIds() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.deploymentId);
        });
        return ids.join(",");
      }
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                delBtn: this.vaildData(this.permission.flow_manager_remove, false),
            }
        },
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        },
        deploymentIds () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.deploymentId)
            })
            return ids.join(",")
        }
    },
    methods: {
      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();
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        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()
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return deleteDeployment(this.deploymentIds)
                })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crud.toggleSelection()
                    this.onLoad(this.page)
                })
        },
        handleSlotDelete (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return deleteDeployment(row.deploymentId)
                })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crud.toggleSelection()
                    this.onLoad(this.page)
                })
        },
        handleState (row) {
            this.stateBox = true
            this.selectionId = row.id
        },
        handleDoState () {
            if (!this.flowState) {
                this.$message({
                    type: "warn",
                    message: "请先选择流程状态!"
                })
                return
            }
            changeState({ processId: this.selectionId, state: this.flowState }).then(res => {
                const data = res.data
                if (data.success) {
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                    this.stateBox = false
                    this.onLoad(this.page)
                } else {
                    this.$message({
                        type: "warn",
                        message: data.msg
                    })
                }
            })
        },
        handleImage (row) {
            this.processDefinitionId = row.id
            this.flowBox = true
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        refreshChange () {
            this.onLoad(this.page, this.query)
        },
        onLoad (page, params = {}) {
            const values = {
                ...params,
                category: (params.category) ? flowCategory(params.category) : null,
                mode: this.mode
            }
            this.loading = true
            managerList(page.currentPage, page.pageSize, Object.assign(values, this.query)).then(res => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return deleteDeployment(this.deploymentIds);
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
            this.onLoad(this.page);
          });
      },
      handleSlotDelete(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return deleteDeployment(row.deploymentId);
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
            this.onLoad(this.page);
          });
      },
      handleState(row) {
        this.stateBox = true;
        this.selectionId = row.id;
      },
      handleDoState() {
        if (!this.flowState) {
          this.$message({
            type: "warn",
            message: "请先选择流程状态!"
          });
          return;
        }
        changeState({processId: this.selectionId, state: this.flowState}).then(res => {
          const data = res.data;
          if (data.success) {
            this.$message({
              type: "success",
              message: data.msg
            });
            this.stateBox = false;
            this.onLoad(this.page);
          } else {
            this.$message({
              type: "warn",
              message: data.msg
            });
          }
        })
      },
      handleImage(row) {
        this.processDefinitionId = row.id;
        this.flowBox = true;
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        const values = {
          ...params,
          category: (params.category) ? flowCategory(params.category) : null,
          mode: this.mode
        };
        this.loading = true;
        managerList(page.currentPage, page.pageSize, Object.assign(values, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
};
</script>

 src/views/flow/model.vue

@@ -1,482 +1,487 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
               v-model="form"
               :page.sync="page"
               @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="primary"
                   size="mini"
                   icon="el-icon-circle-plus"
                   v-if="permission.flow_model_create"
                   plain
                   @click="handleCreate">创 建
        </el-button>
        <el-button type="danger"
                   size="mini"
                   icon="el-icon-delete"
                   v-if="permission.flow_model_delete"
                   plain
                   @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="scope"
                slot="menu">
        <el-button type="text"
                   size="mini"
                   icon="el-icon-setting"
                   v-if="permission.flow_model_update"
                   @click.stop="handleUpdate(scope.row,scope.index)">配置
        </el-button>
        <el-button type="text"
                   size="mini"
                   icon="el-icon-upload2"
                   v-if="permission.flow_model_deploy"
                   @click.stop="handleDeploy(scope.row,scope.index)">部署
        </el-button>
        <el-button type="text"
                   size="mini"
                   icon="el-icon-delete"
                   v-if="permission.flow_model_delete"
                   @click.stop="handleSlotDelete(scope.row,scope.index)">删除
        </el-button>
      </template>
      <template slot-scope="{row}"
                slot="version">
        <el-tag>v{{ row.version }}</el-tag>
      </template>
    </avue-crud>
    <el-dialog title="流程配置"
               append-to-body
               destroy-on-close
               :visible.sync="flowBox"
               :close-on-press-escape="false"
               :fullscreen="true"
               :before-close="handleNutflowClose"
               custom-class="wf-dialog">
      <wf-design-base v-if="nutflowOption.step === 1"
                      class="animated fadeIn"
                      style="height: calc(100vh - 108px);"
                      ref="wf-design"
                      :options="nutflowOption.step1"></wf-design-base>
      <wf-design-base v-if="nutflowOption.step === 2"
                      class="animated fadeIn"
                      style="height: calc(100vh - 108px);"
                      ref="wf-design-view"
                      :options="nutflowOption.step2"></wf-design-base>
      <span slot="footer"
            class="avue-dialog__footer">
        <el-button size="small"
                   @click="handleNutflowClose(() => {}, true)">取 消</el-button>
        <el-button v-if="nutflowOption.step === 1"
                   size="small"
                   type="success"
                   @click="handleStep(1)">下 一 步</el-button>
        <el-button v-if="nutflowOption.step === 2"
                   size="small"
                   type="success"
                   @click="handleStep(-1)">上 一 步</el-button>
        <el-button v-if="nutflowOption.step === 2"
                   size="small"
                   type="primary"
                   @click="handleSubmitModel">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="流程部署"
               append-to-body
               :visible.sync="deployBox"
               width="20%">
      <avue-form ref="form"
                 :option="optionDeploy"
                 v-model="form"
                 @submit="handleSubmit"/>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="deployBox = false">取 消</el-button>
        <el-button type="primary"
                   @click="handleDoDeploy"
                   :loading="deployLoading">确 定</el-button>
      </span>
    </el-dialog>
  </basic-container>
    <basic-container>
        <avue-crud
            :option="option"
            :table-loading="loading"
            :data="data"
            ref="crud"
            v-model="form"
            :page.sync="page"
            @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="primary"
                    size="mini"
                    icon="el-icon-circle-plus"
                    v-if="permission.flow_model_create"
                    plain
                    @click="handleCreate"
                >创 建</el-button>
                <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    v-if="permission.flow_model_delete"
                    plain
                    @click="handleDelete"
                >删 除</el-button>
            </template>
            <template slot-scope="scope" slot="menu">
                <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-setting"
                    v-if="permission.flow_model_update"
                    @click.stop="handleUpdate(scope.row,scope.index)"
                >配置</el-button>
                <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-upload2"
                    v-if="permission.flow_model_deploy"
                    @click.stop="handleDeploy(scope.row,scope.index)"
                >部署</el-button>
                <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-delete"
                    v-if="permission.flow_model_delete"
                    @click.stop="handleSlotDelete(scope.row,scope.index)"
                >删除</el-button>
            </template>
            <template slot-scope="{row}" slot="version">
                <el-tag>v{{ row.version }}</el-tag>
            </template>
        </avue-crud>
        <el-dialog
            title="流程配置"
            append-to-body
            destroy-on-close
            :visible.sync="flowBox"
            :close-on-press-escape="false"
            :fullscreen="true"
            :before-close="handleNutflowClose"
            custom-class="wf-dialog"
        >
            <wf-design-base
                v-if="nutflowOption.step === 1"
                class="animated fadeIn"
                style="height: calc(100vh - 108px);"
                ref="wf-design"
                :options="nutflowOption.step1"
            ></wf-design-base>
            <wf-design-base
                v-if="nutflowOption.step === 2"
                class="animated fadeIn"
                style="height: calc(100vh - 108px);"
                ref="wf-design-view"
                :options="nutflowOption.step2"
            ></wf-design-base>
            <span slot="footer" class="avue-dialog__footer">
                <el-button size="small" @click="handleNutflowClose(() => {}, true)">取 消</el-button>
                <el-button
                    v-if="nutflowOption.step === 1"
                    size="small"
                    type="success"
                    @click="handleStep(1)"
                >下 一 步</el-button>
                <el-button
                    v-if="nutflowOption.step === 2"
                    size="small"
                    type="success"
                    @click="handleStep(-1)"
                >上 一 步</el-button>
                <el-button
                    v-if="nutflowOption.step === 2"
                    size="small"
                    type="primary"
                    @click="handleSubmitModel"
                >确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="流程部署" append-to-body :visible.sync="deployBox" width="20%">
            <avue-form ref="form" :option="optionDeploy" v-model="form" @submit="handleSubmit" />
            <span slot="footer" class="dialog-footer">
                <el-button @click="deployBox = false">取 消</el-button>
                <el-button type="primary" @click="handleDoDeploy" :loading="deployLoading">确 定</el-button>
            </span>
        </el-dialog>
    </basic-container>
</template>

<script>
import {mapGetters} from "vuex";
import {modelList, removeModel, deployModel, submitModel, detail} from "@/api/flow/flow";
import {flowCategory} from "@/util/flow";
import { mapGetters } from "vuex"
import { modelList, removeModel, deployModel, submitModel, detail } from "@/api/flow/flow"
import { flowCategory } from "@/util/flow"

export default {
  data() {
    return {
      form: {},
      optionDeploy: {
        menuBtn: false,
        column: [
          {
            label: "流程类型",
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=flow",
            props: {
              label: "dictValue",
              value: "dictKey"
    data () {
        return {
            form: {},
            optionDeploy: {
                menuBtn: false,
                column: [
                    {
                        label: "流程类型",
                        type: "select",
                        dicUrl: "/api/blade-system/dict/dictionary?code=flow",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dataType: "number",
                        slot: true,
                        prop: "categoryValue",
                        search: true,
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请选择流程类型",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "流程模式",
                        prop: "flowMode",
                        type: "radio",
                        dicData: [
                            {
                                label: "通用流程",
                                value: 1
                            },
                            {
                                label: "定制流程",
                                value: 2
                            }
                        ],
                        value: 1,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: '请选择流程模式',
                                trigger: 'blur'
                            }
                        ],
                    },
                    {
                        label: "所属租户",
                        prop: "tenantId",
                        type: "tree",
                        multiple: true,
                        dicUrl: "/api/blade-system/tenant/select",
                        props: {
                            label: "tenantName",
                            value: "tenantId"
                        },
                        display: false,
                        span: 24,
                        rules: [
                            {
                                required: true,
                                message: '请选择所属租户',
                                trigger: 'blur'
                            }
                        ],
                    },
                ],
            },
            dataType: "number",
            slot: true,
            prop: "categoryValue",
            search: true,
            span: 24,
            rules: [{
              required: true,
              message: "请选择流程类型",
              trigger: "blur"
            }]
          },
          {
            label: "流程模式",
            prop: "flowMode",
            type: "radio",
            dicData: [
              {
                label: "通用流程",
                value: 1
              },
              {
                label: "定制流程",
                value: 2
              }
            ],
            value: 1,
            span: 24,
            rules: [
              {
                required: true,
                message: '请选择流程模式',
                trigger: 'blur'
              }
            ],
          },
          {
            label: "所属租户",
            prop: "tenantId",
            type: "tree",
            multiple: true,
            dicUrl: "/api/blade-system/tenant/select",
            props: {
              label: "tenantName",
              value: "tenantId"
            selectionId: '',
            selectionList: [],
            query: {},
            loading: true,
            deployLoading: false,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            display: false,
            span: 24,
            rules: [
              {
                required: true,
                message: '请选择所属租户',
                trigger: 'blur'
              }
            ],
          },
        ],
      },
      selectionId: '',
      selectionList: [],
      query: {},
      loading: true,
      deployLoading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      deployBox: false,
      flowBox: false,
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        selection: true,
        editBtn: false,
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        dialogWidth: 900,
        menuWidth: 200,
        dialogClickModal: false,
        size: 'mini',
        searchSize: 'mini',
        column: [
          {
            label: '模型主键',
            prop: 'id',
          },
          {
            label: '模型标识',
            prop: 'modelKey',
            search: true,
            overHidden: true
          },
          {
            label: '模型名称',
            prop: 'name',
            search: true,
            overHidden: true
          },
          {
            label: '流程版本',
            prop: 'version',
            slot: true,
            overHidden: true
          },
          {
            label: '创建时间',
            prop: 'created',
            overHidden: true
          },
          {
            label: '更新时间',
            prop: 'lastUpdated',
            overHidden: true
          },
        ]
      },
      data: [],
      nutflowOption: {
        process: {},
        step: 1,
        step1: {
          toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
            deployBox: false,
            flowBox: false,
            option: {
                height: 'auto',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                selection: true,
                editBtn: false,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                dialogWidth: 900,
                menuWidth: 200,
                dialogClickModal: false,
                size: 'mini',
                searchSize: 'mini',
                column: [
                    {
                        label: '模型主键',
                        prop: 'id',
                    },
                    {
                        label: '模型标识',
                        prop: 'modelKey',
                        search: true,
                        overHidden: true
                    },
                    {
                        label: '模型名称',
                        prop: 'name',
                        search: true,
                        overHidden: true
                    },
                    {
                        label: '流程版本',
                        prop: 'version',
                        slot: true,
                        overHidden: true
                    },
                    {
                        label: '创建时间',
                        prop: 'created',
                        overHidden: true
                    },
                    {
                        label: '更新时间',
                        prop: 'lastUpdated',
                        overHidden: true
                    },
                ]
            },
            data: [],
            nutflowOption: {
                process: {},
                step: 1,
                step1: {
                    toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
                },
                step2: {
                    mode: 'view',
                    simulation: true,
                    minimap: true,
                }
            }
        }
    },
    watch: {
        'form.flowMode' () {
            this.$refs.form.option.column.filter(item => {
                if (item.prop === "tenantId") {
                    item.display = this.form.flowMode === 2
                }
            })
        }
    },
    computed: {
        ...mapGetters(["permission"]),
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        }
    },
    methods: {
        handleSubmitModel () {
            const registry = this.$refs['wf-design-view'].getElementRegistry().getAll()
            const { businessObject } = registry[0]
            const { id, name, documentation } = businessObject
            const description = (documentation && documentation.length > 0) ? documentation[0].text : null
            const params = {
                ...this.nutflowOption.process,
                modelKey: id,
                name,
                description,
                modelEditorXml: this.nutflowOption.process.xml
            }
            submitModel(params).then(() => {
                this.$message.success("操作成功")
                this.handleNutflowClose()
                this.onLoad(this.page, this.query)
            })
        },
        step2: {
          mode: 'view',
          simulation: true,
          minimap: true,
        }
      }
    };
  },
  watch: {
    'form.flowMode'() {
      this.$refs.form.option.column.filter(item => {
        if (item.prop === "tenantId") {
          item.display = this.form.flowMode === 2;
        }
      });
    }
  },
  computed: {
    ...mapGetters(["permission"]),
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  methods: {
    handleSubmitModel() {
      const registry = this.$refs['wf-design-view'].getElementRegistry().getAll()
      const {businessObject} = registry[0]
      const {id, name, documentation} = businessObject
      const description = (documentation && documentation.length > 0) ? documentation[0].text : null
      const params = {
        ...this.nutflowOption.process,
        modelKey: id,
        name,
        description,
        modelEditorXml: this.nutflowOption.process.xml
      }
      submitModel(params).then(() => {
        this.$message.success("操作成功")
        this.handleNutflowClose()
        this.onLoad(this.page, this.query)
      })
    },
    handleStep(step) {
      if (step === 1) { // 下一步
        this.$refs['wf-design'].getData('xml').then(data => {
          this.$set(this.nutflowOption.step1, 'xml', data)
          this.$set(this.nutflowOption.step2, 'xml', data)
          this.$set(this.nutflowOption.process, 'xml', data)
          this.$set(this.nutflowOption, 'step', 2)
        })
      } else this.$set(this.nutflowOption, 'step', 1)
    },
    handleNutflowClose(done, flag) {
      const initOption = {
        process: {},
        step: 1,
        step1: {
          toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
        handleStep (step) {
            if (step === 1) { // 下一步
                this.$refs['wf-design'].getData('xml').then(data => {
                    this.$set(this.nutflowOption.step1, 'xml', data)
                    this.$set(this.nutflowOption.step2, 'xml', data)
                    this.$set(this.nutflowOption.process, 'xml', data)
                    this.$set(this.nutflowOption, 'step', 2)
                })
            } else this.$set(this.nutflowOption, 'step', 1)
        },
        step2: {
          mode: 'view',
          simulation: true,
          minimap: true,
        handleNutflowClose (done, flag) {
            const initOption = {
                process: {},
                step: 1,
                step1: {
                    toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
                },
                step2: {
                    mode: 'view',
                    simulation: true,
                    minimap: true,
                }
            }
            if (done || flag) {
                this.$confirm('确定要关闭吗？关闭未保存的修改都会丢失。', '警告', {
                    type: 'warning'
                }).then(() => {
                    this.$set(this, 'nutflowOption', initOption)
                    if (typeof done == 'function') done()
                    this.flowBox = false
                }).catch(() => {
                })
            } else {
                this.$set(this, 'nutflowOption', initOption)
                this.flowBox = false
            }
        },
        handleSubmit (form, done) {
            this.deployLoading = true
            deployModel({
                modelId: this.selectionId,
                category: flowCategory(form.categoryValue),
                tenantIds: form.tenantId.join(",")
            }).then(res => {
                const data = res.data
                if (data.success) {
                    this.$message({
                        type: "success",
                        message: data.msg
                    })
                    done()
                    this.$refs.form.resetForm()
                    this.deployBox = false
                    this.deployLoading = false
                } else {
                    done()
                    this.deployLoading = false
                    this.$message({
                        type: "warn",
                        message: data.msg
                    })
                }
            })
        },
        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()
        },
        handleDelete () {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据")
                return
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return removeModel(this.ids)
                })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crud.toggleSelection()
                    this.onLoad(this.page)
                })
        },
        handleCreate () {
            this.flowBox = true
        },
        handleUpdate (row) {
            detail({ id: row.id }).then(res => {
                const data = res.data.data
                const { modelEditorXml } = data
                this.$set(this.nutflowOption.step1, 'xml', modelEditorXml)
                this.$set(this.nutflowOption, 'process', data)
                this.flowBox = true
            })
        },
        handleDeploy (row) {
            this.deployBox = true
            this.selectionId = row.id
        },
        handleDoDeploy () {
            this.$refs.form.submit()
        },
        handleSlotDelete (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return removeModel(row.id)
                })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    this.$refs.crud.toggleSelection()
                    this.onLoad(this.page)
                })
        },
        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
            modelList(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()
            })
        }
      }
      if (done || flag) {
        this.$confirm('确定要关闭吗？关闭未保存的修改都会丢失。', '警告', {
          type: 'warning'
        }).then(() => {
          this.$set(this, 'nutflowOption', initOption)
          if (typeof done == 'function') done()
          this.flowBox = false
        }).catch(() => {
        })
      } else {
        this.$set(this, 'nutflowOption', initOption)
        this.flowBox = false
      }
    },
    handleSubmit(form, done) {
      this.deployLoading = true;
      deployModel({
        modelId: this.selectionId,
        category: flowCategory(form.categoryValue),
        tenantIds: form.tenantId.join(",")
      }).then(res => {
        const data = res.data;
        if (data.success) {
          this.$message({
            type: "success",
            message: data.msg
          });
          done();
          this.$refs.form.resetForm();
          this.deployBox = false;
          this.deployLoading = false;
        } else {
          done();
          this.deployLoading = false;
          this.$message({
            type: "warn",
            message: data.msg
          });
        }
      })
    },
    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();
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return removeModel(this.ids);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
          this.onLoad(this.page);
        });
    },
    handleCreate() {
      this.flowBox = true;
    },
    handleUpdate(row) {
      detail({id: row.id}).then(res => {
        const data = res.data.data
        const {modelEditorXml} = data
        this.$set(this.nutflowOption.step1, 'xml', modelEditorXml)
        this.$set(this.nutflowOption, 'process', data)
        this.flowBox = true;
      })
    },
    handleDeploy(row) {
      this.deployBox = true;
      this.selectionId = row.id;
    },
    handleDoDeploy() {
      this.$refs.form.submit();
    },
    handleSlotDelete(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return removeModel(row.id);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
          this.onLoad(this.page);
        });
    },
    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;
      modelList(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 lang="scss">

.wf-dialog {
  .el-dialog__body {
    padding: 5px;
  }
    .el-dialog__body {
        padding: 5px;
    }

  .avue-dialog__footer {
    text-align: center;
  }
    .avue-dialog__footer {
        text-align: center;
    }
}
</style>

 src/views/land/cs.vue

@@ -178,7 +178,7 @@
            })
        },
        //进入地图模式
        goToMapModel(row){
        goToMapModel (row) {
            this.$router.push({
                path: `/mapPattern`,
                query: row,

 src/views/land/land.vue

@@ -1,377 +1,366 @@
<template>
  <basic-container>
    <avue-crud
      class="tablesss"
      :before-open="beforeOpen"
      :option="option"
      :data="data"
      :page.sync="page"
      v-model="form"
      ref="crud"
      :permission="permissionList"
      @on-load="onLoad"
      :table-loading="loading"
      @row-save="rowSave"
      @search-change="searchChange"
      @search-reset="searchReset"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @selection-change="selectionChange"
      @refresh-change="refreshChange"
    >
      <template slot="menuLeft">
        <el-button
          type="danger"
          size="small"
          plain
          icon="el-icon-delete"
          v-if="permission.rail_delete"
          @click="handleDelete"
        >删 除
        </el-button>
      </template>
      <!-- 地图插入 -->
      <template slot-scope="{ type, disabled }" slot="lineForm">
        <getMapDataInThere
          ref="getMapData"
          id="getMapData"
          @setMapData="setMapData"
        ></getMapDataInThere>
      </template>
      <template slot-scope="{ type, size, row }" slot="menu">
        <el-button
          icon="el-icon-circle-plus-outline"
          type="text"
          size="mini"
          @click="start(row)"
          :size="size"
        >农事记录
        </el-button
    <basic-container>
        <avue-crud
            class="tablesss"
            :before-open="beforeOpen"
            :option="option"
            :data="data"
            :page.sync="page"
            v-model="form"
            ref="crud"
            :permission="permissionList"
            @on-load="onLoad"
            :table-loading="loading"
            @row-save="rowSave"
            @search-change="searchChange"
            @search-reset="searchReset"
            @row-update="rowUpdate"
            @row-del="rowDel"
            @selection-change="selectionChange"
            @refresh-change="refreshChange"
        >
        <el-button
          icon="el-icon-circle-plus-outline"
          type="text"
          size="mini"
          @click="startc(row)"
          :size="size"
        >采收记录
        </el-button
        >
      </template>
    </avue-crud>
  </basic-container>
            <template slot="menuLeft">
                <el-button
                    type="danger"
                    size="small"
                    plain
                    icon="el-icon-delete"
                    v-if="permission.rail_delete"
                    @click="handleDelete"
                >删 除</el-button>
            </template>
            <!-- 地图插入 -->
            <template slot-scope="{ type, disabled }" slot="lineForm">
                <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
            </template>
            <template slot-scope="{ type, size, row }" slot="menu">
                <el-button
                    icon="el-icon-circle-plus-outline"
                    type="text"
                    size="mini"
                    @click="start(row)"
                    :size="size"
                >农事记录</el-button>
                <el-button
                    icon="el-icon-circle-plus-outline"
                    type="text"
                    size="mini"
                    @click="startc(row)"
                    :size="size"
                >采收记录</el-button>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import {getList, add, update, remove,getDetail} from "@/api/land/land";
import getMapDataInThere from "./getMapDataInThere.vue";
import { getList, add, update, remove, getDetail } from "@/api/land/land"
import getMapDataInThere from "./getMapDataInThere.vue"

import {mapGetters} from "vuex";
import { mapGetters } from "vuex"

export default {
  components: {
    getMapDataInThere
  },
  data() {
    return {
      loading: true,
      selectionList: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      form: {},
      query: {},
      data: [],
      option: {
        index: true,
        tip: false,
        addBtn: true,
        viewBtn: true,
        searchMenuSpan: 6,
        height: 583,
        menuWidth: 300,
        border: true,
        align: "center",
        selection: true,
        column: [
          {
            label: "地块名称",
            search: true,
            prop: "landName",
            rules: [{
              required: true,
              message: "请输入地块名称",
              trigger: "blur"
            }]
          },
          {
            label: "地块类型",
            type: "select",
            prop: "landType",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
            props: {
              label: "dictValue",
              value: "dictKey"
    components: {
        getMapDataInThere
    },
    data () {
        return {
            loading: true,
            selectionList: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            dataType: "number",
            search: true,
            rules: [{
              required: true,
              message: "请选择地块类型",
              trigger: "blur"
            }]
          },
          {
            label: "地块面积",
            span: 6,
            addDisplay: false,
            disabled: true,
            gutter: 20,
            tip: '绘制轮廓后自动计算',
            prop: "landArea",
          },
          // {
          //   label: "地块范围",
          //   prop: "landRange",
          // },
          // {
          //   label: "状态 （0：已耕种 1：未耕种）",
          //   prop: "type",
          //   rules: [{
          //     required: true,
          //     message: "请输入状态 （0：已耕种 1：未耕种）",
          //     trigger: "blur"
          //   }]
          // },
          {
            label: "面积单位",
            prop: "landUnit",
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
            span: 6,
          },
          {
            label: "路线展示",
            labelWidth: "0",
            prop: "line",
            className: "mapClass",
            hide: true,
            display: true,
            span: 24,
            formslot: true,
            addDisplay: true
          }
        ],
      }
    };
  },
  created() {
    // this.getRailLazyTree();
  },
  computed: {
    ...mapGetters(["userInfo", "permission", "polygons"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.land_add, false),
        viewBtn: this.vaildData(this.permission.land_view, false),
        delBtn: this.vaildData(this.permission.land_delete, false),
        editBtn: this.vaildData(this.permission.land_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  mounted() {
  },
  methods: {
    rowSave(row, done, loading) {
      if (this.polygons.length == 0) {
        //没有面的数据
        this.$refs.getMapData.isCheck = true;
        loading();
      } else {
        //如果有值，空间坐标转换
        let pol = this.polygons;
        let polLength = this.polygons.length - 1;
        let usePolygons = "";
        for (let k in pol) {
          usePolygons += pol[k].lng + "," + pol[k].lat;
          if (k != polLength) {
            usePolygons += ";";
          }
        }
        //设置坐标点
        row.userId = this.userInfo.user_id;
        row.landRange = usePolygons;
      }
      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;
        // });
        getDetail(this.form.id).then((res) => {
          if (res.data.code == 200) {
            this.form = res.data.data;
            let usePolygons = this.form.landRange
              .split("POLYGON((")[1]
              .split("))")[0]
              .split(",");
            for (let k in usePolygons) {
              usePolygons[k] = {
                lng: +usePolygons[k].split(" ")[0],
                lat: +usePolygons[k].split(" ")[1],
              };
            form: {},
            query: {},
            data: [],
            option: {
                index: true,
                tip: false,
                addBtn: true,
                viewBtn: true,
                searchMenuSpan: 6,
                height: 583,
                menuWidth: 300,
                border: true,
                align: "center",
                selection: true,
                column: [
                    {
                        label: "地块名称",
                        search: true,
                        prop: "landName",
                        rules: [{
                            required: true,
                            message: "请输入地块名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "地块类型",
                        type: "select",
                        prop: "landType",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dataType: "number",
                        search: true,
                        rules: [{
                            required: true,
                            message: "请选择地块类型",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "地块面积",
                        span: 6,
                        addDisplay: false,
                        disabled: true,
                        gutter: 20,
                        tip: '绘制轮廓后自动计算',
                        prop: "landArea",
                    },
                    // {
                    //   label: "地块范围",
                    //   prop: "landRange",
                    // },
                    // {
                    //   label: "状态 （0：已耕种 1：未耕种）",
                    //   prop: "type",
                    //   rules: [{
                    //     required: true,
                    //     message: "请输入状态 （0：已耕种 1：未耕种）",
                    //     trigger: "blur"
                    //   }]
                    // },
                    {
                        label: "面积单位",
                        prop: "landUnit",
                        type: "select",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dataType: "number",
                        span: 6,
                    },
                    {
                        label: "路线展示",
                        labelWidth: "0",
                        prop: "line",
                        className: "mapClass",
                        hide: true,
                        display: true,
                        span: 24,
                        formslot: true,
                        addDisplay: true
                    }
                ],
            }
            this.$refs.getMapData.draw(usePolygons);
          }
        });
      }
      done();
        }
    },
    //农事操作
    start(row) {
      this.$router.push({
        path: `/farmingrecord`,
        query: row
      });
    created () {
        // this.getRailLazyTree();
    },
    startc(row) {
      this.$router.push({
        path: `/recovery`,
        query: row
      });
    computed: {
        ...mapGetters(["userInfo", "permission", "polygons"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.land_add, false),
                viewBtn: this.vaildData(this.permission.land_view, false),
                delBtn: this.vaildData(this.permission.land_delete, false),
                editBtn: this.vaildData(this.permission.land_edit, false)
            }
        },
        ids () {
            let ids = []
            this.selectionList.forEach(ele => {
                ids.push(ele.id)
            })
            return ids.join(",")
        }
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    mounted () {
    },
    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();
      });
    methods: {
        rowSave (row, done, loading) {
            if (this.polygons.length == 0) {
                //没有面的数据
                this.$refs.getMapData.isCheck = true
                loading()
            } else {
                //如果有值，空间坐标转换
                let pol = this.polygons
                let polLength = this.polygons.length - 1
                let usePolygons = ""
                for (let k in pol) {
                    usePolygons += pol[k].lng + "," + pol[k].lat
                    if (k != polLength) {
                        usePolygons += ";"
                    }
                }
                //设置坐标点
                row.userId = this.userInfo.user_id
                row.landRange = usePolygons
            }
            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;
                // });
                getDetail(this.form.id).then((res) => {
                    if (res.data.code == 200) {
                        this.form = res.data.data
                        let usePolygons = this.form.landRange
                            .split("POLYGON((")[1]
                            .split("))")[0]
                            .split(",")
                        for (let k in usePolygons) {
                            usePolygons[k] = {
                                lng: +usePolygons[k].split(" ")[0],
                                lat: +usePolygons[k].split(" ")[1],
                            }
                        }
                        this.$refs.getMapData.draw(usePolygons)
                    }
                })
            }
            done()
        },
        //农事操作
        start (row) {
            this.$router.push({
                path: `/farmingrecord`,
                query: row
            })
        },
        startc (row) {
            this.$router.push({
                path: `/recovery`,
                query: row
            })
        },
        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 lang="scss">

.mapClass div label {
  display: none;
    display: none;
}

.mapClassMain {
  padding-left: 5rem !important;
    padding-left: 5rem !important;
}


#getMapData {
  width: calc(100% + 90px);
  position: relative;
  left: -90px;
  height: 400px;
    width: calc(100% + 90px);
    position: relative;
    left: -90px;
    height: 400px;
}
</style>

Diff truncated after the above file
src/views/land/landAdd.vue
src/views/land/landMap.vue
src/views/machining/machining.vue
src/views/mapPattern/index.vue
src/views/monitor/log/api.vue
src/views/monitor/log/error.vue
src/views/monitor/log/usual.vue
src/views/panorama/panorama.vue
src/views/recovery/recovery.vue
src/views/remote/remote.vue
src/views/report/reportlist.vue
src/views/resource/attach.vue
src/views/resource/oss.vue
src/views/resource/sms.vue
src/views/sale/sale.vue
src/views/soldr/soldr.vue
src/views/soldrecord/soldrecord.vue
src/views/statistics/farmplantarea.vue