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

<!-- 订单 -->
<template>
  <div class="page">
    <div class="thetopbox">
      <el-form ref="form" :model="queryParams" label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item :label="'订单编号'">
              <el-input v-model="queryParams.orderCode" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'会员编号'">
              <el-input v-model="queryParams.memberCode" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'产品名称'" prop="teamCode">
              <el-input v-model="queryParams.productName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'收货人'" prop="teamCode">
              <el-input v-model="queryParams.recName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'收货电话'">
              <el-input v-model="queryParams.recPhone" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'二次物流单号'" prop="teamCode">
              <el-input v-model="queryParams.logisticsCode" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="二次物流公司" prop="teamCode">
              <el-input v-model="queryParams.logisticsCompany" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item  :label="'详细地址'" prop="pkAwards">
              <el-cascader
                v-model="queryParams.changeAreaList"
                style="width: 100%"
                :options="allAreaList"
                popper-class="mypopperclass"
                :props="defaultParams"
                @change="handleChange1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" class="lables">
            <el-form-item label="" prop="teamCode">
              <el-input v-model="queryParams.recAddress" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin: 0 0 20px 30px">
            <div class="searchbox">
              <el-button class="searchbtn" @click="research()"> {{ '搜索' }}</el-button>
              <el-button @click="reChongzhi"> {{ '重置' }}</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main">
      <div class="maintop">
        <div class="mainbtn">
          <el-button size="small" @click="handleImport" style="background-color: #008077" class="thebtn1"> {{ '导入' }}</el-button>
          <el-button size="small" @click="importTemplate" style="background-color: #009B58" class="thebtn1"> {{ '下载模板' }}</el-button>
        </div>
      </div>
      <div class="maintable">
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
          :span-method="objectSpanMethod"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column align="center" prop="orderCode" :label="'订单编号'" />
          <el-table-column align="center" prop="memberCode" :label="'会员编号'" />
          <el-table-column align="center" prop="productName" :label="'产品名称'" />
          <el-table-column align="center" prop="quantity" :label="'产品数量'" />
          <el-table-column align="center" prop="recName" :label="'收货人'" />
          <el-table-column align="center" prop="recPhone" :label="'收货人'" />
          <el-table-column align="center" prop="recProvinceVal" :label="'省'" />
          <el-table-column align="center" prop="recCityVal" :label="'市'" />
          <el-table-column align="center" prop="recCountyVal" :label="'区/县'" />
          <el-table-column align="center" prop="recAddress"  :label="'详细地址'" />
          <el-table-column align="center" prop="logisticsCode" :label="'二次物流单号'" />
          <el-table-column align="center" prop="logisticsCompany" label="二次物流公司" />
        </el-table>
      </div>
    </div>

    <el-dialog
      :title="'添加'"
      :visible.sync="ruleShow"
      width="50%"
      center
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form ref="forms" :rules="rules" :model="table" label-width="80px">
        <el-form-item :label="'角色姓名'" prop="roleName">
          <el-input
            v-model="table.roleName"
            clearable
            :placeholder="'请输入'"
          />
        </el-form-item>
        <el-form-item :label="'显示排序'" prop="roleSort">
          <el-input
            v-model="table.roleSort"
            type="number"
            clearable
            :placeholder="'请输入'"
          />
        </el-form-item>
        <el-form-item :label="'权限字符'" prop="roleKey">
          <el-input
            v-model="table.roleKey"
            clearable
            :placeholder="'请输入'"
          />
        </el-form-item>
        <el-form-item :label="'状态'" prop="status">
          <el-checkbox-group v-model="table.status" @change="statusChange">
            <el-checkbox
              v-for="(item, index) in statusList"
              :key="index"
              :label="item.name"
              name="type"
            />
          </el-checkbox-group>
        </el-form-item>
        <div style="padding-top: 100px;display: flex;justify-content: center">
          <el-button type="text" size="small" class="button-style" @click="handleClose"> {{ '取消' }}</el-button>
          <el-button v-preventReClick="3000" type="text" size="small" class="button-style" style="margin-left: 40px;background-color: #48B2FD;" @click="submitBtn()">
            {{ '确认' }}
          </el-button>
        </div>
      </el-form>
    </el-dialog>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="research"
    />
    <div class="footer">
      <el-button
        size="small"
        class="thebtn2"
        @click="$router.push('/configManage/smsRecord/addSms?state=1');"
      > {{ '取消' }}</el-button>
      <el-button
        size="small"
        class="thebtn1"
        :disabled="disabled"
        @click="submit"
      > {{ '确认' }}</el-button>
    </div>
    <el-dialog
      :title="upload.title"
      :close-on-click-modal="false"
      :visible.sync="upload.open"
      width="600px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :on-exceed="handleExceed"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
           {{'将文件拖到此处，或'}}
          <em>{{'点击上传'}}</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-link type="info" style="font-size: 12px" @click="importTemplate"
          > {{ '下载模板' }}</el-link
          >
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          {{'提示：仅允许导入“xls”或“xlsx”格式文件！'}}
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">{{'确认'}}</el-button>
        <el-button @click="upload.open = false">{{'取消'}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import { findAllArea } from '@/api/product'
import { getbdmenuList, getPubenumsList } from '@/api/system'
import { getgradeRanglist, getAwardsListChiose } from '@/api/level'
import * as api from '@/api/sms'
import { Message } from 'element-ui'
import { deleteAgreement } from '@/api/configManage'
import {getToken} from "@/utils/auth";
export default {
  name: 'Qxpz',
  components: {
    topBar
  },
  data() {
    return {
      disabled: false,
      forms: '',
      rules: {
        roleName: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        roleSort: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        ruleStr: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      table: { 'roleName': '', 'roleSort': '', 'roleKey': '', 'status': ['正常'] },
      ruleShow: false,
      moren: 'smsRecordList',
      topList: [
        {
          name: '短信记录',
          path: 'smsRecordList'
        },
        {
          name: '短信模板',
          path: 'smsTemplate'
        },
        {
          name: '新增短信',
          path: 'addSms'
        }
      ],
      defaultParams: {
        label: 'name',
        value: 'pkId',
        children: 'children'
      },
      multipleSelection: [],
      queryParams: {
        changeAreaList: [],
        recProvince: '',
        recCity: '',
        recCounty: '',
        pageNum: 1,
        pageSize: 50,
        userName: '', // 角色姓名
        roleString: '', // 权限字符
        status: '' // 状态
      },
      gradeRangList: [],
      awardsList: [],
      statusList: [{ 'name': '正常', 'id': '0' }, { 'name': '停用', 'id': '1' }],
      menuOptions: [],
      tableData: [],
      total: 0,
      types: '',
      formId: '',
      allAreaList: [],
      upload: {
        // 是否显示弹出层（物流导入）
        open: false,
        // 弹出层标题（物流导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的物流数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API +
          "/sale/manage/order/order-select-import",
      },
      changeMemberTable: [],
    }
  },
  created() {
    this.research()
    // this.getData()
    this.findAllArea()
  },
  methods: {
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "选择订单导入";
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      var fileName = response.fileName;
      if (fileName != undefined && fileName != "") {
      }
      if (response.code == 200) {
        this.changeMemberTable = response.data;
      }

      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true });
      // this.getList();
    },
    // 上传文件数量超出后的动作
    handleExceed() {
      this.upload.isUploading = false;
      this.msgInfo('仅可上传一个文件哦');
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    //下载模板
    importTemplate() {
      this.download(
        "/sale/manage/order/order-select-template",
        {},
        `${'选择订单'}-${new Date().getTime()}.xlsx`
      );
    },
    handleChange1(res) {
      this.queryParams.recProvince = res[0]
      this.queryParams.recCity = res[1]
      this.queryParams.recCounty = res[2]
    },
    // 查询全部地区
    findAllArea() {
      findAllArea().then((res) => {
        this.allAreaList = res.data
        this.allAreaList.forEach((item) => {
          item.children.forEach((ctm, cdx) => {
            ctm.isShow = true
          })
          item.isShow = true
        })
        this.allTsAreaList = JSON.parse(JSON.stringify(this.allAreaList))
        this.allTsAreaList.forEach((item, index) => {
          this.$set(this.allTsAreaList[index], 'changeTsCldList', [])
        })
        this.allNoAreaList = JSON.parse(JSON.stringify(this.allAreaList))
        this.allNoAreaList.forEach((item, index) => {
          this.$set(this.allNoAreaList[index], 'changeNoCldList', [])
        })
      })
    },
    getData() {
      // 真实奖衔下拉选
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
      // 注册等级下拉
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data
      })
    },
    addRules() {
      this.types = 1
      this.ruleShow = true
    },
    submit() {
      const section = this.$refs.multipleTable.selection
      if (section.length == 0) {
        Message({
          message: '请选择数据'
        })
        return
      }
      localStorage.setItem('orderList', JSON.stringify(section))
      this.$router.push('/configManage/smsRecord/addSms?status=1&state=1')
    },
    submitBtn() {
      // 添加角色
      this.ruleSubmit()
    },
    updateShow(item) {
      this.types = 2
      // 更新角色信息
      this.formId = item.roleId
      api.roleDetails(item.roleId).then((res) => {
        if (res.code === 200) {
          this.ruleShow = true
          this.table = { 'roleName': res.data.roleName, 'roleSort': res.data.roleSort,
            'roleKey': res.data.roleKey, 'status': res.data.status === 0 ? ['正常'] : ['停用'] }
        } else {
          Message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    delRole(item) {
      // 删除角色信息
      this.$confirm('确认要删除该角色吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.delRole(item.roleId).then((res) => {
          if (res.code === 200) {
            Message({
              message: '删除成功',
              type: 'success'
            })
            this.research()
          } else {
            Message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      })
    },
    ruleSubmit() {
      const datas = this.table
      const that = this
      this.$refs['forms'].validate(valid => {
        if (!valid) {
          return false
        } else {
          if (this.types === 1) {
            if (datas.status[0] === '正常') {
              datas.status = ''
              datas.status = 0
            } else if (datas.status[0] === '停用') {
              datas.status = ''
              datas.status = 1
            }
            api.addRole(datas).then((res) => {
              if (res.code === 200) {
                Message({
                  message: '添加成功',
                  type: 'success'
                })
                that.ruleShow = false
                that.table = { 'roleName': '', 'roleSort': '', 'roleKey': '', 'status': ['正常'] }
                that.research()
              } else {
                Message({
                  message: res.msg,
                  type: 'error'
                })
              }
            })
          }
          if (this.types === 2) {
            if (datas.status[0] === '正常') {
              datas.status = ''
              datas.status = 0
            } else if (datas.status[0] === '停用') {
              datas.status = ''
              datas.status = 1
            }
            datas.roleId = this.formId
            api.putRole(datas).then((res) => {
              if (res.code === 200) {
                Message({
                  message: '修改成功',
                  type: 'success'
                })
                that.ruleShow = false
                that.table = { 'roleName': '', 'roleSort': '', 'roleKey': '', 'status': ['正常'] }
                that.research()
              } else {
                Message({
                  message: res.msg,
                  type: 'error'
                })
              }
            })
          }
        }
      })
    },
    statusChange(value) {
      if (this.table.status.length > 1) {
        this.table.status.splice(0, 1)
      }
    },
    handleClose() {
      this.ruleShow = false
      this.table = { 'ruleName': '', 'sort': '', 'ruleStr': '', 'status': ['正常'] }
    },
    changeBox(row) {
      console.error(row)
    },
    addFrom() {
    },
    addRule() {
    },
    changeTime(value) {
      // this.queryParams.creationTime = value[0]
      // this.queryParams.endCreationTime = value[1]
    },
    handleChangeMunu(value) {
      console.log('🌈', value[value.length - 1])
      this.queryParams.menuId = value[value.length - 1]
    },
    // 菜单下拉选
    getPubenumsList() {
      getPubenumsList().then((res) => {
        this.menuOptions = res.data
      })
    },
    // 等级范围选择
    getgradeRanglist() {
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data
      })
    },
    // 奖衔下拉列表
    getAwardsListChiose() {
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
    },
    research() {
      // // 日期传入改为起止两个字段
      // if ("" != this.queryParams.creationTime) {
      //   this.queryParams.creationTimeStart = this.queryParams.creationTime[0];
      //   this.queryParams.creationTimeEnd = this.queryParams.creationTime[1];
      // }

      // creationTime: '', // 开始时间
      //   modifiedTime: '' // 结束时间
      api.orderSelect(this.queryParams).then((res) => {
        console.error(res)
        // res.rows.forEach((element) => {
        //   element.alist = []
        //   element.blist = []
        //   element.clist = []
        //   element.themenus = ''
        //   element.theaward = ''
        //   element.thegrade = ''
        //   element.menuList.forEach((item) => {
        //     element.alist.push(item.menuVal)
        //     element.themenus = element.alist.join('/')
        //   })
        //   element.awardList.forEach((item) => {
        //     element.blist.push(item.awardVal)
        //     element.theaward = element.blist.join('/')
        //   })
        //   element.gradeList.forEach((item) => {
        //     element.clist.push(item.gradeVal)
        //     element.thegrade = element.clist.join('/')
        //   })
        // })

        this.tableData = res.rows
        this.total = res.total
      })
    },
    reChongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        userName: '', // 角色姓名
        roleString: '', // 权限字符
        status: '', // 状态
        startDate: '', // 开始时间
        endDate: [] // 结束时间
      }
      this.research()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      //   if (rowIndex % 2 === 0) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1,
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0,
      //     };
      //   }
      // }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .lables .el-form-item__content{
  margin-left: 20px!important;
}
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}

