jonhon-mes-web/src/views/costManagement/costConfiguration.vue

<template>
  <basic-container>
    <!-- 成本计算配置 -->
    <el-tabs v-model="tabPosition" class="demo-tabs" @tab-change="tabPositionChange">
      <el-tab-pane label="工序维护" name="processMaintenance"></el-tab-pane>
      <el-tab-pane label="物料维护" name="materialMaintenance">
        <el-alert
          title="维护的物料不进行材料费用计算"
          style="margin-bottom: 10px; background: #e6f7ff; border-color: #91d5ff"
          show-icon
        >
        </el-alert>
      </el-tab-pane>
    </el-tabs>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model="form"
      v-model:page="page"
      ref="crud"
      @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 #menu-left>
        <el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
        <el-button icon="el-icon-delete" type="danger" @click="handleDelete"
          >删除</el-button
        >
        <el-button icon="el-icon-upload" type="success" @click="handleImport">导入</el-button>
      </template>
      <template #menu="scope">
        <el-button
          type="text"
          v-if="tabPosition == 'processMaintenance'"
          @click="maintainProcess(scope.row)"
          >维护</el-button
        >
        <el-button
          type="text"
          v-if="tabPosition == 'processMaintenance'"
          @click="deleteRow(scope.row)"
          >删除</el-button
        >
      </template>
    </avue-crud>
    <el-dialog :title="title" append-to-body v-model="showDialog" width="60%">
      <div style="margin-bottom: 10px">
        <el-button type="primary" icon="el-icon-plus" @click="insertEvent()"
          >插入一行</el-button
        >
        <el-button plain type="danger" @click="remove">删除选择行</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
      <el-table :data="processData" @select="selectChange">
        <el-table-column type="selection" width="55px"></el-table-column>
        <el-table-column align="center" label="作业中心" prop="workCenter">
          <template #default="scope">
            <el-select v-model="scope.row.workCenter">
              <el-option label="镀金大批量作业中心" value="1"></el-option>
              <el-option label="镀金小批量作业中心" value="2"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="工序" prop="process">
          <template #default="scope">
            <el-select multiple v-model="scope.row.processVal">
              <el-option label="镀金" value="1"></el-option>
              <el-option label="滚金" value="2"></el-option>
              <el-option label="化学镀镍" value="3"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="计算方式" prop="formulaMode">
          <template #default="scope">
            <el-radio-group v-model="scope.row.formulaMode">
              <el-radio label="1">面积</el-radio>
              <el-radio label="2">体积</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog :title="title" append-to-body v-model="showMaterial" width="60%">
      <div style="margin-bottom: 10px">
        <el-button type="primary" icon="el-icon-plus" @click="insertRow()"
          >插入一行</el-button
        >
        <el-button plain type="danger" @click="removeRow">删除选择行</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
      <el-table :data="materialData" @select="selectChange">
        <el-table-column type="selection" width="55px"></el-table-column>
        <el-table-column align="center" label="物料编号" prop="goodsNo">
          <template #default="{ row, $index }">
            <el-select
              v-model="row.goodsNo"
              @change="(event) => changeGoodsNo(event, $index)"
            >
              <el-option
                v-for="item in goodsData"
                :label="item.label"
                :value="item.label"
                :key="item.label"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="物料名称"
          prop="goodsName"
        ></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 导入 -->
    <basic-import v-if="isShowImport" title="导入" :isShow="isShowImport"
      templateUrl="/blade-desk/QA/CycleTestItem/download-excel-template"
      templateName="试验项目模板.xls"
      importUrl="/blade-desk/QA/CycleTestItem/import-excel"
     @closeDialog="closeDialog"></basic-import>
  </basic-container>
</template>

