byte-sailing-vue/src/views/product-material/supply/priceMaintenance.vue

<template>
  <div>
    <el-card class="box-card">
      <test :form-config="btnForm"> </test>

      <query
        :selectConfig="selectConfig"
        :req="queryParams"
        :isShowMore="true"
        @handleQuery="handleQuery"
        @handleMore="
          () => {
            queryDialog = true;
          }
        "
      ></query>
      <el-table :data="tableList" v-loading="loading">
        <el-table-column
          label="供应商类型"
          align="left"
          prop="supplierType"
          width="140"
        >
          <template slot-scope="scope">
            <span v-for="i in supplyTypeList" :key="i.dictKey">
              <span v-if="scope.row.supplierType == i.dictKey">{{ i.dictValue }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="供应商名称" align="left" prop="supplierName" />
        <el-table-column
          label="产品类型"
          align="left"
          prop="materialType"
          width="100"
          :formatter="(row) => dictDataEcho(row.materialType, productTypeList)"
        />
        <el-table-column
          label="产品编码"
          align="left"
          prop="materialCode"
          width="150"
        />
        <el-table-column label="产品名称" align="left" prop="materialName" />
        <el-table-column
          label="供应单价"
          align="left"
          prop="price"
          width="120"
        />

        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)"
              >修改
            </el-button>
            <el-button type="text" @click="handleDelete(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <el-dialog
        :title="titleText === 'add' ? '添加供应价格' : '编辑供应价格'"
        :visible.sync="open"
        v-if="open"
        width="50%"
        top="60px"
      >
        <add-supply-price
          :form="form"
          :supplySelectList="supplySelectList"
          @submit="handleSubmit"
          @cancel="handleCancel"
          ref="addSupplyPrice"
        ></add-supply-price>
      </el-dialog>

      <el-dialog
        :title="$t('seniorQuery')"
        :visible.sync="queryDialog"
        v-if="queryDialog"
        width="30%"
      >
        <el-form
          label-position="top"
          :model="queryParams"
          ref="queryForm"
          label-width="100px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('product_material.supply.supplyName')"
                prop="type"
              >
                <el-select
                  v-model="queryParams.type"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('product_material.supply.priceMaintenance.goodCode')"
                prop="type"
              >
                <el-select
                  v-model="queryParams.type"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item
            :label="$t('product_material.supply.priceMaintenance.goodName')"
            prop="name"
          >
            <el-input
              v-model="queryParams.name"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-row>
            <el-col :span="12">
              <el-form-item
                :label="$t('product_material.supply.priceMaintenance.goodType')"
                prop="code"
              >
                <el-select
                  v-model="queryParams.type"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <div style="text-align: center">
            <el-button size="small" @click="queryDialog = false"
              >"取消"
            </el-button>
            <el-button type="primary" size="small" @click="handleQuery">
              确定</el-button
            >
          </div>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import test from "@/components/form-test/index.vue";
import query from "@/components/query/index.vue";

import { supplySelect } from "@/api/product-material/supply/index.js";
import * as API from "@/api/product-material/supply/priceMaintenance.js";

import addSupplyPrice from "./addSupplyPrice.vue";

export default {
  components: {
    test,
    query,
    addSupplyPrice,
  },
  data() {
    return {
      supplySelectList: [],
      productTypeList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
        supplierId: "",
        materialId: "",
        supplierName: "",
        materialName: "",
        materialCode: "",
        materialType: "",
      },
      
      btnForm: {
        otherButton: {
          list: [
            {
              name: "添加供应价格",
              methodsText: "add",
              type: "primary",
              add: () => {
                this.supplyPriceAdd();
              },
            },

            // {
            //   name: this.$t("product_material.supply.priceMaintenance.back"),
            //   methodsText: "back",
            //   type: "defualt",
            //   back: () => {
            //     this.back();
            //   },
            // },
          ],
        },
      },
      selectConfig: [
        {
          label: "产品类型",
          prop: "materialType",
          data: [],
        },
        {
          label: "供应商类型",
          prop: "supplierType",
          data: [],
        },
      ],
      queryDialog: false,
      tableList: [],
      loading: false,
      total: 0,
      open: false,
      titleText: "add",
      form: {
        supplierId: "",
        materialId: "",
        price: "",
        id: "",
      },
    };
  },
  created() {
    const businessDictData = JSON.parse(
      window.localStorage.getItem("businessDict")
    );
    this.productTypeList = businessDictData.find(
      (item) => item.code === "productType"
    ).children;
    this.selectConfig[0].data = this.productTypeList.map((item) => ({
      label: item.dictValue,
      value: item.dictKey,
    }));

    this.supplyTypeList = businessDictData.find(
      (item) => item.code === "supplyType"
    ).children;
    console.log(this.supplyTypeList)
    this.selectConfig[1].data = this.supplyTypeList.map((item) => ({
      label: item.dictValue,
      value: item.dictKey,
    }));

    supplySelect({ name: "", type: "", code: "" }).then((res) => {
      this.supplySelectList = res.data.data;
    });
    this.getList();
  },
  methods: {
    back() {
      this.$router.push({
        path: "/product-material/supply/index",
      });
    },
    getList() {
      this.loading = true;
      API.supplyPriceList(this.queryParams).then(
        (res) => {
          this.tableList = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        },
        (err) => {
          console.log("supplyPriceList: " + err);
          this.loading = false;
        }
      );
    },
    handleQuery() {
      this.getList();
    },
    supplyPriceAdd() {
      this.form = {
        supplierId: "",
        materialId: "",
        price: "",
        id: "",
      };
      this.titleText = "add";
      this.open = true;
    },

    handleCancel() {
      this.form = {
        supplierId: "",
        materialId: "",
        price: "",
        id: "",
      };
      this.open = false;
    },
    handleEdit(row) {
      this.titleText = "edit";
      this.form = row;
      this.open = true;
    },
    handleSubmit() {
      if (!this.form.id) {
        API.supplyPriceAdd(this.form).then(
          () => {
            this.msgSuccess("添加成功");
            this.$refs.addSupplyPrice.loading = false;
            this.open = false;
            this.getList();
          },
          (err) => {
            console.log("supplyPriceAdd: " + err);
            this.$refs.addSupplyPrice.loading = false;
          }
        );
      } else {
        API.supplyPriceEdit(this.form).then(
          () => {
            this.msgSuccess("编辑成功");
            this.open = false;
            this.$refs.addSupplyPrice.loading = false;
            this.getList();
          },
          (err) => {
            console.log("supplyPriceEdit: " + err);
            this.$refs.addSupplyPrice.loading = false;
          }
        );
      }
    },
    handleDelete(row) {
      this.$confirm("请问是否删除该条数据 ?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        API.supplyPriceDel({ id: row.id }).then(() => {
          this.msgSuccess("删除成功");
          this.getList();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  height: calc(100vh - 110px);
  overflow-y: auto;
}
</style>