.button-style{
  width: 209px;
  height: 48px;
  background: #CCCCCC;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  line-height: 48px;
  padding: 0!important;
  color: #fff;
  font-size: 18px;
}
::v-deep .el-dialog__title{
  font-weight: bold;
}
::v-deep .el-dialog__header{
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.button-s{
  padding: 0 2px!important;
}
::v-deep .el-button{
  padding: 10px 20px;
}
::v-deep .el-date-editor .el-range__close-icon{
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range-separator{
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range__icon{
  margin-top: -10px;
}
::v-deep .el-input__inner{
  //height:28px;
  //line-height: 28px;
}
::v-deep .el-form-item__label{
  color: #333;
  font-weight: inherit;
}
::v-deep .el-row {
  margin-top: 20px;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
.openClose {
  margin-top: 10px;
  margin-right: 10px;
  color: #666666;
  text-align: center;
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .thetopbox {
    background: #ffffff;
    border-radius: 8px;
    .searchbox {
      display: flex;
      align-items: center;
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        background: #08143f;
        color: #ffffff;
      }
    }
  }
  .main {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);

    .maintop {
      display: flex;
      padding: 10px 20px;
      justify-content: space-between;
      align-items: center;
      .mainbtn {
        .thebtn1 {
          color: #ffffff;
          background: rgba(67, 145, 253, 1);
        }
      }
    }
  }
}
</style>