ldt-manger-web/src/views/ldt_shop/shop.vue

<template>
  <basic-container>
    <el-dialog @close="dialogShow=false" append-to-body :close-on-click-modal="false" :visible.sync="dialogShow"
               :destroy-on-close="true"
               :title="dialogTitle" fullscreen>
      <shop-member v-if="dialogTitle=='店铺会员'" ref="refName" :operateId="operateId"></shop-member>
      <shop-bills v-if="dialogTitle=='账单流水'" ref="refName" :operateId="operateId"></shop-bills>
      <shop-joinrecord v-if="dialogTitle=='参加的活动'" ref="refName" :operateId="operateId"></shop-joinrecord>
      <shop-withdrawrec v-if="dialogTitle=='提现记录'" ref="refName" :operateId="operateId"></shop-withdrawrec>
      <shop-product-fee v-if="dialogTitle=='产品费率'" ref="refName" :operateId="operateId"></shop-product-fee>
      <shop-info v-if="dialogTitle=='查看'" ref="refName" :operateId="operateId"></shop-info>
    </el-dialog>

    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList"
               :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
               @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange"
               @on-load="onLoad">

      <template slot="shopInfo" slot-scope="scope">
        <div style="display: flex;">
          <div style="display: flex;justify-content: center;align-items: center;">
            <el-avatar size="large" :src="scope.row.cover"></el-avatar>
          </div>
          <div style="padding: 10px;">
            <div>商店名称：{{ scope.row.name }}</div>
            <div>负责人姓名：{{ scope.row.personName }}</div>
            <div>联系方式：{{ scope.row.personTel }}</div>
          </div>
        </div>
      </template>

      <template slot-scope="scope" slot="dataInfo">
        <div style="display: flex;justify-content: space-around;">
          <div class="">
            <div>
              会员数量：
              <div
                style="background-color: #3296fa;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ; display:inline;">
                {{ scope.row.memberCount }}
              </div>
            </div>
            <div>
              账户余额：
              <div
                style="background-color: #00aa7f;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ; display:inline;">
                {{ scope.row.balance }}
              </div>
            </div>
            <div>
              账单应收：
              <div
                style="background-color: #ffaa7f;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ; display:inline;">
                {{ scope.row.charge }}
              </div>
            </div>
          </div>

          <div style="margin-left: 120rpx;">
            <div>
              可提现金额：
              <div
                style="background-color: #00aa7f;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ; display:inline;">
                {{ scope.row.withdrawCharge }}
              </div>
            </div>

            <div>
              店铺销量：
              <div
                style="background-color: #ffaa7f;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ; display:inline;">
                {{ scope.row.sales }}
              </div>
            </div>
            <div>
              店铺评分：
              <div
                style="background-color: #3296fa;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ; display:inline;">
                {{ scope.row.score }}
              </div>
            </div>
          </div>
        </div>
      </template>

      <template slot-scope="scope" slot="pointData">
        <div style="display: flex;">
          <div>
            积分数量：
            <div
              style="background-color: #3296fa;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ; display:inline;">
              {{ scope.row.point }}
            </div>
          </div>
          <div>
            积分价值：
            <div
              style="background-color: #00aa7f;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ; display:inline;">
              {{ scope.row.totalValue }}
            </div>
          </div>
        </div>

        <div>
          积分兑率：
          <div
            style="background-color: #ffaa7f;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ; display:inline;">
            {{ scope.row.pointRate }}
          </div>
        </div>

        <div>
          消费1元赠送多少积分：
          <div
            style="background-color: #00aa7f;color: white; border-radius: 5px; margin:10px; padding:0 10px 0 10px ; display:inline;">
            {{ scope.row.sendPointUnit }}
          </div>
        </div>
      </template>

      <template slot="agentInfo" slot-scope="scope" v-if="scope.row.agenter && scope.row.agenter!=-1">
        <div style="display: flex;">
          <div style="display: flex;justify-content: center;align-items: center;">
            <el-avatar size="large" :src="scope.row.agentAvatar"></el-avatar>
          </div>
          <div style="padding: 10px;">
            <div>代理人姓名：{{ scope.row.agentName }}</div>
            <div>代理人id：{{ scope.row.agenter }}</div>
          </div>
        </div>
      </template>

      <template slot="labelKey" slot-scope="scope">
        <el-tag v-for="(item,index) of scope.row.labelKey.split(',')" :key="index">
          {{ item }}
        </el-tag>
      </template>
      <template slot="location" slot-scope="scope">
        {{ scope.row.location }}
      </template>
      <template slot="cover" slot-scope="scope">
        <el-image :src="scope.row.cover" :style="{maxHeight:'50px',maxWidth:'50px'}"></el-image>
      </template>
      <template slot="logo" slot-scope="scope">
        <el-image :src="scope.row.logo" :style="{maxHeight:'50px',maxWidth:'50px'}"></el-image>
      </template>
      <template slot="shopPic" slot-scope="scope">
        <el-image :src="scope.row.shopPic" :style="{maxHeight:'50px',maxWidth:'50px'}"></el-image>
      </template>
      <template slot="menuLeft">
        <el-button type="primary" size="small" @click="generateListAndDownload">导出数据</el-button>
        <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.shop_delete"
                   @click="handleDelete">删 除
        </el-button>
      </template>

      <!-- 操作菜单 -->
      <template slot-scope="scope" slot="menu">
        <el-button type="text" size="small" icon="el-icon-view" plain class="none-border"
                   @click.stop="handleShopInfo(scope.row)">查 看
        </el-button>
