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

<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <div>
      <Collapse :screen-form="searchForm">
        <template #right_btn>
          <el-button size="mini" @click="clearFn">清空</el-button>
          <el-button size="mini" type="primary" @click="searchFn">搜索</el-button>
        </template>
        <template #search>
          <el-form ref="searchForm" :model="searchForm" label-width="100px" size="mini" 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-row>
          </el-form>
        </template>
      </Collapse>
    </div>
    <!-- 按钮 -->
    <div class="btn-group clearfix">
      <div class="fl">
        <el-button type="primary" v-if="false" size="mini">更新</el-button>
      </div>
      <div class="fr">
        <el-button type="primary" v-if="false" 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
          stripe
        >
          <el-table-column align="left" label="编码" prop="number" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <CopyButton :copyText="scope.row.number" />
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="现金钱包名称" prop="name" min-width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <CopyButton :copyText="scope.row.name" />
              <span>{{ scope.row.name }}</span>
            </template>
          </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-page
    ref="pageRef"
    :getList="getList"
    :operation="operation()"
    :optionsEvensGroup="optionsEvensGroup"
    :exportList="exportList"
    :columnParsing="columnParsing"
    :tableAttributes="tableAttributes"
    :tableEvents="tableEvents"
  >
    
  </template-page> -->
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'

import { getWalletList, getProductCategory, getWalletBiandMain, getWalletDetail } from '@/api/basic_data/wallet_list'
export default {
  components: {
    TemplatePage
  },
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],

      //
      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: {
    // 列表请求函数
    // getList: levelList,
    // 列表导出函数
    // exportList: exportLevelList,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class="operation-btns">
            <el-button size="mini" type="text" onClick={async () => {}}>
              详情
            </el-button>
          </div>
        )
      }
    },

    //确定
    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) {
      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>