logpm_page/src/views/basicdata/brand/basicdataFreight.vue

<template>
  <basic-container>
    <avue-crud
      :option="option"
      v-model:search="search"
      v-model:page="page"
      v-model="form"
      :table-loading="loading"
      :data="data"
      :permission="permissionList"
      :before-open="beforeOpen"
      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 #menu-left="{}">
        <el-button
          type="primary"
          icon="el-icon-plus"
          plain
          v-if="permission.basicdataFreight_add"
          @click="ownSave"
          >新增
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          plain
          v-if="permission.basicdataFreight_delete"
          @click="handleDelete"
          >删 除
        </el-button>

        <!--        <el-button type="warning"-->
        <!--                   plain-->
        <!--                   icon="el-icon-download"-->
        <!--                   @click="handleExport">导 出-->
        <!--        </el-button>-->
      </template>
      <!--      <template  #menu="{row,index,size}">-->
      <!--        <el-button type="danger"-->
      <!--                   icon="el-icon-plus"-->
      <!--                   @click="$refs.crud.rowAdd()">新增</el-button>-->
      <!--      </template>-->
    </avue-crud>
    <el-dialog v-model="Detailspop" title="详情" width="60%">
      <el-form
        class="el_formInfo"
        :model="formInfo"
        label-width="300px"
        style="width: 100%"
        disabled
      >
        <div class="el_box_1">
          <el-form-item label="客户名称">
            <el-input v-model="formInfo.clientName" />
          </el-form-item>

          <el-form-item label="品牌名称">
            <el-input v-model="formInfo.brand" />
          </el-form-item>

          <el-form-item label="一口价">
            <el-input v-model="formInfo.fixedPrice" />
          </el-form-item>

          <el-form-item label="品类">
            <el-input v-model="formInfo.clientName" />
          </el-form-item>
        </div>
        <div class="el_box_2">
          <el-form-item label="生效时间">
            <el-input v-model="formInfo.clientName" />
          </el-form-item>
          <el-form-item label="截止时间">
            <el-input v-model="formInfo.clientName" />
          </el-form-item>

          <el-form-item label="服务类型">
            <el-input v-model="formInfo.clientName" />
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="Detailspop = false">关闭</el-button>
          <!-- <el-button type="primary" @click="DetailspopFn">
          确定
        </el-button> -->
        </div>
      </template>
    </el-dialog>
  </basic-container>
</template>

<script>
import {
  getList,
  getDetail,
  add,
  update,
  remove,
  $_QueryUserName,
  $_brand,
  $_category,
  $_getDeptLazyTree,
} from '@/api/basicdata/basicdataFreight';
// import option from "@/option/basicdata/basicdataFreight";
import { mapGetters } from 'vuex';
import { exportBlob } from '@/api/common';
import { getToken } from '@/utils/auth';
import { downloadXls } from '@/utils/util';
import { dateNow } from '@/utils/date';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