<!--        <el-button type="text" size="small" icon="el-icon-view" plain class="none-border"
                   @click.stop="openDialog(scope.row.id,'店铺会员')">店铺会员
        </el-button>
        <el-button type="text" size="small" icon="el-icon-view" plain class="none-border"
                   @click.stop="openDialog(scope.row.id,'账单流水')">账单流水
        </el-button>
        <el-button type="text" size="small" icon="el-icon-view" plain class="none-border"
                   @click.stop="openDialog(scope.row.id,'参加的活动')">参加的活动
        </el-button>
        <el-button type="text" size="small" icon="el-icon-view" plain class="none-border"
                   @click.stop="openDialog(scope.row.id,'提现记录')">提现记录
        </el-button>
        <el-button v-if="userInfo.role_name === 'administrator'" type="text" size="small" icon="el-icon-edit" plain
                   class="none-border"
                   @click.stop="openDialog(scope.row.id,'产品费率')" :disabled="$isEmpty(scope.row.merchantNo)">产品费率
        </el-button>-->
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {add, getDetail, getList, remove, update} from "@/api/ldt_shop/shop";
import {mapGetters} from "vuex";
import {getDictionary} from "@/api/system/dictbiz";
import {getLazyTree} from "@/api/base/region";

import shopMember from "./comps/shop-member.vue"
import shopBills from "./comps/shop-bills.vue"
import shopJoinrecord from "./comps/shop-joinrecord.vue"
import shopWithdrawrec from "./comps/shop-withdrawrec.vue"
import shopProductFee from "./comps/shop-product-fee"
import ShopInfo from "./shop-info";
import moment from "_moment@2.29.1@moment";

