supply-front/src/views/basic_data/wallet/wallet_list.vue

<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <div>
      <el-form
        ref="searchForm"
        :model="searchForm"
        label-width="100px"
        size="small"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="名称" prop="walletName">
              <el-input
                v-model="searchForm.walletName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :lg="6">
            <el-form-item label="产品大类" prop="mainId">
              <el-select
                class="selectStyle"
                filterable
                v-model="searchForm.mainId"
                placeholder="名称"
              >
                <el-option
                  v-for="item in categoryList"
                  :key="item.productCategoryNumber"
                  :label="item.productCategoryName"
                  :value="item.productCategoryNumber"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :lg="12" class="tr">
            <el-form-item label="">
              <el-button size="small" @click="clearFn">清空</el-button>
              <el-button size="small" type="primary" @click="searchFn"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 按钮 -->
    <div class="btn-group clearfix">
      <div class="fl">
        <el-button type="primary" v-if="false" size="small">更新</el-button>
      </div>
      <div class="fr">
        <el-button type="primary" size="small">导出</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
          stripe
        >
          <el-table-column
            align="center"
            label="编码"
            prop="number"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="现金钱包名称"
            prop="name"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="对应产品大类"
            prop="mainName"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column
            align="center"
            label="操作"
            prop="caozuo"
            min-width="160"
            show-overflow-tooltip
          >
            <template slot-scope="scope"
              ><el-button
                type="text"
                class="textColor"
                v-if="$checkBtnRole('edit', $route.meta.roles)"
                @click="setFn(scope.row)"
                >设置</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      title="钱包"
      :visible.sync="dialogForm"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form ref="addForm" :model="addForm" label-width="120px">
        <el-form-item label="现金钱包名称" prop="customerId">
          <el-input disabled v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="编码" prop="customerId">
          <el-input disabled v-model="addForm.number"></el-input>
        </el-form-item>
        <el-form-item label="对应产品大类" prop="customerId">
          <el-select
            class="selectStyle"
            v-model="addForm.mainId"
            placeholder="名称"
          >
            <el-option
              v-for="item in categoryList"
              :key="item.productCategoryNumber"
              :label="item.productCategoryName"
              :value="item.productCategoryNumber"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="折让钱包" prop="customerId">
          <el-radio-group v-model="addForm.isZr">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否使用返利" prop="customerId">
          <el-radio-group v-model="addForm.isRebate">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getWalletList,
  getProductCategory,
  getWalletBiandMain,
  getWalletDetail,
} from "@/api/basic_data/wallet_list";
export default {
  data() {
    return {
      listLoading: false, // 列表加载loading
      searchForm: {
        walletName: "",
        mainId: "",
      },
      listTotal: 0, // 列表总数
      dataList: [],
      dialogForm: false,
      categoryList: [],
      addForm: {
        id: "",
        isRebate: null,
        isZr: null,
        mainId: "",
        mainName: "",
        name: "",
        number: "",
      },
      walletId: null, //钱包ID
    };
  },
  created() {
    this.getDataList();
    this.getCategoryList();
  },
  methods: {
    //确定
    async btnOK() {
      console.log(this.addForm);
      console.log(this.categoryList);
      const res = this.categoryList.filter(
        (v) => v.productCategoryNumber == this.addForm.mainId
      );

      let data = {
        id: this.walletId,
        isRebate: this.addForm.isRebate,
        isZr: this.addForm.isZr,
        mainId: this.addForm.mainId,
        mainName: res[0].productCategoryName,
      };
      await getWalletBiandMain(data);
      this.addForm.isRebate = null;
      this.addForm.isZr = null;
      this.addForm.mainId = "";
      this.getDataList();
      this.$message.success("设置成功");
      this.dialogForm = false;
    },
    //取消
    cancelFn() {
      // this.addForm.isRebate = null;
      // this.addForm.isZr = null;
      // this.addForm.mainId = "";
      this.dialogForm = false;
    },
    //清空
    async clearFn() {
      await this.$refs.searchForm.resetFields();
    },
    //搜索
    searchFn() {
      this.getDataList({ ...this.searchForm });
    },
    //获取产品品类列表
    async getCategoryList() {
      const res = await getProductCategory();
      this.categoryList = res.data;
    },
    //设置产品大类
    async setFn(value) {
      console.log(value);
      this.walletId = value.id;
      // this.addForm.name = value.name;
      // this.addForm.number = value.number;
      let res = await getWalletDetail({ walletId: value.id });
      console.log(res);
      this.addForm.name = res.data.name;
      this.addForm.number = res.data.number;
      this.addForm.mainId = res.data.mainId;
      this.addForm.isRebate = res.data.isRebate;
      this.addForm.isZr = res.data.isZr;

      this.dialogForm = true;
    },
    //获取列表数据
    async getDataList(data) {
      const res = await getWalletList(data);
      this.dataList = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.selectStyle {
  width: 100%;
}
</style>