<script>
import costColumnData from "./js/costColumnData";
import basicImport from '@/components/basic-import/main.vue'
export default {
  components: {
    basicImport,
  },
  data() {
    return {
      isShowImport:false,
      tabPosition: "processMaintenance",
      loading: false,
      showDialog: false,
      showMaterial: false,
      processData: [],
      deleteProcessArr: [],
      selectionList: [],
      materialData: [],
      data: [],
      goodsData: [
        { label: "0399-222-21", value: "物料一" },
        { label: "0399-222-22", value: "物料二" },
        { label: "0399-222-23", value: "物料三" },
        { label: "0399-222-24", value: "物料四" },
      ],
      form: {},
      title: "新增",
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        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,
        addBtn: false,
        editBtn: false,
        editBtnText: "修改",
        viewBtnIcon: " ",
        delBtnIcon: " ",
        editBtnIcon: " ",
        viewBtnText: "详情",
        labelWidth: 120,
        searchLabelWidth: 120,
        menuWidth: 220,
        dialogWidth: 1200,
        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",
        addBtnIcon: " ",
        viewBtnIcon: " ",
        delBtnIcon: " ",
        editBtnIcon: " ",
        align: "center",

        column: [],
      },
    };
  },
  mounted() {
    this.option.column = costColumnData[this.tabPosition];
  },
  methods: {
    // 点击导入按钮
    handleImport() {
      this.isShowImport = true
    },
    selectionChange(val) {
      this.selectionList = val;
    },
    changeGoodsNo(event, index) {
      let tmp = this.goodsData.find((item) => item.label == event);
      this.materialData[index].goodsName = tmp.value;
    },
    // 点击删除按钮
    handleDelete() {
      if (this.selectionList.length == 0) {
        this.$message.error("请先选择数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {});
    },
    deleteRow(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {});
    },
    tabPositionChange(val) {
      if (val == "materialMaintenance") {
        this.option.menu = false;
        this.data = [
          {
            id: 1,
            goodsNo: "0399-222-21",
            goodsName: "物料一",
            createUser: "李四",
            createTime: "2023-08-20 11:23:25",
          },
          {
            id: 2,
            goodsNo: "0399-222-22",
            goodsName: "物料二",
            createUser: "李四",
            createTime: "2023-08-20 11:23:25",
          },
        ];
        this.page.total = this.data.length;
      } else {
        this.option.menu = true;
        this.data = [
          {
            id: 1,
            workCenter: "镀金大批量作业中心",
            processVal: ["1", "2", "3"],
            processTitle: "镀金、滚金、化学镀镍",
            formulaMode: "1",
            createUser: "张三",
            createTime: "2023-11-20 11:23:25",
          },
          {
            id: 2,
            workCenter: "镀金大批量作业中心",
            processVal: ["1", "3"],
            processTitle: "镀金、化学镀镍",
            formulaMode: "2",
            createUser: "张三",
            createTime: "2023-11-20 11:23:25",
          },
          {
            id: 3,
            workCenter: "镀金大批量作业中心",
            processVal: ["1", "2"],
            processTitle: "镀金、滚金",
            formulaMode: "1",
            createUser: "张三",
            createTime: "2023-11-20 11:23:25",
          },
        ];
        this.page.total = this.data.length;
      }
      this.option.column = costColumnData[this.tabPosition];
    },
    maintainProcess(row) {
      this.title = "维护";
      this.processData = [{ ...row }];
      this.showDialog = true;
    },
    handleAdd() {
      if (this.tabPosition == "materialMaintenance") {
        this.materialData = [];
        this.showMaterial = true;
      } else {
        this.title = "新增";
        this.processData = [];
        this.showDialog = true;
      }
    },
    selectChange(list, row) {
      row._select = !row._select;
    },
    //插入一行
    insertEvent() {
      const record = {
        _select: false,
      };
      this.processData.push(record);
    },
    insertRow() {
      const record = {
        _select: false,
      };
      this.materialData.push(record);
    },
    //删除所选行
    removeRow() {
      let arr = this.materialData.filter((item) => item._select);
      if (arr.length != 0) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          if (this.rowId) {
            let deleteData = this.materialData.filter((item) => item._select);
            this.deleteProcessArr = deleteData.filter((item) => item.tidId);
          }
          let deleteArr = this.materialData.filter((item) => !item._select);
          this.materialData = deleteArr;
        });
      } else {
        this.$message.error("请至少选择一条数据进行操作！");
      }
    },
    //删除所选行
    remove() {
      let arr = this.processData.filter((item) => item._select);
      if (arr.length != 0) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          if (this.rowId) {
            let deleteData = this.processData.filter((item) => item._select);
            this.deleteProcessArr = deleteData.filter((item) => item.tidId);
          }
          let deleteArr = this.processData.filter((item) => !item._select);
          this.processData = deleteArr;
        });
      } else {
        this.$message.error("请至少选择一条数据进行操作！");
      }
    },
    handleSave() {
      this.showDialog = false;
      this.showMaterial = false;
    },
    onLoad() {
      this.data = [
        {
          id: 1,
          workCenter: "镀金大批量作业中心",
          processVal: ["1", "2", "3"],
          processTitle: "镀金、滚金、化学镀镍",
          formulaMode: "1",
          createUser: "张三",
          createTime: "2023-11-20 11:23:25",
        },
        {
          id: 1,
          workCenter: "镀金大批量作业中心",
          processVal: ["1", "3"],
          processTitle: "镀金、化学镀镍",
          formulaMode: "2",
          createUser: "张三",
          createTime: "2023-11-20 11:23:25",
        },
        {
          id: 1,
          workCenter: "镀金大批量作业中心",
          processVal: ["1", "2"],
          processTitle: "镀金、滚金",
          formulaMode: "1",
          createUser: "张三",
          createTime: "2023-11-20 11:23:25",
        },
      ];
      this.page.total = this.data.length;
    },
  },
};
</script>

<style></style>