jonhon-mes-web/src/views/safetyManagement/wastewater/components/dischargeRec.vue

<template>
  <div>
    <avue-crud :option="option" :table-loading="loading" :data="data" v-model="form" v-model:page="page" ref="crud"
     @row-update="rowUpdate"
      @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 #menu-left>
        <!-- <el-button type="danger" icon="el-icon-delete" @click="handleDelete">删 除
            </el-button> -->
        <el-button type="primary" @click="moldAddFn(null, true)">新增</el-button>
      </template>
      <template #menu-right>
        <el-button type="primary"  @click="handleImport">导入
        </el-button>
      </template>
    </avue-crud>
    <!-- 新增 -->
    <addEditDialogDischargeRec 
    v-if="addOpen" 
    :showDialog="addOpen"
    @closeDialog="closeDialog" 
    :moldAddMore="moldAddMore" 
    :handleManList="handleManList"
    :teamList="teamList"
    @submitData="handleSubmitData">
    </addEditDialogDischargeRec>
    
    <!-- 导入 -->
    <basic-import v-if="isShowImport" title="导入" :isShow="isShowImport"
      templateUrl="/blade-desk/bsDischargeRec/downloadExcelTemplate" templateName="槽液排放记录导入模板.xlsx"
      importUrl="/blade-desk/bsDischargeRec/importExcel" @closeDialog="closeDialog"></basic-import>
  </div>
</template>
<script>
import { getList, update, getType, getUserList } from '@/api/safetyManagement/dischargeRec.js';
import basicImport from '@/components/basic-import/main.vue';
import addEditDialogDischargeRec from './addEditDialogDischargeRec.vue';
import { getTeam } from '@/api/tankSolutionSystem/info'

export default {
  components: {
    basicImport,
    addEditDialogDischargeRec,
  },
  data() {
    return {
      TankSol:[],
      addOpen: false, //新增弹窗
      teamList: [],
      moldAddMore: true,
      isShowImport: false,
      loading: false,
      selectionList: [],
      handleManList: [], // 水处理工选项
      option: {
        addBtn: false,
        height: "auto",
        calcHeight: 32,
        tip: false,
        simplePage: true,
        searchShow: true,
        searchMenuSpan: 6,
        searchIcon: true,
        searchIndex: 3,
        tree: false,
        border: true,
        index: true,
        selection: true,
        viewBtn: false,
        delBtn: false,
        editBtnText: "修改",
        addBtnIcon: " ",
        viewBtnIcon: " ",
        delBtnIcon: " ",
        editBtnIcon: " ",
        viewBtnText: "详情",
        labelWidth: 120,
        menuWidth: 120,
        dialogWidth: 1040,
        dialogClickModal: false,
        searchEnter: true,
        excelBtn: false,
        filterBtn: true,
        searchShowBtn: false,
        columnSort: true,
        excelBtn: true,
        columnSort: true,
        index: false,
        showOverflowTooltip: true,
        searchLabelPosition: "left",
        searchLabelPosition: "left",
        searchGutter: 24,
        searchSpan: 6,
        menuAlign: "left",
        gridBtn: false,
        searchMenuPosition: "right",
        align: "center",
        column: [
          {
            label: "报废槽液类型",
            prop: "wasteType",
            // bind: "wasteType.wtName",
            sortable: true,
            filter: true,
            span: 12,
            search: true,
            searchLabelWidth: 100,
            type: 'select',
            remote: true,
            dicUrl: '/api/blade-system/dict/dictionary?code=ScrapTankSolType',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            rules: [
              {
                required: true,
                message: "请选择报废槽液类型",
                trigger: "blur",
              },
            ],
          },
          {
            label: "排放班组",
            prop: "bsTeamSet",
            // bind: "bsTeamSet.tsName",
            search: true,
            sortable: true,
            filter: true,
            span: 12,
            type: 'select',
            dicUrl: '/api/blade-desk/BA/TeamSet/listForSelect',
            props: {
              label: 'tsName',
              value: 'tsCode'
            },
            rules: [
              {
                required: true,
                message: "请输入名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "排放量(单位:L)",
            prop: "amount",
            search: true,
            sortable: true,
            filter: true,
            span: 12,
            searchLabelWidth: 110,
            rules: [
              {
                required: true,
                message: "请输入药品名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "日期",
            prop: "queryDirDate",
            search: true,
            searchLabelWidth: 50,
            sortable: true,
            filter: true,
            hide: true,
            editDisplay:false,
            span: 12,
            type: "datetime",
            searchRange: true,
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: "开始时间",
            endPlaceholder: "结束时间",
            rules: [
              {
                required: true,
                message: "请输入选择日期",
                trigger: "blur",
              },
            ],
          },
          {
            label: "日期",
            prop: "dirDate",
            // search: true,
            sortable: true,
            filter: true,
            span: 12,
            type: "datetime",
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            rules: [
              {
                required: true,
                message: "请输入选择日期",
                trigger: "blur",
              },
            ],
          },
          {
            label: "水处理工",
            prop: "handleMan",
            filterable: true,
            search: true,
            sortable: true,
            filter: true,
            span: 12,
            type: "select",
            dicData: [],
            props: {
              label: 'name',
              value: 'id',
            },
            rules: [
              {
                required: true,
                message: "请选择水处理工",
                trigger: "blur",
              },
            ],
          },
          {
            label: "备注",
            prop: "memo",
            search: false,
            sortable: true,
            filter: true,
            span: 12,
          },
        ],
      },
      form: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
    };
  },
  mounted() {
    this.getTeamList();
    this.getTypeList()
    this.getUserList()
  },
  methods: {
    // 排放班组
    getTeamList() {
      getTeam().then(res => {
        this.teamList = res.data.data
      })
    },
    // 报废槽液类型
    getTypeList() {
      getType().then(res => {
        this.TankSol = res.data.data
      })
    },
    // 用户
    getUserList() {
      getUserList({
        current: 1,
        size: 10000000,
        // deptId
        roleId:'2008432609730281474'
      }).then(res => {
        const result = res.data.data.records
        this.handleManList = result
        this.option.column.forEach(col => {
          if (col.prop === 'handleMan') {
            col.dicData = this.handleManList;
          }
        });
      })
    },
     // 新增
        moldAddFn(row, flag) {
            this.addOpen = true
            this.moldAddMore = flag
        },
        //关闭弹窗
        closeDialog() {
          this.addOpen = false;
          this.onLoad(this.page);
        },
        // 处理子组件提交的数据
        handleSubmitData(data) {
            // 这里添加处理提交数据的逻辑
            // this.$message.success("数据提交成功！");
            this.addOpen = false;
        },
    // 点击导入按钮
    handleImport() {
      this.isShowImport = true
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => { });
    },
    // 多选
    selectionChange(list) {
      this.selectionList = list;
    },
    //刷新
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    // 搜索重置
    searchReset() {
      this.query = {}
      this.onLoad(this.page)
    },
    // 加载页面数据
    onLoad(page, params = {}) {
      this.loading = true;
      const requestParams = Object.assign({}, params, this.query);
      // 后端要字符串类型
      if (requestParams.queryDirDate && Array.isArray(requestParams.queryDirDate)) {

        requestParams.queryDirDate = requestParams.queryDirDate.join(',');
      }
      getList(page.currentPage, page.pageSize, requestParams)
        .then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //搜索
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params)
      done()

    },
    //更新
  rowUpdate(row, index, done, loading) {
      console.log("aaaaaaaaaaaaaa")
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          done();
        },
        error => {
          window.console.log(error);
          loading();
        }
      );
    },

  },
  
 
};
</script>
<style lang="scss" scoped></style>