web-zk-admin/src/views/configManage/retailLevel/index.vue

<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :topList="topList"
      :moren="moren"
    ></topBar>
    <div class="main">
      <div class="maintop">
        <div class="mainbtn">
          <el-button
            class="thebtn1"
            @click="adddate()"
            v-hasButtons="['RetailLevelAdd']"
            >{{ '添加' }}</el-button
          >
          <el-button
            class="thebtn2"
            @click="exported"
            v-hasButtons="['RetailLevelExport']"
          >
            {{ '导出' }}</el-button
          >
        </div>
      </div>
      <div class="maintable">
        <el-table
          :data="tableData"
          v-loading="loading"
          height="750px"
          style="width: 100%"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            align="center"
            prop=""
            :label="'图片'"
            width="180"
          >
            <template slot-scope="scope">
              <img
                style="width: 44px; height: 44px"
                :src="scope.row.image"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="jxmc"
            :label="'国家'"
            width="180"
          >
            <template slot-scope="scope">
              <div class="tem">
                <img :src="scope.row.nationalFlag2" alt="" />
                <div>{{ scope.row.pkCountryName }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="gradeName"
            :label="'注册等级'"
            width="180"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="censusValueVal"
            :label="'统计类型'"
          >
          </el-table-column>
           <el-table-column
            align="center"
            prop="startValue"
            :label="'统计数值'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="boxNumber"
            :label="$t('购买盒数')"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="boxTotal"
            :label="$t('累计盒数')"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="boxSmallTotal"
            width='130'
            :label="$t('小市场盒数')"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="buyPrice"
            :label="$t('购买价格')"
          >
          </el-table-column>
           <el-table-column
            align="center"
            prop="algebra"
            :label="$t('代数')"
          >
          </el-table-column>
            <el-table-column
            align="center"
            prop="firstAlgebra"
             width='140'
            :label="$t('第一代平级')"
          >
          </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="secondAlgebra"
              width='140'
            :label="$t('第二代平级')"
          >
          </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="thirdAlgebra"
              width='140'
            :label="$t('第三代平级')"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="registerAuthorityVal"
            :label="'注册权限'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="pkAwardsVal"
            :label="'真实奖衔'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="anames"
            :label="'直推范围'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="time"
            :label="'操作'"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="update(scope.row, tableData)"
                type="text"
                size="small"
                class="button-s"
                style="color: #4391fd"
                v-has-buttons="['RetailLevelEdit']"
              >
                {{ '修改' }}
              </el-button>
              <el-button
                @click.native.prevent="updateState(scope.row, tableData)"
                type="text"
                size="small"
                class="button-s"
                style="color: #c73030"
              >
                <!-- 0启用1禁用 -->
                {{
                  scope.row.enableState == 1
                    ? '启用'
                    : '禁用'
                }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getGradeList"
    />
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogTitle"
      :visible.sync="updateShow"
      width="47%"
      center
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="120px"
        style="padding-bottom: 40px"
      >
        <el-row style="display: flex; justify-content: space-between">
          <el-col :span="10" style="margin-left: -50px">
            <el-form-item :label="'注册等级'" prop="gradeName">
              <el-input
                clearable
                v-model="form.gradeName"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="'统计类型'" prop="censusValue">
              <el-select clearable v-model="form.censusValue" placeholder="">
                <el-option
                  v-for="item in censusValueList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display: flex; justify-content: space-between">
          <el-col :span="10" style="margin-left: -50px">
            <el-form-item :label="'统计数值'" prop="startValue">
              <el-input
                clearable
                v-model="form.startValue"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="'真实奖衔'" prop="pkAwards">
              <el-select clearable v-model="form.pkAwards" placeholder="">
                <el-option
                  v-for="item in pkAwardsList"
                  :key="item.pkId"
                  :label="item.awardsName"
                  :value="item.pkId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display: flex; justify-content: space-between">
          <el-col :span="10" style="margin-left: -50px">
            <el-form-item :label="'注册权限'" prop="registerAuthority">
              <el-select
                clearable
                v-model="form.registerAuthority"
                placeholder=""
              >
                <el-option
                  v-for="item in registerAuthorityList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item required label="等级属性" prop="gradeValue">
              <el-select clearable v-model="form.gradeValue" placeholder="">
                <el-option
                  v-for="item in gradeSxList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display: flex; justify-content: space-between">
          <el-col :span="10" style="margin-left: -50px">
            <el-form-item label="购买盒数" prop="boxNumber">
              <el-input
                clearable
                v-model="form.boxNumber"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="累计盒数" prop="boxTotal">
              <el-input
                clearable
                v-model="form.boxTotal"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display: flex; justify-content: space-between">
          <el-col :span="10" style="margin-left: -50px">
            <el-form-item label="小市场盒数" prop="boxSmallTotal">
              <el-input
                clearable
                v-model="form.boxSmallTotal"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="购买价格" prop="buyPrice">
              <el-input
                clearable
                v-model="form.buyPrice"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display: flex; justify-content: space-between">
          <el-col :span="10" style="margin-left: -50px">
            <el-form-item label="代数" prop="algebra">
              <el-input
                clearable
                v-model="form.algebra"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="第一代平级(￥)" prop="firstAlgebra">
              <el-input
                clearable
                v-model="form.firstAlgebra"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display: flex; justify-content: space-between">
          <el-col :span="10" style="margin-left: -40px">
            <el-form-item label="第二代平级(￥)" prop="secondAlgebra">
              <el-input
                clearable
                v-model="form.secondAlgebra"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="第三代平级(￥)" prop="thirdAlgebra">
              <el-input
                clearable
                v-model="form.thirdAlgebra"
                placeholder=""
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="'直推范围'" prop="gradeRang">
              <el-checkbox-group v-model="form.gradeRang">
                <el-checkbox
                  v-for="item in gradeRangList"
                  :key="item.pkId"
                  :label="item.pkId"
                  >{{ item.gradeName }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="'上传图片'" prop="image">
              <imageUpload v-model="form.image" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item :label="'图标'" prop="icon">
              <imageUpload v-model="form.icon" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="颜色" prop="color">
              <el-color-picker v-model="form.color"></el-color-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancels" @click="handleClose">{{
          '取消'
        }}</el-button>
        <el-button
          class="submit"
          style="margin-left: 40px"
          @click="onSubmit('form')"
          >{{ '确认' }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import topBar from "@/components/topBar";
import ImageUpload from "@/components/ImageUpload";
import {
  getGradeList,
  getgradeRanglist,
  getOnelist,
  deleteGrade,
  getStatistical,
  getRegistration,
  getAwardsListChiose,
  updateGrade,
  saveGrade,
  updateStatusGrade,
  getGradeValueList,
} from "@/api/retailLevel";
import { userCountryList } from "@/api/user";
export default {
  name: "RetailLevel",
  components: {
    topBar,
    ImageUpload,
  },
  data() {
    return {
      moren: "retailLevel",
      topList: [
        {
          name: '等级配置',
          path: "retailLevel",
        },
        {
          name: '奖衔配置',
          path: "retailJxpz",
        },
        {
          name: '复购极差',
          path: "retailFgjc",
        },
        // {
        //   name: '配送中心',
        //   path: "pszx",
        // },
      ],
      multipleSelection: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      tableData: [],
      loading: false,
      total: 0,
      updateShow: false,
      countryList: [], //国家列表
      gradeValueList: [], //注册等级列表
      pkAwardsList: [], //真实奖衔列表
      censusValueList: [], //统计类型列表
      registerAuthorityList: [], //注册权限列表
      gradeRangList: [], //直推范围列表
      gradeSxList: [], //等级属性
      form: {
        gradeName: "", //注册等级
        censusValue: "", //统计类型
        startValue: "", //注册金额,
        pkAwards: "", //真实奖衔
        registerAuthority: "", //注册权限
        gradeRang: [], //直推范围
        gradeValue: "", //等级属性
        image: "",
        icon: "",
        boxNumber: "",
        boxTotal: "",
        boxSmallTotal: "",
        buyPrice: "",
        algebra: "",
        firstAlgebra: "",
        secondAlgebra: "",
        thirdAlgebra: "",
      },
      rules: {
        gradeName: [
          { required: true, message: "请输入注册金额", trigger: "blur" },
        ],
        censusValue: [
          { required: true, message: "请选择统计类型", trigger: "change" },
        ],
        startValue: [
          { required: true, message: "请输入注册金额", trigger: "blur" },
        ],
        pkAwards: [
          { required: true, message: "请选择真实奖衔", trigger: "change" },
        ],
        registerAuthority: [
          { required: true, message: "请选择注册权限", trigger: "change" },
        ],
        image: [
          { required: true, message: '请上传图片', trigger: "change" },
        ],
        icon: [
          { required: true, message: '请上传图标', trigger: "change" },
        ],
      },
      addEdit: "",
      dialogTitle: "",
    };
  },
  created() {
    this.getGradeList();
    this.getgradeRanglist();
    this.getStatistical();
    this.getRegistration();
    this.getAwardsListChiose();
    this.userCountryList();
    this.getGradeValueList();
  },
  methods: {
    exported() {
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then((_) => {
        this.download(
          "/system/manage/retail-grade/export",
          { ...this.queryParams },
          `${this.$t("等级配置")}${new Date().getTime()}.xlsx`
        );
      });
    },
    //等级属性下拉
    getGradeValueList() {
      getGradeValueList().then((res) => {
        this.gradeSxList = res.data;
      });
    },
    //启用/禁用
    updateState(row) {
      this.$confirm('确认更改状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
      }).then(() => {
        var thestate = "";
        if (row.enableState == 0) {
          thestate = 1;
        } else if (row.enableState == 1) {
          thestate = 0;
        }
        updateStatusGrade({ pkId: row.pkId, enableState: thestate }).then(
          (res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              // 获取列表
            }
            this.getGradeList();
          }
        );
      });
    },
    //获取国家
    userCountryList() {
      userCountryList().then((res) => {
        this.countryList = res.data;
      });
    },

    //真实奖衔下拉列表
    getAwardsListChiose() {
      getAwardsListChiose().then((res) => {
        this.pkAwardsList = res.rows;
      });
    },
    handleClose() {
      this.updateShow = false;
      this.$refs["form"].clearValidate();
      this.$refs["form"].resetFields();
    },
    //添加
    adddate() {
      this.dialogTitle = '添加';
      this.updateShow = true;
      this.addEdit = 1;
      this.$refs["form"].clearValidate();
      this.$refs["form"].resetFields();
    },
    //添加||修改提交
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = "";
          if (this.addEdit == 1) {
            //添加
            url = saveGrade;
          } else {
            //修改
            url = updateGrade;
          }

          url(this.form).then((res) => {
            if (res.code == 200) {
              this.updateShow = false;
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.getGradeList();
              this.addEdit = "";
            }
          });
        } else {
          return false;
        }
      });
    },
    //统计类型列表
    getStatistical() {
      getStatistical().then((res) => {
        this.censusValueList = res.data;
      });
    },
    //注册权限列表
    getRegistration() {
      getRegistration().then((res) => {
        this.registerAuthorityList = res.data;
      });
    },

    //获取直推范围列表&&等级下拉
    getgradeRanglist() {
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data;
        this.gradeValueList = res.data;
      });
    },
    //获取等级配置列表
    getGradeList() {
      this.loading = true;
      getGradeList(this.queryParams).then((res) => {
        res.rows.forEach((element) => {
          element.bnames = [];
          element.anames = "";
          element.gseList.forEach((item) => {
            element.bnames.push(item.pkScopeVal);
            const str = element.bnames.join("/");
            element.anames = str;
          });
          this.countryList.forEach((child) => {
            if (element.pkCountry == child.pkCountry) {
              element.pkCountryName = child.name;
              element.pkCountryIcon = child.nationalFlag2;
            }
          });
        });
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    //修改
    update(row, item) {
      this.dialogTitle = '修改';
      this.updateShow = true;
      this.addEdit = 2;
      getOnelist(row.pkId).then((res) => {
        this.form = res.data;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //删除
    deleteRow(row, item) {
      this.$confirm('确定删除?').then((_) => {
        deleteGrade(row.pkId).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.getGradeList();
          }
        });
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>

<style lang="scss" scoped>
.button-s {
  padding: 3px 0;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
::v-deep .el-select {
  width: 100%;
}
.submit {
  width: 209px;
  height: 48px;
  background: #c8161d;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  border-color: #c8161d;
  margin-left: 20px;
}
.cancels {
  width: 209px;
  height: 48px;
  background: #cccccc;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  border-color: #ccc;
}
.redcolor {
  color: #ed1d25;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
.tem {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 28px;
    height: 20px;
    margin-right: 3px;
  }
}
.page {
  padding: 10px 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    //margin-top: 20px;
    //background: #ffffff;
    //border-radius: 8px;
    //box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    background: #f9f9f9;
    .maintop {
      display: flex;
      // padding: 10px 0;
      justify-content: space-between;
      align-items: center;
      .mainbtn {
        .thebtn1 {
          color: #ffffff;
          background: #3181e5;
        }
        .thebtn2 {
          color: #ffffff;
          background: #ffad41;
        }
      }
    }
  }
}
</style>