supply-front/src/views/basic_data/material/relation_list.vue

<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <div>
      <el-form
        ref="screenForm"
        :model="screenForm"
        label-width="70px"
        size="mini"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="产品名称" prop="name">
              <el-input
                placeholder="请输入产品名称"
                v-model="screenForm.name"
              ></el-input>
              <!--
              <el-select placeholder="请选择产品类别" v-model="screenForm.name">
              <el-option label="默认" value=""></el-option>
                <el-option
                  v-for="item in materialLis"
                  :label="item.name"
                  :value="item.name"
                  :key="item.id"
                ></el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="产品型号" prop="type">
              <el-input
                placeholder="请输入产品型号"
                v-model="screenForm.type"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="套机编码" prop="number">
              <el-input
                placeholder="请输入套机编码"
                v-model="screenForm.number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="产品体积" prop="volume">
              <el-input
                placeholder="请输入产品体积"
                v-model="screenForm.volume"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="外机名称" prop="outsideName">
              <el-input
                placeholder="请输入外机名称"
                v-model="screenForm.outsideName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="外机型号" prop="nickname">
              <el-input
                placeholder="请输入外机型号"
                v-model="screenForm.outsideType"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="外机编码" prop="outsideNumber">
              <el-input
                placeholder="请输入内机编码"
                v-model="screenForm.outsideNumber"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="内机名称" prop="innerName">
              <el-input
                placeholder="请输入内机名称"
                v-model="screenForm.innerName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="内机型号" prop="innerType">
              <el-input
                placeholder="请输入内机型号"
                v-model="screenForm.innerType"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="内机编码" prop="innerNumber">
              <el-input
                placeholder="请输入内机编码"
                v-model="screenForm.innerNumber"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="12" class="tr">
            <el-form-item label="">
              <el-button size="mini" @click="resetScreenForm">清空</el-button>
              <el-button size="mini" type="primary" @click="submitScreenForm"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 按钮 -->
    <div class="btn-group clearfix">
      <div class="fl">
        <el-button
         v-if="$checkBtnRole('add', $route.meta.roles)"
          type="primary"
             icon="el-icon-plus"
          size="mini"
          @click="(showDialogForm = true), (type = 1), hanleMachine()"
          >新增</el-button
        >

        <el-popconfirm
         v-if="$checkBtnRole('del', $route.meta.roles)"
          confirm-button-text="好的"
          cancel-button-text="不用了"
          icon="el-icon-info"
          icon-color="red"
          title="内容确定删除吗？"
          @onConfirm="hanleDelete"
        >
          <el-button
            type="primary"
            size="mini"
               icon="el-icon-delete"
            slot="reference"
            class="el-popover-left"
            >删除</el-button
          >
        </el-popconfirm>
      </div>
      <div class="fr">
        <el-button type="primary" size="mini">导入</el-button>
        <el-button type="primary" size="mini" @click="handleExport"
          >导出</el-button
        >
        <!-- <el-button type="primary" @click="hanlePrint" size="mini"
          >打印</el-button
        > -->
      </div>
    </div>
    <div class="mymain-container">
      <!-- 列表 -->
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          @select-all="hanleSelectAll"
          @select="hanleSelectAll"
          stripe
        >
          <el-table-column type="selection" align="left"></el-table-column>
          <el-table-column
            align="left"
            label="产品名称"
            prop="materialName"
            min-width="160"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <CopyButton :copyText="scope.row.materialName" />
              <span>{{scope.row.materialName}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="产品型号"
            prop="productModel"
            min-width="160"
            show-overflow-tooltip
          >
<!--            <template slot-scope="scope">-->
<!--              <CopyButton :copyText="scope.row.productModel" />-->
<!--              <span>{{scope.row.productModel}}</span>-->
<!--            </template>-->
          </el-table-column>
          <el-table-column
            align="left"
            label="套机编码"
            prop="composeNumber"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="right"
            label="体积"
            prop="productVolume"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="内机编码"
            prop="innerMachineNumber"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="外机编码"
            prop="outsideMachineNumber"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="配件1"
            prop="parts1"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="配件2"
            prop="parts2"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="创建人"
            prop="createBy"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="创建时间"
            prop="createTime"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column
            align="left"
            label="更新人"
            prop="updateBy"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="left"
            label="更新时间"
            prop="updateTime"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column
            align="center"
            label="操作"
            min-width="160"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button
               v-if="$checkBtnRole('edit', $route.meta.roles)"
                type="text"
                class="textColor"
                @click="editFn(scope.row.id, scope.row, scope.$index)"
                >编辑</el-button
              >
              <el-popconfirm
               v-if="$checkBtnRole('del', $route.meta.roles)"
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="内容确定删除吗？"
                @onConfirm="hanleDelete(scope.row.id)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  class="textColor el-popover-left"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="fr">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      title="产品信息"
      :visible.sync="showDialogForm"
      width="70%"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="diaLogForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-form-item label="产品名称">
              <el-select
                placeholder="选择名称"
                filterable
                @change="hanleName"
                v-model="diaLogForm.materialId"
              >
                <el-option
                  v-for="item in materialLis"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品型号">
              <el-input v-model="diaLogForm.productModel"></el-input>
            </el-form-item>
            <el-form-item label="套机编码">
              <el-input v-model="diaLogForm.productNumber"></el-input>
            </el-form-item>
            <el-form-item label="产品体积">
              <el-input v-model="diaLogForm.productVolume"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-row type="flex" justify="space-between">
              <el-col :span="20" type="flex">
                <el-form-item label="类型">
                  <el-select
                    v-model="diaLogForm.type"
                    @change="hanleType"
                    filterable
                    placeholder="请选择类型"
                  >
                    <el-option
                      v-for="item in DistType"
                      :key="item.dictCode"
                      :label="item.dictValue"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="3" style="text-align: right">
                <el-button type="primary" @click="hanleAddData"
                  >+</el-button
                ></el-col
              >
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col
            :span="12"
            :offset="0"
            v-for="(item, index) in diaLogForm.items"
            :key="index"
          >
            <div>
              <el-form-item label="编码">
                <el-select
                  v-model="item.number"
                  placeholder="请选择编码"
                  filterable
                  @change="hanleCode($event, index)"
                >
                  <el-option
                    v-for="item in machineList"
                    :key="item.id"
                    :label="item.number"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="名称" prop="">
                <el-input v-model="item.name" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="型号">
                <el-input v-model="item.model" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="体积">
                <el-input v-model="item.volume" placeholder=""></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="(showDialogForm = false), resetInfo()"
          >取 消</el-button
        >
        <el-button type="primary" @click="hanleInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Mixin from '@/mixin/index'
import { downloadFiles } from '@/utils/util'
import {
  getDistList,
  getMachineLlist,
  getMaterialList,
  getProductAdd,
  getProductDel,
  getProductDetail,
  getProductEdit,
  getProductList
} from '@/api/basic_data/material'

export default {
  mixins: [Mixin],
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      options: [
        {
          value: "选项1",
          label: "1",
        },
        {
          value: "选项2",
          label: "2",
        },
        {
          value: "选项3",
          label: "3",
        },
        {
          value: "选项4",
          label: "4",
        },
        {
          value: "选项5",
          label: "5",
        },
      ],
      diaLogForm: {
        adminCompanyId: null,
        productNumber: "",
        id: null,
        items: [
          {
            id: "",
            innerOutsideMachineId: "",
            machineConfigureId: "",
            parentId: "",
            model: "",
            name: "",
            number: "",
            type: "",
            volume: "",
          },
        ],
        materialId: null,
        productModel: "",
        productVolume: 0,
        type: "",
      },
      showDialogForm: false,
      dataList: [
        {
          name: "新风机",
          number: "DSAFSAF232312321",
          code: "DSAFSAF232312321",
          volume: "23M^3",
          inCode: "DSAFSAF232312321",
          outCode: "DSAFSAF232312321",
          partsOne: "",
          partsTwo: "",
          create: "admin",
          createDate: "2022-09-12",
          update: "admin",
          updateDate: "2022-09-12",
        },
        {
          name: "新风机",
          number: "DSAFSAF232312321",
          code: "DSAFSAF232312321",
          volume: "23M^3",
          inCode: "DSAFSAF232312321",
          outCode: "DSAFSAF232312321",
          partsOne: "",
          partsTwo: "",
          create: "admin",
          createDate: "2022-09-12",
          update: "admin",
          updateDate: "2022-09-12",
        },
        {
          name: "新风机",
          number: "DSAFSAF232312321",
          code: "DSAFSAF232312321",
          volume: "23M^3",
          inCode: "DSAFSAF232312321",
          outCode: "DSAFSAF232312321",
          partsOne: "",
          partsTwo: "",
          create: "admin",
          createDate: "2022-09-12",
          update: "admin",
          updateDate: "2022-09-12",
        },
        {
          name: "新风机",
          number: "DSAFSAF232312321",
          code: "DSAFSAF232312321",
          volume: "23M^3",
          inCode: "DSAFSAF232312321",
          outCode: "DSAFSAF232312321",
          partsOne: "",
          partsTwo: "",
          create: "admin",
          createDate: "2022-09-12",
          update: "admin",
          updateDate: "2022-09-12",
        },
      ],
      screenForm: {
        innerName: "",
        innerNumber: "",
        innerType: "",
        name: "",
        number: "",
        outsideName: "",
        outsideNumber: "",
        outsideType: "",
        type: "",
        volume: "",
      },
      type: null,
      machineList: [],
      machinePei: {
        currentPage: 1,
        pageSize: 10,
        name: "",
        number: "",
        type: "",
        volume: "",
      },
      materialLis: {},
      typeList: [],
      DistType: [],
      machineConfigureId: "",
    };
  },
  mounted() {
    this.getMaterMacList();
  },
  methods: {
    hanleAddData() {
      this.diaLogForm.items.push({
        id: "",
        innerOutsideMachineId: "",
        machineConfigureId: "",
        parentId: "",
        model: "",
        name: "",
        number: "",
        type: "",
        volume: "",
      });
    },
    getMaterMacList() {
      const params = {
        pageNum: 1,
        pageSize: -1,
        keyword: "",
      };

      getMaterialList(params).then((res) => {
        this.materialLis = res.data.records;
      });
      const params2 = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        keyword: "",
      };
      getMachineLlist(params2).then((res) => {
        this.typeList = res.data.records;
      });
    },

    hanleType(e) {
      console.log(e, this.DistType);
      this.getMachineLlist(e);
    },
    getMachineLlist(e) {
      let params2 = {
        pageNum:1,
        pageSize: -1,
        model: this.machinePei.model,
        name: this.machinePei.name,
        number: this.machinePei.number,
        type: e,
        volume: this.machinePei.volume,
      };
      getMachineLlist(params2).then((res) => {
        this.machineList = res.data.records;
      });
    },
    hanleCode(e, i) {
      console.log(e, "code");
      this.machineList.find((l) => {
        if (l.id == e) {
          this.$set(this.diaLogForm.items, i, {
            id: "",
            machineConfigureId: l.id,
            parentId: "",
            innerOutsideMachineId: l.id,
            model: l.model,
            name: l.name,
            number: l.number || "",
            type: l.type,
            volume: l.volume,
          });

        }
      });
    },
    hanleName(e) {
      this.materialLis.find((k) => {
        if (k.id == e) {
          this.diaLogForm.productModel = k.specification;
          this.diaLogForm.productNumber = k.number;
          this.diaLogForm.volume = k.volume;

        }
      });
    },
    getList() {
      this.listLoading = true;
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        innerName: this.screenForm.innerName,
        innerNumber: this.screenForm.innerNumber,
        innerType: this.screenForm.innerType,
        name: this.screenForm.name,
        number: this.screenForm.number,
        outsideName: this.screenForm.outsideName,
        outsideNumber: this.screenForm.outsideNumber,
        outsideType: this.screenForm.outsideType,
        type: this.screenForm.type,
        volume: this.screenForm.volume,
      };
      getProductList(params).then((res) => {
        this.dataList = res.data.records;
        this.listTotal = res.data.total;
        this.listLoading = false;
      });
    },
    editFn(id, row, index) {
      console.log(row, "45465");
      let dateils = null;
      this.diaLogForm = {
        ...row,
        items: [
          {
            id: "",
            machineConfigureId: row.id,
            parentId: "",
            innerOutsideMachineId: row.id,
            model: row.model,
            name: row.name,
            number: row.number || "",
            type: row.type,
            volume: row.volume,
          },
        ],
      };
      getProductDetail({ id: id }).then((res) => {
        dateils = res.data;
        console.log(dateils);
        this.diaLogForm.materialId = dateils.materialId;
        this.materialLis.find((k) => {
          if (k.id == dateils.materialId) {
            console.log(k, "5555");
            this.diaLogForm.productModel = k.specification;
            this.diaLogForm.productNumber = k.number;
            this.diaLogForm.productVolume = k.volume;
          }
        });

        getDistList({ sysDictEnum: "MACHINE_CONFIGURE" }).then((disType) => {
          // disType.data.find((q) => {
          //   if (q.dictCode == dateils.items[0].type) {
          //     this.diaLogForm.type = q.dictCode;
          //     this.getMachineLlist(q.dictCode);
          //     this.machineList.map((l) => {
          //     console.log(l.id == dateils.items[0].machineConfigureId);
          //       if (l.id == dateils.items[0].machineConfigureId) {
          //         this.$set(this.diaLogForm.items, 0, {
          //           id: "",
          //           machineConfigureId: l.id,
          //           parentId: "",
          //           innerOutsideMachineId: l.id,
          //           model: l.model,
          //           name: l.name,
          //           number: l.number || "",
          //           type: l.type,
          //           volume: l.volume,
          //         });
          //         return;
          //       }
          //     });
          //   }
          // });

          this.DistType = disType.data;
        });

        //  const machineObj =   this.getMachineLlist(dateils.items[0].type)
        console.log(this.diaLogForm, "lll");

        this.showDialogForm = true;
      });
    },
    hanleInfo() {
      if (this.type === 1) {
        this.diaLogForm.id = null;
        this.diaLogForm.adminCompanyId = null;
        getProductAdd({ ...this.diaLogForm }).then((res) => {
          this.$successMsg("保存成功");
          this.resetInfo();
          this.getList();
        });
      } else if (this.type === 2) {
        const params = { ...this.diaLogForm };
        getProductEdit(params).then((res) => {
          this.$successMsg("编辑成功");
          this.resetInfo();
          this.getList();
        });
      }

      this.showDialogForm = false;
    },
    hanleDelete(id) {
      this.hanleDeleteAllPromise(id).then((ids) => {
        getProductDel({ ids: ids.join(",") }).then((res) => {
          this.$successMsg("删除成功");
          this.getList();
        });
      });
    },
    handleExport() {
      let screenData = {
        customerName: this.screenForm.customerName,
        freeDay: this.screenForm.freeDay,
        toll: this.screenForm.toll,
      };
      downloadFiles("/product-compose/export", screenData);
    },
    resetInfo() {
      this.diaLogForm = {
        id: null,
        composeNumber: "",
        id: "",
        items: [
          {
            id: "",
            innerOutsideMachineId: "",
            machineConfigureId: "",
            parentId: "",
            model: "",
            name: "",
            number: "",
            type: "",
            volume: "",
          },
        ],
        materialId: "",
        orgNumber: 0,
        productModel: "",
        productVolume: "",
      };
    },
    hanleMachine() {
      let params = {
        pageNum: 1,
        pageSize: -1,
        keyword: "",
      };
      getMaterialList(params).then((res) => {
        this.materialLis = res.data.records;
      });
      getDistList({ sysDictEnum: "MACHINE_CONFIGURE" }).then((res) => {
        console.log(res, "type");
        this.DistType = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
</style>