export default {
  data() {
    return {
      form: {},
      query: {},
      search: {},
      loading: true,
      Detailspop: true,
      formInfo: {}, //详情弹窗表格
      page: {
        pageSize: 30,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        height: 'auto',
        calcHeight: 30,
        labelWidth: 120,
        addBtn: false, //添加按钮
        tip: false,
        searchShow: false,
        searchMenuSpan: 7,
        indexLabel: '序号',
        indexWidth: '100',
        align: 'center',
        border: true,
        indexFixed: false,
        index: true,
        width: '100%',
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: '租户号',
            prop: 'tenantId',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '创建人',
            prop: 'createUser',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '创建时间',
            prop: 'createTime',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '更新人',
            prop: 'updateUser',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '更新时间',
            prop: 'updateTime',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '状态',
            prop: 'status',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '是否已删除',
            prop: 'isDeleted',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '创建部门',
            prop: 'createDept',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '主键',
            prop: 'id',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '预留1',
            prop: 'reserve1',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '预留2',
            prop: 'reserve2',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '预留3',
            prop: 'reserve3',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '预留4',
            prop: 'reserve4',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '预留5',
            prop: 'reserve5',
            type: 'input',
            addDisplay: false,
            editDisplay: false,
            viewDisplay: false,
            hide: true,
            width: 'fit-content',
          },
          {
            label: '计算方式', //;1件  2方  3公斤
            prop: 'formulaMode',
            type: 'select',
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_freight_formulamode',
            width: '100px',
            span: 12,
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            search: true,
            rules: [
              {
                required: true,
                message: '请选择计算方式',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '物品名称',
            prop: 'itemName',
            type: 'input',
            width: '150px',
            span: 12,
            rules: [
              {
                required: true,
                message: '请填写物品名称',
                trigger: 'blur',
              },
            ],
          },
          // {
          //   label: "门店品牌",
          //   prop: "storeBrandId",
          //   type: "select",
          //   width:"150px",
          //   span:12,
          //   allowCreate: true,
          //   filterable: true,
          //   dicUrl: "/api/logpm-basicdata/basicdataStoreBrand/listName?name={{key}}",
          //   props: {
          //     label: 'storeBrandName',
          //     value: 'id'
          //   },
          //   change: (val) => {
          //
          //     // let dic =  val.dic;
          //     if(!!val.value){
          //       // console.log(">>>>。。。。",val);
          //       let d = [];
          //       let a = [];
          //       val.dic.forEach(i =>{
          //         if(i.id == val.value){
          //           console.log("iiiiii",i);
          //           let dataZhi = {
          //             label: i.brandName,
          //             value: i.brandId
          //           }
          //           let data = {
          //             label: i.storeName,
          //             value: i.shopId
          //           }
          //           d.push(dataZhi);
          //           a.push(data);
          //         }
          //       })
          //       // this.selectionChange();
          //       // console.log(",.,.",this.option.column[26]);
          //       this.fuzhi(d,a);
          //
          //
          //     }
          //   },
          //   rules: [{
          //     required: true,
          //     message: '请选择门店品牌',
          //     trigger: 'blur'
          //   }]
          //
          // },

          {
            label: '门店',
            prop: 'shop',
            type: 'select',
            search: false,
            dicData: [],
            disabled: true,
          },
          {
            label: '品牌',
            prop: 'brand',
            type: 'select',
            search: false,
            dicData: [],
            disabled: true,
          },
          {
            label: '服务类型', //;1 干  2干仓  3干仓配 4干配
            prop: 'typeService',
            type: 'select',
            width: '150px',
            span: 12,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_freight_type',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            search: true,
            rules: [
              {
                required: true,
                message: '请选择服务类型',
                trigger: 'blur',
              },
            ],
          },

          {
            label: '一级品类',
            prop: 'firstClassCategory',
            type: 'input',
            width: '150px',
            span: 12,
            rules: [
              {
                required: true,
                message: '请填写一级品类',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '一口价',
            prop: 'fixedPrice',
            type: 'input',
            width: '150px',
            span: 12,
            rules: [
              {
                required: true,
                message: '请填写一口价',
                trigger: 'blur',
              },
            ],
          },

          {
            label: '生效时间',
            prop: 'effectiveTime',
            type: 'datetime',
            width: '150px',
            span: 12,
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            rules: [
              {
                required: true,
                message: '请填写生效时间',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '截止时间',
            prop: 'expirationTime',
            type: 'datetime',
            width: '150px',
            span: 12,
            format: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            rules: [
              {
                required: true,
                message: '请填写截止时间',
                trigger: 'blur',
              },
            ],
          },
          // {
          //   label: "类型",
          //   prop: "type",
          //   type: "input",
          // },
          // {
          //   label: "标识",
          //   prop: "identification",
          //   type: "input",
          //
          // },
          {
            label: '时间段', //;1 0-30天  2 0-60天 3 60天以上
            prop: 'warehousingTimeCharge',
            type: 'select',
            width: '150px',
            span: 12,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_freight_timecharge',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            search: true,
            rules: [
              {
                required: true,
                message: '请选择时间段',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '时间段费用',
            prop: 'warehousingTimeStatus',
            type: 'input',
            width: '150px',
            span: 12,
            rules: [
              {
                required: true,
                message: '请填写时间段费用',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
      data: [],
    };
  },
  created() {},
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.validData(this.permission.basicdataFreight_add, false),
        viewBtn: this.validData(this.permission.basicdataFreight_view, false),
        delBtn: this.validData(this.permission.basicdataFreight_delete, false),
        editBtn: this.validData(this.permission.basicdataFreight_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    },
  },
  methods: {
    fuzhi(led, ed) {
      // console.log(">>>>",led,ed);
      this.option.column[27].dicData = led;
      this.option.column[27].value = led[0].value;
      this.option.column[26].dicData = ed;
      this.option.column[26].value = ed[0].value;
      this.form.shop = ed[0].value;
      this.form.brand = led[0].value;
    },
    ownSave() {
      this.$router.push({
        path: '/basicdata/brand/basicdataFreightFrom',
        query: {},
      });
    },
    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();
        });
    },
    handleExport() {
      let downloadUrl = `/blade-basicdataFreight/basicdataFreight/export-basicdataFreight?${
        this.website.tokenHeader
      }=${getToken()}`;
      const {
        formulaMode,
        singleColon,
        forwardingUnit,
        shop,
        brand,
        typeService,
        clearingForm,
        warehousingTimeCharge,
      } = this.query;
      let values = {
        formulaMode_equal: formulaMode,
        singleColon_like: singleColon,
        forwardingUnit_like: forwardingUnit,
        shop_like: shop,
        brand_like: brand,
        typeService_equal: typeService,
        clearingForm_equal: clearingForm,
        warehousingTimeCharge_: warehousingTimeCharge,
      };
      this.$confirm('是否导出数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        NProgress.start();
        exportBlob(downloadUrl, values).then(res => {
          downloadXls(res.data, `基础价格记录表${dateNow()}.xlsx`);
          NProgress.done();
        });
      });
    },
    // 查看按钮
    beforeOpen(done, type) {
      this.Detailspop = true; //开启弹窗
      console.log(this.form.id);
      console.log(this.form, 'from');
      console.log('查看');
      getDetail(this.form.id).then(res => {
        this.formInfo.fixedPrice = this.form.fixedPrice == 1 ? '否' : this.form.fixedPrice == 2 ? '是' : '暂无';
        this.form = res.data.data;
        $_QueryUserName({
          id: res.data.data.itemName,
        }).then(res => {
          this.formInfo.clientName = res.data.data.clientName;
          console.log(res, '客户名称');
        });
        // 查询品牌
        $_brand({
          brandId: this.form.brand,
          id: this.form.itemName,
        }).then(res => {
          console.log(res, '品牌');
          this.formInfo.brand = res.data.data.brandName;
        });


        return
        $_category({
          id:this.form.category
        }).then(res=>{
          console.log(res,'品类');
        })
      });
      return;
      if (['edit', 'view'].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
          $_QueryUserName({
            id: res.data.data.itemName,
          }).then(res => {
            this.formInfo.clientName = res.data.data.clientName;
            console.log(res, '客户名称');
          });
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      console.log('>>>>>>>>', params, done);
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      console.log('执行了》》》》》》', 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);
    },
    onLoad(page, params = {}) {
      this.loading = true;

      const {
        formulaMode,
        singleColon,
        forwardingUnit,
        shop,
        brand,
        typeService,
        clearingForm,
        warehousingTimeCharge,
      } = this.query;

      let values = {
        formulaMode_equal: formulaMode,
        singleColon_like: singleColon,
        forwardingUnit_like: forwardingUnit,
        shop_like: shop,
        brand_like: brand,
        typeService_equal: typeService,
        clearingForm_equal: clearingForm,
        warehousingTimeCharge_: warehousingTimeCharge,
      };

      getList(page.currentPage, page.pageSize, values).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>

<style scoped lang="scss">
:deep(.el-form-item__content) {
}
:deep(.avue-form__row) {
  margin-left: 10px;
  max-width: 300px !important;
}
:deep(.no-print) {
  margin-left: auto;
}
:deep(.avue-form__row) {
  margin-left: 0;
}
:deep(.el-form-item__label) {
  padding-left: 0;
  width: auto !important;
}
:deep(.no-print) {
  .el-button {
    margin-right: 0;
  }
}
.el_formInfo {
  display: flex;
  flex-direction: column;
  .el_box_1,
  .el_box_2 {
    display: flex;
  }
}
</style>