logpm_page/src/views/distribution/reservation/reservation.vue

<template>
    <basic-container>
        <div class="avue-crud">
            <el-row :hidden="!search" style="padding:6px 18px">
                <!-- 查询模块 -->
                <el-form :inline="true" :model="query">
                    <!-- 查询按钮 -->
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
                        <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row style="margin-top: 30px">
                <el-button-group>
                    <el-button type="primary" icon="el-icon-warning" @click="aaa">待确认</el-button>
                    <el-button type="primary" icon="el-icon-circle-check" @click="bbb">已确认<i
                            class="el-icon-arrow-right el-icon--right"></i></el-button>
<!--                    <el-button type="primary" icon="el-icon-view" @click="ccc">全部</el-button>-->
                </el-button-group>
                <div class="avue-crud__header">
                    <!-- 头部左侧按钮模块 -->
                    <div class="avue-crud__left" style="margin-top: 20px">
                        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加预约</el-button>
                        <el-button v-if="this.query.reservationStatus==='1'" type="danger" icon="el-icon-delete" @click="handleConfirmReservations" plain>批量确认
                        </el-button>
                        <el-button v-if="this.query.reservationStatus==='2'" type="danger" icon="el-icon-delete" @click="handleStockUp" plain>批量转备货</el-button>
                        <el-button  v-if="this.query.reservationStatus==='2'" type="danger" icon="el-icon-delete" @click="handleDeliverys" plain>批量转配送</el-button>
                    </div>
                    <!-- 头部右侧按钮模块 -->
                    <div class="avue-crud__right">
                        <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
                        <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
                    </div>
                </div>
            </el-row>
            <el-row>
                <!-- 列表模块 -->
                <el-table ref="table" v-loading="loading"
                          @selection-change="selectionChange"
                          :data="data"
                          :height="height"
                          style="width: 100%"
                          :border="option.border">
                    <el-table-column type="selection" v-if="option.selection" width="55"
                                     align="center"></el-table-column>
                    <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>
                    <el-table-column v-if="option.index" label="序号" type="index" width="80px"
                                     align="center"></el-table-column>

                    <template v-for="(item,index) in option.column">
                        <!-- table字段 -->
                        <el-table-column v-if="item.hide!==true"
                                         :prop="item.prop"
                                         :label="item.label"
                                         :width="item.width"
                                         :key="index">
                        </el-table-column>
                    </template>
                    <!-- 操作栏模块 -->
                    <el-table-column prop="menu" label="操作" :width="220" align="center">
                        <template #="{row}">
                            <el-button type="primary" text icon="el-icon-view" @click="handleView(row)">查看</el-button>
                            <el-button type="primary" text icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
                            <el-button type="primary" text icon="el-icon-delete" @click="rowDel(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-row>
                <div class="avue-crud__pagination" style="width:100%">
                    <!-- 分页模块 -->
                    <el-pagination align="right"
                                   background
                                   @size-change="sizeChange"
                                   @current-change="currentChange"
                                   :current-page="page.currentPage"
                                   :page-sizes="[10, 20, 30, 40, 50, 100]"
                                   :page-size="page.pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="page.total">
                    </el-pagination>
                </div>
            </el-row>
        </div>
    </basic-container>
</template>

