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

<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div class="main">
      <div class="maintop">
        <div class="mainbtn">
          <el-button
            v-hasButtons="['RetailLevelAdd']"
            class="thebtn1"
            @click="adddate()"
          >{{ '添加' }}</el-button>
          <el-button
            v-hasButtons="['RetailLevelExport']"
            class="thebtn2"
            @click="exported"
          >
            {{ '导出' }}</el-button>
        </div>
      </div>
      <div class="maintable">
        <el-table
          v-loading="loading"
          :data="tableData"
          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
            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="gradeName"
            :label="'注册等级'"
            width="180"
          />
          <el-table-column
            align="center"
            prop="censusValueVal"
            :label="'统计类型'"
          />
          <el-table-column
            align="center"
            prop="startValue"
            :label="'统计数值'"
          />
          <el-table-column
            align="center"
            prop="boxNumber"
            :label="$t('购买盒数')"
          />
          <el-table-column
            align="center"
            prop="boxTotal"
            :label="$t('累计盒数')"
          />
          <el-table-column
            align="center"
            prop="boxSmallTotal"
            width="130"
            :label="$t('小市场盒数')"
          />

          <el-table-column
            align="center"
            prop="algebra"
            :label="$t('代数')"
          />

          <el-table-column
            align="center"
            prop="registerAuthorityVal"
            :label="'注册权限'"
          />
          <el-table-column
            align="center"
            prop="pkAwardsVal"
            :label="'真实奖衔'"
          />
          <el-table-column
            align="center"
            prop="anames"
            :label="'直推范围'"
            width="230"
          />
          <el-table-column
            align="center"
            prop="time"
            :label="'操作'"
            fixed="right"
            width="90"
          >
            <template slot-scope="scope">
              <el-button
                v-has-buttons="['RetailLevelEdit']"
                type="text"
                size="small"
                class="button-s"
                style="color: #4391fd"
                @click.native.prevent="update(scope.row, tableData)"
              >
                {{ '修改' }}
              </el-button>
              <el-button
                type="text"
                size="small"
                class="button-s"
                style="color: #c73030"
                @click.native.prevent="updateState(scope.row, tableData)"
              >
                <!-- 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
                v-model="form.gradeName"
                clearable
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="'统计类型'" prop="censusValue">
              <el-select v-model="form.censusValue" clearable placeholder="">
                <el-option
                  v-for="item in censusValueList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </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
                v-model="form.startValue"
                clearable
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="'真实奖衔'" prop="pkAwards">
              <el-select v-model="form.pkAwards" clearable placeholder="">
                <el-option
                  v-for="item in pkAwardsList"
                  :key="item.pkId"
                  :label="item.awardsName"
                  :value="item.pkId"
                />
              </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
                v-model="form.registerAuthority"
                clearable
                placeholder=""
              >
                <el-option
                  v-for="item in registerAuthorityList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item required label="等级属性" prop="gradeValue">
              <el-select v-model="form.gradeValue" clearable placeholder="">
                <el-option
                  v-for="item in gradeSxList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </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
                v-model="form.boxNumber"
                clearable
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="累计盒数" prop="boxTotal">
              <el-input
                v-model="form.boxTotal"
                clearable
                placeholder=""
              />
            </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
                v-model="form.boxSmallTotal"
                clearable
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="购买价格" prop="buyPrice">
              <el-input
                v-model="form.buyPrice"
                clearable
                placeholder=""
              />
            </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
                v-model="form.algebra"
                clearable
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="第一代平级(￥)" prop="firstAlgebra">
              <el-input
                v-model="form.firstAlgebra"
                clearable
                placeholder=""
              />
            </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
                v-model="form.secondAlgebra"
                clearable
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="第三代平级(￥)" prop="thirdAlgebra">
              <el-input
                v-model="form.thirdAlgebra"
                clearable
                placeholder=""
              />
            </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-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>