export default {
  components: {
    ShopInfo,
    shopMember, shopBills, shopJoinrecord, shopWithdrawrec, shopProductFee
  },
  data() {
    return {
      //弹框
      dialogShow: false,
      operateId: '',
      dialogTitle: '',
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        selection: true,
        addBtn: false,
        dialogClickModal: false,
        labelWidth: 170,
        column: [{
          prop: "shopInfo",
          slot: true,
          width: 250,
          display: false,
          label: "店铺信息"
        },
          {
            width: 220,
            prop: "agentInfo",
            label: "代理人信息",
            hide: true,
            slot: true,
          },
          {
            prop: "dataInfo",
            slot: true,
            width: 400,
            display: false,
            label: "数据统计"
          },
          {
            prop: "pointData",
            slot: true,
            width: 300,
            display: false,
            label: "积分统计"
          },
          {
            label: "商店名称",
            prop: "name",
            search: true,
            hide: true,
            rules: [{
              required: true,
              message: "请输入商店名称",
              trigger: "blur"
            }]
          },
          {
            label: "店铺评分",
            hide: true,
            prop: "score",
          },
          {
            label: "代理人",
            prop: "agenter",
            hide: true,
            display: false,
            rules: [{
              required: true,
              message: "请输入代理人",
              trigger: "blur"
            }]
          },
          {
            label: "商场id",
            prop: "mallId",
            hide: true,
            display: false,
            disabled: true,
            rules: [{
              required: true,
              message: "请输入商场id",
              trigger: "blur"
            }]
          },
          {
            label: "负责人",
            prop: "personName",
            search: true,
            hide: true,
            rules: [{
              required: true,
              message: "请输入负责人",
              trigger: "blur"
            }]
          },
          {
            label: "联系方式",
            hide: true,
            prop: "personTel",
            rules: [{
              required: true,
              message: "请输入联系方式",
              trigger: "blur"
            }]
          },
          {
            label: "商店封面",
            prop: "cover",
            hide: true,
            type: 'upload',
            dataType: "string",
            listType: 'picture-img',
            span: 24,
            propsHttp: {
              res: 'data',
              url: 'link'
            },
            canvasOption: {
              text: 'avue',
              ratio: 0.1
            },
            tip: '只能上传jpg/png文件，且不超过500kb',
            action: '/api/blade-resource/oss/endpoint/put-file',
            rules: [{
              required: true,
              message: "请上传商店封面",
              trigger: "blur"
            }]
          },
          {
            label: "商店logo",
            hide: true,
            prop: "logo",
            type: 'upload',
            dataType: "string",
            listType: 'picture-img',
            span: 24,
            propsHttp: {
              res: 'data',
              url: 'link'
            },
            canvasOption: {
              text: 'avue',
              ratio: 0.1
            },
            tip: '只能上传jpg/png文件，且不超过500kb',
            action: '/api/blade-resource/oss/endpoint/put-file',
            rules: [{
              required: true,
              message: "请上传商店logo",
              trigger: "blur"
            }]
          },
          {
            label: "父标签",
            hide: true,
            display: false,
            prop: "labelParentIds",
            rules: [{
              required: true,
              message: "请输入父标签ids,逗号分割",
              trigger: "blur"
            }]
          },
          {
            label: "商店标签",
            prop: "labelKey",
            display: false,
            type: "select",
            overHidden: true,
            maxHeight: "50px",
            dicData: [],
            multiple: true,
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            rules: [{
              required: true,
              message: "请输入商店标签key",
              trigger: "blur"
            }]
          },
          {
            label: "销量",
            prop: "sales",
            hide: true,
            type: "number",
            rules: [{
              required: true,
              message: "请输入销量",
              trigger: "blur"
            }]
          },
          {
            label: "店铺图片",
            prop: "shopPic",
            type: 'upload',
            hide: true,
            dataType: "string",
            listType: 'picture-img',
            span: 24,
            propsHttp: {
              res: 'data',
              url: 'link'
            },
            canvasOption: {
              text: 'avue',
              ratio: 0.1
            },
            tip: '只能上传jpg/png文件，且不超过500kb',
            action: '/api/blade-resource/oss/endpoint/put-file',
            rules: [{
              required: true,
              message: "请上传店铺图片",
              trigger: "blur"
            }]
          },
          {
            label: "1 积分等于多少元",
            prop: "pointRate",
            type: "number",
            hide: true,
            rules: [{
              required: true,
              message: "1 积分等于多少元",
              trigger: "blur"
            }]
          },
          {
            label: "积分",
            prop: "point",
            display: false,
            hide: true,
            type: "number",
            rules: [{
              required: true,
              message: "请输入积分",
              trigger: "blur"
            }]
          },
          {
            label: "账户余额",
            hide: true,
            prop: "balance",
            type: "number",
            display: false,
            rules: [{
              required: true,
              message: "请输入账户余额",
              trigger: "blur"
            }]
          },
          {
            label: "提现密码",
            prop: "secret",
            type: "password",
            hide: true,
            display: false,
            rules: [{
              required: true,
              message: "请输入提现密码",
              trigger: "blur"
            }]
          },
          {
            label: "是否启用会员中心",
            prop: "isOpenMember",
            type: "radio",
            hide: true,
            dicData: [{
              label: '否',
              value: 0
            }, {
              label: '是',
              value: 1
            }],
            rules: [{
              required: true,
              message: "请输入是否启用会员中心",
              trigger: "blur"
            }]
          },
          {
            label: "邮箱",
            hide: true,
            prop: "email",
            rules: [{
              required: true,
              message: "请输入邮箱",
              trigger: "blur"
            }]
          },
          {
            label: "总价值",
            prop: "totalValue",
            display: false,
            hide: true,
            type: "number",
            rules: [{
              required: true,
              message: "请输入总价值",
              trigger: "blur"
            }]
          },
          {
            label: "可提现金额",
            prop: "withdrawCharge",
            type: "number",
            hide: true,
            display: false,
            rules: [{
              required: true,
              message: "请输入可提现金额",
              trigger: "blur"
            }]
          },
          {
            label: "会员数量",
            prop: "memberCount",
            type: "number",
            hide: true,
            display: false,
            rules: [{
              required: true,
              message: "请输入会员数量",
              trigger: "blur"
            }]
          },
          {
            label: "标语",
            prop: "slogan",
            hide: true,
            rules: [{
              required: true,
              message: "请输入标语，逗号分割",
              trigger: "blur"
            }]
          },
          {
            label: "审核状态",
            prop: "auditStatus",
            display: false,
            dicData: [
              {
                label: "待商场审核",
                value: "WAITING_MALL"
              },
              {
                label: "待平台审核",
                value: "WAITING_PLATFORM"
              },
              {
                label: "审核通过",
                value: "PASS"
              },
              {
                label: "审核失败",
                value: "FAIL"
              },
              {
                label: "已停用",
                value: "stop"
              },

            ],
            rules: [{
              required: true,
              message: "请输入审核状态",
              trigger: "blur"
            }]
          },
          {
            label: "审核意见",
            prop: "auditAdvice",
            hide: true,
            display: false,
            rules: [{
              required: true,
              message: "请输入审核意见",
              trigger: "blur"
            }]
          },
          {
            label: "账单应收",
            prop: "charge",
            display: false,
            hide: true,
            type: "number",
            rules: [{
              required: true,
              message: "请输入账单应收",
              trigger: "blur"
            }]
          },
          {
            label: "参加活动的id",
            prop: "activityId",
            hide: true,
            display: false,
            rules: [{
              required: true,
              message: "请输入参加活动的id",
              trigger: "blur"
            }]
          },
          {
            label: "消费 1 元赠送多少积分",
            prop: "sendPointUnit",
            hide: true,
            type: "number",
            rules: [{
              required: true,
              message: "消费 1 元赠送多少积分",
              trigger: "blur"
            }]
          },
          {
            label: "经度",
            prop: "longitude",
            hide: true,
            display: false,
            disabled: true,
            rules: [{
              required: true,
              message: "请输入经度",
              trigger: "blur"
            }]
          },
          {
            label: "纬度",
            prop: "latitude",
            hide: true,
            display: false,
            disabled: true,
            rules: [{
              required: true,
              message: "请输入纬度",
              trigger: "blur"
            }]
          },
          {
            label: "区域编码",
            prop: "locationCode",
            hide: true,
            display: false,
            disabled: true,
            rules: [{
              required: true,
              message: "请输入区域编码",
              trigger: "blur"
            }]
          },
          {
            label: "详细地址",
            prop: "address",
            rules: [{
              required: true,
              message: "请输入详细地址",
              trigger: "blur"
            }]
          },
          {
            label: '所在地区',
            prop: 'location',
            type: "cascader",
            props: {
              label: 'name',
              value: 'code'
            },
            lazy: true,
            dataType: "string",
            lazyLoad: this.region,
            rules: [{
              required: true,
              message: "请选择所在地区",
              trigger: "blur"
            }]
          },
        ]
      },
      data: []
    };
  },
  watch: {
    'form.labelKey'(val) {
      if (val !== undefined) {
        const labelJson = []
        const col = this.option.column.find((col) => {
          return col.prop === "labelKey";
        });
        for (const item of val.split(",")) {
          col.dicData.forEach(key => {
            if (key.dictKey === item) {
              labelJson.push(key)
              return;
            }
          })
        }
        this.form.labelJson = JSON.stringify(labelJson);
      }
    },
    'form.address'(val) {
      if (val !== undefined && val !== null) {
        const split = val.split(",");
        if (split.length === 3) {
          this.form.longitude = split[0];
          this.form.latitude = split[1];
          this.form.address = split[2];
        }
      }
    }
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.shop_add, false),
        viewBtn: this.vaildData(this.permission.shop_view, false),
        delBtn: this.vaildData(this.permission.shop_delete, false),
        editBtn: this.vaildData(this.permission.shop_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  created() {
    this.initData();
  },
  methods: {
    handleShopInfo(row) {
      //跳链接方式
      // this.$router.push(`/work/process/shopInfo/handle/${row.id}`);
      this.dialogShow  = true;
      this.dialogTitle  = "商户信息";
      this.operateId  = row.id;
      this.dialogTitle = "查看";
    },
    openDialog(id, name) {
      this.dialogTitle = name
      this.operateId = id
      this.dialogShow = true
      if (this.canReset) {
        this.$refs.refName.refreshChange()
      }
      this.canReset = true
    },

    initData() {
      getDictionary({
        code: "business_label"
      }).then(res => {
        const col = this.option.column.find((col) => {
          return col.prop === "labelKey";
        });
        col.dicData = res.data.data;
      });
    },
    rowSave(row, done, loading) {
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    region(node, resolve) {
      let stop_level = 2;
      let level = node.level;
      let data = node.data || {}
      let parentCode = data.id;
      let list = [];
      if (level > 0) {
        let col = this.option.column.find((item) => {
          return item.prop === "location";
        });
        col.region[level - 1] = data.id;
        if (level > 2) {
          this.form.locationCode = col.region.join(',');
        }
      }
      let callback = () => {
        resolve((list || []).map(ele => {
          return Object.assign(ele, {
            leaf: level >= stop_level
          })
        }));
      }
      if (level == 0) {
        getLazyTree().then(res => {
          list = res.data.data;
          callback()
        })
      }
      if (level == 1) {
        getLazyTree(parentCode).then(res => {
          list = res.data.data;
          callback()
        })
      } else if (level == 2) {
        getLazyTree(parentCode).then(res => {
          list = res.data.data;
          callback()
        })
      } else {
        callback()
      }
    },
    showMap() {
      this.$refs.map.click();
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    generateListAndDownload() {
      const filterArray = ["店铺信息","代理人信息","数据统计","积分统计"];
      this.$Export.excel({
        title: `商户数据导出-${moment().format("yyyy-MM-DD HH:mm:ss")}`,
        columns: this.option.column.filter(ele=>{
          return filterArray.indexOf(ele.label)===-1;
        }),
        data: this.selectionList.length!==0?this.selectionList:this.data
      });
    }
  }
};
</script>

<style lang="scss">
.tag {
  background-color: #00aa00;
  color: white;
  border-radius: 5px;
  margin: 10px;
  padding: 0 10px 0 10px;
  display: inline;
}
</style>