lemonBeans_ui/src/views/Warehousing/inStock/uploadExcel.vue

<template>
  <el-dialog
    title="提示"
    :visible.sync="uploadVisible"
    width="85%"
    :close-on-click-modal="false"
    @close="handleClose"
    v-dialogDrag
  >
    <span>
      <div
        style="
          display: flex;
          justify-content: space-between;
        "
      >
        <div style="display: flex;;margin-bottom: 10px;">
          <el-upload
            :action="actionUrl"
            multiple
            :on-progress="progress"
            :headers="headers"
            :show-file-list="false"
            :on-success="
              (res) => {
                handleSucces(res);
              }
            "
          >
            <el-button size="small" type="primary">导入Excel</el-button>
          </el-upload>
          <el-button
            v-if="false"
            size="small"
            type="primary"
            @click="bathHandle"
            :disabled="selection.length != 1"
            style="margin-left:10px"
            >批量处理属性（详情）</el-button
          >
        </div>
        <div style="margin: 0 10px">
          <el-button
            icon="el-icon-setting"
            size="mini"
            circle
            @click="showSetting = !showSetting"
          ></el-button>
        </div>
      </div>
      <el-table :data="excelList" @selection-change="Selectinventory" v-loading="loading" element-loading-text="努力加载中">
        <el-table-column type="selection" width="50" align="center" fixed />
        <el-table-column
          label="序号"
          type="index"
          width="50"
          fixed
          align="center"
        />
        <el-table-column
          v-for="(item, index) in getRowList"
          :key="index"
          :label="item.name"
          :width="item.width"
          :prop="item.label"
          align="center"
          :fixed="item.fixed"
          sortable
        >
          <template slot-scope="scope">
            <span v-if="item.label == 'fBsdate'">
              <el-date-picker
                v-model="scope.row.fBsdate"
                type="date"
                style="width: 100%"
                value-format="timestamp"
                placeholder="入库日期"
                @change="dateSelected(scope,'fBsdate')"
              >
              </el-date-picker>
            </span>
            <span v-else-if="item.label == 'fGoodsid'">
              <el-select
                filterable
                v-model="scope.row.fGoodsid"
                style="width: 100%"
                placeholder="请选择品名"
                @change="dateSelected(scope,'fGoodsid')"
              >
                <el-option
                  v-for="(item, index) in goodsOptions"
                  :key="index.fId"
                  :label="item.fName"
                  :value="item.fId"
                ></el-option>
              </el-select>
            </span>
            <span v-else-if="item.label == 'fBusinessType'">
              <el-select
                filterable
                v-model="scope.row.fBusinessType"
                style="width: 100%"
                placeholder="请选择商品属性"
                @change="dateSelected(scope,'fBusinessType')"
              >
                <el-option
                  v-for="(item, index) in fStorageTypeOptions"
                  :key="index.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </span>
            <span v-else-if="item.label == 'fMarks'">
              <el-input
                v-model="scope.row.fMarks"
                style="width: 100%"
                placeholder="请填写属性描述"
                @change="dateSelected(scope,'fMarks')"
              />
            </span>
            <span v-else-if="item.label == 'fWarehouseInformation'">
              <el-input
                placeholder="请选择"
                v-model="scope.row.fWarehouseInformation"
                @focus="getTreeselect(scope)"
              >
              </el-input>
            </span>
            <span v-else-if="item.label == 'fQty'">
              <el-input
                v-input-limit="0"
                v-model.number="scope.row.fQty"
                style="width: 100%"
                placeholder="件数"
              />
            </span>
            <span v-else-if="item.label == 'fGrossweight'">
              <el-input
                v-model.number="scope.row.fGrossweight"
                v-input-limit="2"
                style="width: 100%"
                placeholder="毛重"
              />
            </span>
            <span v-else-if="item.label == 'fNetweight'">
              <el-input
                v-model.number="scope.row.fNetweight"
                v-input-limit="2"
                style="width: 100%"
                placeholder="净重"
              />
            </span>
            <span v-else-if="item.label == 'fPackagespecs'">
              <el-input
                v-model="scope.row.fPackagespecs"
                style="width: 100%"
                placeholder="包装规格"
              />
            </span>
            <span v-else-if="item.label == 'fELabel'">
              <el-input
                v-model="scope.row.fELabel"
                style="width: 100%"
                placeholder="电子标签"
              />
            </span>
            <span v-else-if="item.label == 'fCntrno'">
              <el-input
                v-model="scope.row.fCntrno"
                style="width: 100%"
                placeholder="箱号"
                v-Alphabet
                @change="unRepeat(scope.row.fCntrno, scope.$index)"
              />
            </span>
            <span v-else-if="item.label == 'fTruckno'">
              <el-input
                v-model="scope.row.fTruckno"
                style="width: 100%"
                placeholder="车号"
                v-Alphabet
              />
            </span>
            <span v-else>{{ scope.row[item.label] }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="自定义列显示"
        :visible.sync="showSetting"
        width="700px"
        v-dialogDrag
        :close-on-click-modal="false"
        append-to-body
      >
        <template slot="title">
          <div class="avue-crud__dialog__header">
            <span class="el-dialog__title">
              <span
                style="
                  display: inline-block;
                  width: 3px;
                  height: 20px;
                  margin-right: 5px;
                  float: left;
                  margin-top: 2px;
                "
              ></span>
            </span>
          </div>
        </template>
        <div>配置排序列数据（拖动调整顺序）</div>
        <div style="margin-left: 17px">
          <el-checkbox
            v-model="allCheck"
            label="全选"
            @change="allChecked"
          ></el-checkbox>
        </div>
        <div style="padding: 4px; display: flex; justify-content: center">
          <draggable
            v-model="setRowList"
            group="site"
            animation="300"
            @start="onStart"
            @end="onEnd"
            handle=".indraggable"
          >
            <transition-group>
              <div
                v-for="item in setRowList"
                :key="item.surface"
                class="listStyle"
              >
                <div style="width: 500px" class="indraggable">
                  <div class="progress" :style="{ width: item.width + 'px' }">
                    <el-checkbox
                      :label="item.name"
                      v-model="item.checked"
                      :true-label="0"
                      :false-label="1"
                      >{{ item.name }}
                    </el-checkbox>
                  </div>
                </div>
                <el-input-number
                  v-model.number="item.width"
                  controls-position="right"
                  :min="1"
                  :max="500"
                  size="mini"
                ></el-input-number>
              </div>
            </transition-group>
          </draggable>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showSetting = false">取 消</el-button>
          <el-button @click="delRow" type="danger">重 置</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </span>
      </el-dialog>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="uploadVisible = false">取 消</el-button>
      <el-button type="primary" @click="importData">确 定</el-button>
    </span>
    <el-dialog
      title="选择库位"
      :data="treeselectList"
      :visible.sync="choiceWarehouse"
      width="30%"
      :close-on-click-modal="false"
      append-to-body
    >
      <treeselect
        v-model="treeselectList.fWarehouselocid"
        @select="getAlltree"
        :options="fWarehouseidOptions"
        :show-count="true"
        :disable-branch-nodes="true"
        placeholder="请选择归属库区"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="choiceWarehouse = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { getToken } from "@/utils/auth";
import Cookies from "js-cookie";
import { addSet, select, resetModule } from "@/api/system/set";
import draggable from "vuedraggable";
import Treeselect from "@riophae/vue-treeselect";
import { listGoods } from "@/api/basicdata/goods";
import { treeselect } from "@/api/basicdata/warehouse";
export default {
  name: "inStock",
  props: {
    uploadExcelVisible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    draggable,
    Treeselect,
  },
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      actionUrl:
        process.env.VUE_APP_BASE_API +
        "/warehouseBusiness/inStock/importInstock", // 上传的图片服务器地址
      uploadVisible: false,
      excelList: [],
      drag: false,
      loading:false,
      setRowList: [],
      getRowList: [],
      allCheck: false,
      showSetting: false,
      tableDate: [
        {
          surface: "1",
          label: "fBsdate",
          name: "入库日期",
          checked: 0,
          width: 100,
        },
        {
          surface: "2",
          label: "fGoodsid",
          name: "品名",
          checked: 0,
          width: 100,
        },
        {
          surface: "3",
          label: "fBusinessType",
          name: "货物属性",
          checked: 0,
          width: 100,
        },
        {
          surface: "4",
          label: "fMarks",
          name: "属性详情",
          checked: 0,
          width: 100,
        },
        {
          surface: "5",
          label: "fWarehouseInformation",
          name: "库区",
          checked: 0,
          width: 100,
        },
        {
          surface: "6",
          label: "fQty",
          name: "件数",
          checked: 0,
          width: 100,
        },
        {
          surface: "7",
          label: "fGrossweight",
          name: "毛重(kg)",
          checked: 0,
          width: 100,
        },

        {
          surface: "8",
          label: "fNetweight",
          name: "净重(kg)",
          checked: 0,
          width: 100,
        },
        {
          surface: "9",
          label: "fPackagespecs",
          name: "包装规格",
          checked: 0,
          width: 100,
        },
        {
          surface: "10",
          label: "fELabel",
          name: "电子标签",
          checked: 0,
          width: 100,
        },
        {
          surface: "11",
          label: "fCntrno",
          name: "箱号",
          checked: 0,
          width: 100,
        },
        {
          surface: "12",
          label: "fTruckno",
          name: "车号",
          checked: 0,
          width: 100,
        },
      ],
      goodsOptions: [],
      fStorageTypeOptions: [],
      fWarehouseidOptions: [],
      treeselectList: {
        fWarehouselocid: null,
      },
      choiceWarehouse: false,
      oldList: [],
      form: {},
      selection: [],
    };
  },
  created() {
    this.setRowList = this.tableDate;
    this.getRowList = this.tableDate;
    listGoods({ fStatus: 0, delFlag: 0 }).then((response) => {
      this.goodsOptions = response.rows;
    });
    this.getDicts("storage_type").then((response) => {
      this.fStorageTypeOptions = response.data;
    });
    this.getRow();
  },
  methods: {
    dateSelected(scope,name){
      if (name === 'fBsdate'){
        this.excelList.forEach(item => {
          if (!item.fBsdate) this.$set(item,'fBsdate',scope.row.fBsdate)
        })
      }else if (name === 'fGoodsid'){
        this.excelList.forEach(item => {
          if (!item.fGoodsid) this.$set(item,'fGoodsid',scope.row.fGoodsid)
        })
      }else if (name === 'fBusinessType'){
        this.excelList.forEach(item => {
          if (!item.fBusinessType) this.$set(item,'fBusinessType',scope.row.fBusinessType)
        })
      }else if (name === 'fMarks'){
        this.excelList.forEach(item => {
          if (!item.fMarks) this.$set(item,'fMarks',scope.row.fMarks)
        })
      }
    },
    init(row, list) {
      this.oldList = [];
      this.form = null;
      this.excelList = [];
      this.oldList = list;
      this.form = row;
      treeselect(row.fWarehouseid).then((response) => {
        this.fWarehouseidOptions = response.data;
      });
    },
    progress(event, file, fileList){
      this.loading = true
    },
    handleSucces(res) {
      this.loading = false
      if (res.code) {
        if (res.data.length) {
          res.data.map((e) => {
            e.fBsdate = this.form.fBsdate;
            e.fGoodsid = this.form.fGoodsid;
          });
        }
        this.excelList = res.data;
      }
    },
    //列设置全选
    allChecked() {
      if (this.allCheck == true) {
        this.setRowList.map((e) => {
          return (e.checked = 0);
        });
      } else {
        this.setRowList.map((e) => {
          return (e.checked = 1);
        });
      }
    },
    //查询列数据
    getRow() {
      let that = this;
      this.data = {
        tableName: "上传Excel",
        userId: Cookies.get("userName"),
      };
      select(this.data).then((res) => {
        if (res.data.length != 0) {
          this.getRowList = res.data.filter((e) => e.checked == 0);
          this.setRowList = res.data;
          this.setRowList = this.setRowList.reduce((res, item) => {
            res.push({
              surface: item.surface,
              label: item.label,
              name: item.name,
              checked: item.checked,
              width: item.width,
              fixed: item.fixed,
            });
            return res;
          }, []);
        }
      });
    },
    //重置列表
    delRow() {
      this.data = {
        tableName: "上传Excel",
        userId: Cookies.get("userName"),
      };
      resetModule(this.data).then((res) => {
        if (res.code == 200) {
          this.showSetting = false;
          this.setRowList = this.$options.data().tableDate;
          this.getRowList = this.$options.data().tableDate;
        }
      });
    },
    //保存列设置
    save() {
      this.showSetting = false;
      this.data = {
        tableName: "上传Excel",
        userId: Cookies.get("userName"),
        sysTableSetList: this.setRowList,
      };
      addSet(this.data).then((res) => {
        if (res.code == 200) {
          this.showSetting = false;
          this.getRowList = this.setRowList.filter((e) => e.checked == 0);
        }
      });
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件F
    onEnd() {
      this.drag = false;
    },
    getAlltree(tree) {
      this.information = tree.fWarehouseInformation;
    },
    importData() {
      if (this.excelList.length == 0) {
        return this.$message.error("请上传Excel文件，并完善数据");
      }
      for (let item in this.excelList) {
        if (this.excelList[item].fBsdate == null) {
          return this.$message.error(
            "请选择第" + (Number(item) + 1) + "行的入库日期"
          );
        }
        if (this.excelList[item].fGoodsid == null) {
          return this.$message.error(
            "请选择第" + (Number(item) + 1) + "行的品名"
          );
        }
        if (this.excelList[item].fBusinessType == null) {
          return this.$message.error(
            "请选择第" + (Number(item) + 1) + "行的货物属性"
          );
        }
        if (this.excelList[item].fMarks == null) {
          return this.$message.error(
            "请输入第" + (Number(item) + 1) + "行的属性详情"
          );
        }
        // if (this.excelList[item].fWarehouseInformation == null) {
        //   return this.$message.error(
        //     "请选择第" + (Number(item) + 1) + "行的库区"
        //   );
        // }
        if (this.excelList[item].fQty == null) {
          return this.$message.error(
            "请输入第" + (Number(item) + 1) + "行的件数"
          );
        }
        if (this.excelList[item].fGrossweight == null) {
          return this.$message.error(
            "请输入第" + (Number(item) + 1) + "行的毛重"
          );
        }
        if (this.excelList[item].fNetweight == null) {
          return this.$message.error(
            "请输入第" + (Number(item) + 1) + "行的净重"
          );
        }
        // if (this.excelList[item].fPackagespecs == null) {
        //   return this.$message.error(
        //     "请输入第" + (Number(item) + 1) + "行的包装规格"
        //   );
        // }
        if (this.excelList[item].fCntrno == null) {
          return this.$message.error(
            "请输入第" + (Number(item) + 1) + "行的箱号"
          );
        }
      }
      this.$emit("adddetailList", this.excelList);
      this.uploadVisible = false;
    },
    unRepeat(row, index) {
      this.oldList.map((e) => {
        if (row == e.fCntrno) {
          this.excelList[index].fCntrno = null;
          this.$message.error("该箱号和明细表上的存在重复");
        }
      });
      this.excelList.map((e, i) => {
        if (index != i) {
          if (row && row == e.fCntrno) {
            this.excelList[index].fCntrno = null;
            this.$message.error("该箱号存在重复");
          }
        }
      });
    },
    handleClose() {
      this.$emit("changeShow", false);
    },
    getTreeselect(row) {
      this.treeselectList.fWarehouselocid = row.row.fWarehouselocid
        ? row.row.fWarehouselocid
        : null;
      this.TreeIndex = row.$index;
      this.choiceWarehouse = true;
    },
    confirm() {
      this.$set(
        this.excelList[this.TreeIndex],
        "fWarehouseInformation",
        this.information
      );
      this.$set(
        this.excelList[this.TreeIndex],
        "fWarehouselocid",
        this.treeselectList.fWarehouselocid
      );
      this.choiceWarehouse = false;
    },
    Selectinventory(selection) {
      this.selection = selection;
    },
    bathHandle() {
      this.excelList.map((e) => {
        e.fBusinessType = this.selection[0].fBusinessType
          ? this.selection[0].fBusinessType
          : null;
        e.fMarks = this.selection[0].fMarks ? this.selection[0].fMarks : null;
      });
    },
  },
  watch: {
    uploadExcelVisible() {
      this.uploadVisible = this.uploadExcelVisible;
    },
  },
};
</script>