<script>
  import {
    getList,
    getDetail,
    add,
    update,
    remove,
    confirms,
    addReservations
  } from '@/api/distribution/distributionReservation';
  import option from '@/option/distribution/distributionReservation';
  import { mapGetters } from 'vuex';
  import { getDictionaryBiz } from '@/api/system/dict';

  export default {
    data() {
      return {
        height: 0,
        // 弹框标题
        title: '',
        // 是否展示弹框
        box: false,
        // 是否显示查询
        search: true,
        // 加载中
        loading: true,
        // 是否为查看模式
        view: false,
        // 查询信息
        query: {},
        // 分页信息
        page: {
          currentPage: 1,
          pageSize: 10,
          total: 40
        },
        // 表单数据
        form: {},
        // 选择行
        selectionList: [],
        // 表单配置
        option: option,
        // 表单列表
        data: [],
        //配送方式字典列表
        deliveryTypeData: [],
        //配送类型字典列表
        resvervationStatusData: [],
        stockupStatusData: [],
        orderSourceData: [],
        periodOfTimeData: [],
        deliveryWayData: [],
        //控制编辑弹窗是否可编辑
        isUpdate: false,
        addvalueServeTypeData:[],
      };
    },
    mounted() {
      this.init();
      this.onLoad(this.page);
      this.getDictionary();
    },
    computed: {
      ...mapGetters(['permission']),
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(',');
      }
    },
    methods: {
      init() {
        this.height = this.setPx(document.body.clientHeight - 340);
      },
      ddd() {
        this.form.deliveryType === '';
        console.log(' this.form.deliveryType===', this.form.deliveryType);
      },
      //数据字典数据获取
      getDictionary() {
        //服务内容
        getDictionaryBiz('addvalue_serve_type').then(res => {
          this.addvalueServeTypeData = res.data.data;
        });
        getDictionaryBiz('delivery_type').then(res => {
          this.deliveryTypeData = res.data.data;
        });
        //订单来源
        getDictionaryBiz('order_source').then(res => {
          this.orderSourceData = res.data.data;
          console.log(this.deliveryTypeData);
        });
        //预约状态
        getDictionaryBiz('resvervation_status').then(res => {
          this.resvervationStatusData = res.data.data;
          console.log(this.deliveryTypeData);
        });
        //备货状态
        getDictionaryBiz('stockup_status').then(res => {
          this.stockupStatusData = res.data.data;
          console.log(this.deliveryTypeData);
        });
        //时段
        getDictionaryBiz('period_of_time').then(res => {
          this.periodOfTimeData = res.data.data;
          console.log(this.deliveryTypeData);
        });
        getDictionaryBiz('delivery_way').then(res => {
          this.deliveryWayData = res.data.data;
        });

      },
      searchHide() {
        this.search = !this.search;
      },
      searchChange() {
        this.onLoad(this.page);
      },
      searchReset() {
        this.query = {};
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      handleConfirmReservations() {
        if (this.selectionList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        let param = {};
        param.ids = this.ids.toString();
        addReservations(param).then(res => {
          this.selectionClear();
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });

      },
      handleSubmit() {

          this.form.serveType = this.form.serveType.join(",");
          update(this.form).then(() => {
            this.box = false;
            this.onLoad(this.page);
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          });
      },
      handleAdd() {
        this.$router.push({
          path: '/distribution/reservation/reservationFrom',
        });
      },

      handleEdit(row) {
        console.log(row);
        this.$router.push({
          path: '/distribution/reservation/reservationFrom',
          query:{
            reservationId: row.id
          }
        });
      },
      aaa() {
        this.query.reservationStatus = '1';
        this.onLoad(this.page);
      },
      bbb() {
        this.query.reservationStatus = '2';
        this.onLoad(this.page);
      },
      handleView(row) {
        this.title = '查看';
        this.view = true;
        this.box = true;
        getDetail(row.id).then(res => {
          this.form = res.data.data;
        });
      },
      /**
       * 批量转配送
       */
      handleDeliverys() {
        if (this.selectionList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        let ids = [];
        this.selectionList.forEach(item => {
          if (item.id) {
            ids.push(item.id);
          }
        });
        ids = ids.join(',');
          this.$router.push({
            path: '/distribution/reservation/atlas',
            query: {
              id: ids,
            }
          });
        // console.log(">>>>>>>>>>",ids);

      },
      handleStockUp() {
        if (this.selectionList.length === 0) {
          this.$message.warning('请选择至少一条数据');
          return;
        }
        let param = {};
        param.ids = this.ids;
        const date = new Date();
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const formattedDate = `${year}-${month}-${day}`;
        console.log(formattedDate);
        param.stockupDate = formattedDate;
        param.goodsAreaId = '46546456156';
        param.addvalueType = '1';
        confirms(param).then(() => {
          this.selectionClear();
          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.selectionClear();
            this.onLoad(this.page);
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          });
      },
      rowDel(row) {
        this.$confirm('确定将选择数据删除?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          });
      },
      beforeClose(done) {
        done();
        this.form = {};
        this.view = false;
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        // this.$refs.table.clearSelection();
      },
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
        this.onLoad(this.page);
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.onLoad(this.page);
      },

      onLoad(page, params = {}) {
        this.loading = true;
        if (!this.query.reservationStatus){
          this.query.reservationStatus = '1';
        }
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          console.log('>>>>>>>', data);
          data.records.forEach(item => {
            this.orderSourceData.forEach(a => {
              if (item.orderSource === a.dictKey) {
                item.orderSource = a.dictValue;
              }
            });
            this.stockupStatusData.forEach(b => {
              if (item.stockupStatus === b.dictKey) {
                item.stockupStatus = b.dictValue;
              }
            });
            this.resvervationStatusData.forEach(e => {
              if (item.reservationStatus === e.dictKey) {
                item.reservationStatus = e.dictValue;
              }
            });
            this.deliveryTypeData.forEach(c => {
              if (item.deliveryType === c.dictKey) {
                item.deliveryType = c.dictValue;
              }
            });

            this.deliveryWayData.forEach(c => {
              if (item.deliveryWay === c.dictKey) {
                item.deliveryWay = c.dictValue;
              }
            });
            this.periodOfTimeData.forEach(d => {
              console.log("11111111111");
              if (item.periodOfTime === d.dictKey) {
                item.periodOfTime = d.dictValue;
              }
            });
            let pa = [];
            if (item.serveType.length>1){
              pa = item.serveType.split(",");
            }else {
              pa.push(item.serveType);
            }
            this.addvalueServeTypeData.forEach(f => {
              pa.forEach((p,index)=>{
                if (p===f.dictKey){
                  pa[index] = f.dictValue
                }
              })
            });
            item.serveType = pa.join(",");
          });
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>