部分内容的修改整理

shuishen

2021-09-10 97837d1f683c4c1900a01dc86c1e08e7c90d1de3

 src/views/securityEquipment/equipments.vue

@@ -1,60 +1,51 @@
<template>
  <basic-container>
    <div class="equipments">
      <avue-crud
        :option="option"
        :data="data"
        :page.sync="page"
        ref="crudrec"
        @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"
            @click="handleDelete"
            >删 除
          </el-button>
          <el-button
            type="success"
            size="small"
            plain
            icon="el-icon-upload2"
            @click="handleImport"
            >批量导入
          </el-button>
        </template>
      </avue-crud>
      <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>
    </div>
  </basic-container>
    <basic-container>
        <div class="equipments">
            <avue-crud :option="option"
                       :data="data"
                       :page.sync="page"
                       ref="crudrec"
                       @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"
                               @click="handleDelete">删 除
                    </el-button>
                    <el-button type="success"
                               size="small"
                               plain
                               icon="el-icon-upload2"
                               @click="handleImport">批量导入
                    </el-button>
                </template>
            </avue-crud>
            <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>
        </div>
    </basic-container>
</template>

<script>
@@ -62,266 +53,268 @@
import { getdata, adddata, update, remove } from "@/api/equipments/equipments";

export default {
  props: ["fromDeptId"],
  data() {
    return {
      excelBox: false,
      excelForm: {},
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "文件上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "文件上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
    props: ["fromDeptId"],
    data () {
        return {
            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/equipage/import-equipage",
                    },
                    {
                        label: "模板下载",
                        prop: "excelTemplate",
                        formslot: true,
                        span: 24,
                    },
                ],
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: "/api/equipage/import-equipage",
          },
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24,
          },
        ],
      },

      loading: true,
      selectionList: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      query: {},
      data: [],
      option: {
        // card: true,
        tip: false,
        searchSize: "mini",
        searchMenuSpan: 6,
        height: 583,
        index: true,
        menuWidth: 160,
        border: true,
        align: "center",
        selection: true,
        column: column,
        labelWidth: 110,
      },
    };
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
            loading: true,
            selectionList: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            query: {},
            data: [],
            option: {
                // card: true,
                tip: false,
                searchSize: "mini",
                searchMenuSpan: 6,
                height: 583,
                index: true,
                menuWidth: 160,
                border: true,
                align: "center",
                selection: true,
                column: column,
                labelWidth: 110,
                addTitle: "信息采集",
                addBtnText: "信息采集",
            },
        };
    },
  },
  methods: {
    handleImport() {
      this.excelBox = true;
    },
    uploadAfter(res, done, loading, column) {
      window.console.log(column);
      this.excelBox = false;
      this.refreshChange();
      done();
    },
    handleTemplate() {
      window.open(`/api/equipage/export-template`);
    },
    sizeChange(val) {
      this.page1.currentPage = 1;
      this.page1.pageSize = val;
      this.getData();
      //   this.$message.success("行数" + val);
    },
    currentChange(val) {
      this.page1.currentPage = val;
      this.getData();
      //   this.$message.success("页码" + val);
    },
    rowSave(form, done, loading) {
      var that = this;
      //   var form = this.data[0];
      //   delete form.id;
      //   for (var k = 0; k < 13; k++) {
      // console.log(form, "12135");
      // form["deptId"] = form.tenantName;
      // delete form.tenantName;
      // console.log(this.fromDeptId);
      // console.log(form);
      if (this.fromDeptId != undefined) {
        form["deptId"] = this.fromDeptId;
      }
      adddata(form).then(
        (res) => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    computed: {
        ids () {
            let ids = [];
            this.selectionList.forEach((ele) => {
                ids.push(ele.id);
            });
            return ids.join(",");
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
      //   }
    },
    searchChange(params, done) {
      params = JSON.parse(JSON.stringify(params));
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    rowUpdate(row, index, done, loading) {
      // row["deptId"] = row.tenantName;
      // delete row.tenantName;
      // console.log(row.deptId);
      if (this.fromDeptId != undefined) {
        row["deptId"] = this.fromDeptId;
      }
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    methods: {
        handleImport () {
            this.excelBox = true;
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
        uploadAfter (res, done, loading, column) {
            window.console.log(column);
            this.excelBox = false;
            this.refreshChange();
            done();
        },
        handleTemplate () {
            window.open(`/api/equipage/export-template`);
        },
        sizeChange (val) {
            this.page1.currentPage = 1;
            this.page1.pageSize = val;
            this.getData();
            //   this.$message.success("行数" + val);
        },
        currentChange (val) {
            this.page1.currentPage = val;
            this.getData();
            //   this.$message.success("页码" + val);
        },
        rowSave (form, done, loading) {
            var that = this;
            //   var form = this.data[0];
            //   delete form.id;
            //   for (var k = 0; k < 13; k++) {
            // console.log(form, "12135");
            // form["deptId"] = form.tenantName;
            // delete form.tenantName;
            // console.log(this.fromDeptId);
            // console.log(form);
            if (this.fromDeptId != undefined) {
                form["deptId"] = this.fromDeptId;
            }
            adddata(form).then(
                (res) => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    done();
                },
                (error) => {
                    window.console.log(error);
                    loading();
                }
            );
            //   }
        },
        searchChange (params, done) {
            params = JSON.parse(JSON.stringify(params));
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        searchReset () {
            this.query = {};
            this.onLoad(this.page);
        },
        rowUpdate (row, index, done, loading) {
            // row["deptId"] = row.tenantName;
            // delete row.tenantName;
            // console.log(row.deptId);
            if (this.fromDeptId != undefined) {
                row["deptId"] = this.fromDeptId;
            }
            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: "操作成功!",
                    });
                });
        },
        selectionChange (list) {
            this.selectionList = list;
        },
        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.crudrec.toggleSelection();
                });
        },
        refreshChange () {
            this.onLoad(this.page, this.query);
        },
        onLoad (page, params = {}) {
            this.loading = true;
            // console.log(params.deptId);
            if (this.fromDeptId != undefined) {
                params["deptId"] = this.fromDeptId;
                for (let k in this.option.column) {
                    if (this.option.column[k].prop == "deptId") {
                        this.option.column[k].search = false;
                        this.option.column[k].hide = true;
                        this.option.column[k].addDisplay = false;
                        this.option.column[k].editDisplay = false;
                    }
                }
                // this.option.column[4].  = false;
                // this.option.column[6].search = false;
                // this.option.column[6].hide = true;
                // this.option.column[6].addDisplay = false;
                // this.option.column[6].editDisplay = false;
            } else {
                for (let k in this.option.column) {
                    if (this.option.column[k].prop == "deptId") {
                        this.option.column[k].search = true;
                        this.option.column[k].hide = false;
                        this.option.column[k].addDisplay = true;
                        this.option.column[k].editDisplay = true;
                    }
                }
                // this.option.column[4].search = true;
                //   this.option.column[6].search = true;
                // this.option.column[6].hide = false;
                // this.option.column[6].addDisplay = true;
                // this.option.column[6].editDisplay = true;
            }
            getdata(
                page.currentPage,
                page.pageSize,
                Object.assign(params, this.query)
            ).then((res) => {
                // console.log(res);
                const data = res.data.data;
                this.page.total = data.total;
                this.data = data.records;
                console.log(this.data);
                this.loading = false;
            });
        },
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    mounted () {
        // this.Ourdata = data;
        // this.getData();
        // this.onLoad(this.page);
        // var dept_id = JSON.parse(
        //   window.localStorage.getItem("saber-userInfo")
        // ).content.dept_id;
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    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.crudrec.toggleSelection();
        });
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      // console.log(params.deptId);
      if (this.fromDeptId != undefined) {
        params["deptId"] = this.fromDeptId;
        for (let k in this.option.column) {
          if (this.option.column[k].prop == "deptId") {
            this.option.column[k].search = false;
            this.option.column[k].hide = true;
            this.option.column[k].addDisplay = false;
            this.option.column[k].editDisplay = false;
          }
        }
        // this.option.column[4].  = false;
        // this.option.column[6].search = false;
        // this.option.column[6].hide = true;
        // this.option.column[6].addDisplay = false;
        // this.option.column[6].editDisplay = false;
      } else {
        for (let k in this.option.column) {
          if (this.option.column[k].prop == "deptId") {
            this.option.column[k].search = true;
            this.option.column[k].hide = false;
            this.option.column[k].addDisplay = true;
            this.option.column[k].editDisplay = true;
          }
        }
        // this.option.column[4].search = true;
        //   this.option.column[6].search = true;
        // this.option.column[6].hide = false;
        // this.option.column[6].addDisplay = true;
        // this.option.column[6].editDisplay = true;
      }
      getdata(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        // console.log(res);
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        console.log(this.data);
        this.loading = false;
      });
    },
  },
  mounted() {
    // this.Ourdata = data;
    // this.getData();
    // this.onLoad(this.page);
    // var dept_id = JSON.parse(
    //   window.localStorage.getItem("saber-userInfo")
    // ).content.dept_id;
  },
};
</script>

<style lang="scss">
.equipments {
  width: 100%;
  height: 100%;
  //   border: 1px solid #000;
  box-sizing: border-box;
    width: 100%;
    height: 100%;
    //   border: 1px solid #000;
    box-sizing: border-box;
}
// .el-card__body {
//   padding-bottom: 5px !important;
@@ -331,4 +324,4 @@
// .el-tag--light {
//   padding: 0 !important;
// }
</style>
</style>