'基础数据仓库初次提交'

wyg

2024-06-18 1308d4d7a162d3cabd0fe4f639b6d7f5dd376584

 src/views/basicData/location/index.vue

@@ -1,40 +1,783 @@
<template>
  <div class="box">
    <el-card class="box-card1">
  <div v-for="o in 4" :key="o" class="text item">
    {{'列表内容 ' + o }}
  </div>
</el-card>
<el-card class="box-card2">
  <div v-for="o in 4" :key="o" class="text item">
    {{'列表内容 ' + o }}
  </div>
</el-card>
      <div>
       <el-menu
          class="sidebar-el-menu"
          background-color="white"
          text-color="#7a8297"
          active-text-color="#2d8cf0"
        >
          <div v-for="(item, index) in leftListdata" :key="item.werksId">
            <!-- 一级菜单 -->
            <el-menu-item
              :index="index.toString()"
                :class="{ 'is-active': currentIndex === index.toString() }"
              v-if="item.detailList == null"
              @click="handleClick(item, index.toString())"
            >
              <span slot="title">{{ item.werksName }}</span>
            </el-menu-item>
            <!-- 二级菜单 -->
            <el-submenu
              :index="index.toString()"
              v-else
            >
              <template #title>
                <span>{{ item.werksName }}</span>
              </template>
              <el-menu-item-group :class="{ 'is-active': currentIndex === index.toString() }">
                <el-menu-item
                  v-for="(it, subIndex) in item.detailList"
                  :key="it.warehouseId"
                  :index="`${index}-${subIndex}`"
                  :class="{ 'is-active': currentIndex === `${index}-${subIndex}` }"
                  @click="handleClick(it, `${index}-${subIndex}`)"
                >
                  {{ it.warehouseName }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </div>
        </el-menu>
      </div>
    </el-card>
    <!-- 右侧 -->
    <el-card class="box-card2">
      <div class="box1">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="仓库" prop="lgort">
            <el-input
              v-model="queryParams.lgort"
              placeholder="请输入仓库"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="名称" prop="locationName">
            <el-input
              v-model="queryParams.locationName"
              placeholder="请输入名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-input
              v-model="queryParams.state"
              placeholder="请输入状态"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:location:add']"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['system:location:edit']"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:location:remove']"
              >删除</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['system:location:export']"
              >导出</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>

        <el-table
          v-loading="loading"
          border
          :data="locationList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="序号" type="index" fixed width="50" />
          <!-- <el-table-column label="库位ID" align="center" prop="locationId" v-if="true"/> -->
          <el-table-column
            label="隶属库位ID"
            align="center"
            prop="parentLocationId"
          />
          <el-table-column label="仓库" align="center" prop="lgort" />
          <el-table-column label="库位序号" align="center" prop="locationNo" />
          <el-table-column label="名称" align="center" prop="locationName" />
          <el-table-column label="工厂" align="center" prop="werks" />
          <el-table-column label="类型" align="center" prop="type" />
          <el-table-column
            label="体积限制"
            align="center"
            prop="volumeRestriction"
          />
          <el-table-column label="重量限制" align="center" prop="weightLimit" />
          <el-table-column
            label="箱数限制"
            align="center"
            prop="containerNumberLimit"
          />
          <el-table-column
            label="数量限制"
            align="center"
            prop="quantitativeRestrictions"
          />
          <el-table-column label="托盘限制" align="center" prop="trayLimit" />
          <el-table-column label="长度" align="center" prop="length" />
          <el-table-column label="宽" align="center" prop="width" />
          <el-table-column label="高" align="center" prop="height" />
          <el-table-column label="坐标X" align="center" prop="coordinateX" />
          <el-table-column label="坐标Y" align="center" prop="coordinateY" />
          <el-table-column label="坐标Z" align="center" prop="coordinateZ" />
          <el-table-column label="像素X" align="center" prop="pixelX" />
          <el-table-column label="像素Y" align="center" prop="pixelY" />
          <el-table-column label="空间层数" align="center" prop="paceLayer" />
          <el-table-column
            label="1-允许"
            align="center"
            prop="allowMixedProduct"
          />
          <el-table-column
            label="1-允许"
            align="center"
            prop="allowMixedProductLot"
          />
          <el-table-column label="层级" align="center" prop="layer" />
          <el-table-column label="1-存在" align="center" prop="hasChild" />
          <el-table-column label="路径" align="center" prop="path" />
          <el-table-column label="描述" align="center" prop="description" />
          <!-- <el-table-column label="状态" align="center" prop="state" /> -->
          <el-table-column
            label="最后更新人id"
            align="center"
            prop="lastUpdatedUserId"
          />
          <el-table-column
            label="最后更新人姓名"
            align="center"
            prop="lastUpdatedUserName"
          />
          <el-table-column
            label="最后更新时间"
            align="center"
            prop="lastUpdatedDateTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{
                parseTime(scope.row.lastUpdatedDateTime, "{y}-{m}-{d}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:location:edit']"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:location:remove']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>

    <!-- 添加或修改库位对话框 -->
    <el-dialog
      :title="title"
      v-if="open"
      :visible.sync="open"
      width="500px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <!-- <el-form-item label="隶属库位ID" prop="parentLocationId">
          <el-input v-model="form.parentLocationId" placeholder="请输入隶属库位ID" />
        </el-form-item> -->
        <el-form-item label="仓库" prop="lgort">
          <el-input v-model="form.lgort" placeholder="请输入仓库" />
        </el-form-item>
        <el-form-item label="库位序号" prop="locationNo">
          <el-input v-model="form.locationNo" placeholder="请输入库位序号" />
        </el-form-item>
        <el-form-item label="名称" prop="locationName">
          <el-input v-model="form.locationName" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="工厂" prop="werks">
          <!-- <el-input v-model="form.werks" placeholder="请输入工厂" /> -->
          <el-select
            v-model="form.werks"
            placeholder="请选择工厂"
            style="width: 100%"
          >
            <el-option
              v-for="dict in werksList"
              :key="dict.werks"
              :label="dict.werksName"
              :value="dict.werks"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="体积限制" prop="volumeRestriction">
          <el-input
            v-model.number="form.volumeRestriction"
            placeholder="请输入体积限制"
          />
        </el-form-item>
        <el-form-item label="重量限制" prop="weightLimit">
          <el-input
            v-model.number="form.weightLimit"
            placeholder="请输入重量限制"
          />
        </el-form-item>
        <el-form-item label="箱数限制" prop="containerNumberLimit">
          <el-input
            v-model.number="form.containerNumberLimit"
            placeholder="请输入箱数限制"
          />
        </el-form-item>
        <el-form-item label="数量限制" prop="quantitativeRestrictions">
          <el-input
            v-model.number="form.quantitativeRestrictions"
            placeholder="请输入数量限制"
          />
        </el-form-item>
        <el-form-item label="托盘限制" prop="trayLimit">
          <el-input v-model="form.trayLimit" placeholder="请输入托盘限制" />
        </el-form-item>
        <el-form-item label="长度" prop="length">
          <el-input v-model.number="form.length" placeholder="请输入长度" />
        </el-form-item>
        <el-form-item label="宽" prop="width">
          <el-input v-model.number="form.width" placeholder="请输入宽" />
        </el-form-item>
        <el-form-item label="高" prop="height">
          <el-input v-model.number="form.height" placeholder="请输入高" />
        </el-form-item>
        <el-form-item label="坐标X" prop="coordinateX">
          <el-input v-model="form.coordinateX" placeholder="请输入坐标X" />
        </el-form-item>
        <el-form-item label="坐标Y" prop="coordinateY">
          <el-input v-model="form.coordinateY" placeholder="请输入坐标Y" />
        </el-form-item>
        <el-form-item label="坐标Z" prop="coordinateZ">
          <el-input v-model="form.coordinateZ" placeholder="请输入坐标Z" />
        </el-form-item>
        <el-form-item label="像素X" prop="pixelX">
          <el-input v-model="form.pixelX" placeholder="请输入像素X" />
        </el-form-item>
        <el-form-item label="像素Y" prop="pixelY">
          <el-input v-model="form.pixelY" placeholder="请输入像素Y" />
        </el-form-item>
        <el-form-item label="空间层数" prop="paceLayer">
          <el-input v-model="form.paceLayer" placeholder="请输入空间层数" />
        </el-form-item>
        <el-form-item label="是否允许" prop="allowMixedProduct">
          <el-input
            v-model="form.allowMixedProduct"
            placeholder="请输入1-允许"
          />
        </el-form-item>
        <el-form-item label="是否允许" prop="allowMixedProductLot">
          <el-input
            v-model="form.allowMixedProductLot"
            placeholder="请输入1-允许"
          />
        </el-form-item>
        <el-form-item label="层级" prop="layer">
          <el-input v-model="form.layer" placeholder="请输入层级" />
        </el-form-item>
        <el-form-item label="是否存在" prop="hasChild">
          <el-input v-model="form.hasChild" placeholder="请输入1-存在" />
        </el-form-item>
        <el-form-item label="路径" prop="path">
          <el-input v-model="form.path" placeholder="请输入路径" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" placeholder="请输入描述" />
        </el-form-item>
        <!-- <el-form-item label="状态" prop="state">
          <el-input v-model="form.state" placeholder="请输入状态" />
        </el-form-item> -->
        <!-- <el-form-item label="最后更新人id" prop="lastUpdatedUserId">
          <el-input v-model="form.lastUpdatedUserId" placeholder="请输入最后更新人id" />
        </el-form-item>
        <el-form-item label="最后更新人姓名" prop="lastUpdatedUserName">
          <el-input v-model="form.lastUpdatedUserName" placeholder="请输入最后更新人姓名" />
        </el-form-item>
        <el-form-item label="最后更新时间" prop="lastUpdatedDateTime">
          <el-date-picker clearable
            v-model="form.lastUpdatedDateTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择最后更新时间">
          </el-date-picker>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
import {
  listLocation,
  getLocation,
  delLocation,
  addLocation,
  updateLocation,
  listWaresList,
  listwerkshouse,
} from "@/api/basicData/location";

}
export default {
  name: "Location",
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 库位表格数据
      locationList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        lgort: undefined,
        locationName: undefined,
        warehouseName:undefined,
        werks:undefined,
        lgort:undefined,
        type: undefined,
        state: undefined,
      },
      // 表单参数
      form: {},
      werksList: [],
      leftListdata: [],
      currentIndex: null,
      defaultProps: {
        children: "detailList",
        label: "werksName",
      },
      // 表单校验
      rules: {
        // locationId: [
        //   { required: true, message: "库位ID不能为空", trigger: "blur" }
        // ],
        parentLocationId: [
          { required: true, message: "隶属库位ID不能为空", trigger: "blur" },
        ],
        lgort: [{ required: true, message: "仓库不能为空", trigger: "blur" }],
        locationNo: [
          { required: true, message: "库位序号不能为空", trigger: "blur" },
        ],
        locationName: [
          { required: true, message: "名称不能为空", trigger: "blur" },
        ],
        werks: [{ required: true, message: "工厂不能为空", trigger: "blur" }],
        type: [{ required: true, message: "类型不能为空", trigger: "change" }],
        volumeRestriction: [
          { required: true, message: "体积限制不能为空", trigger: "blur" },
        ],
        weightLimit: [
          { required: true, message: "重量限制不能为空", trigger: "blur" },
        ],
        containerNumberLimit: [
          { required: true, message: "箱数限制不能为空", trigger: "blur" },
        ],
        quantitativeRestrictions: [
          { required: true, message: "数量限制不能为空", trigger: "blur" },
        ],
        trayLimit: [
          { required: true, message: "托盘限制不能为空", trigger: "blur" },
        ],
        length: [{ required: true, message: "长度不能为空", trigger: "blur" }],
        width: [{ required: true, message: "宽不能为空", trigger: "blur" }],
        height: [{ required: true, message: "高不能为空", trigger: "blur" }],
        coordinateX: [
          { required: true, message: "坐标X不能为空", trigger: "blur" },
        ],
        coordinateY: [
          { required: true, message: "坐标Y不能为空", trigger: "blur" },
        ],
        coordinateZ: [
          { required: true, message: "坐标Z不能为空", trigger: "blur" },
        ],
        pixelX: [{ required: true, message: "像素X不能为空", trigger: "blur" }],
        pixelY: [{ required: true, message: "像素Y不能为空", trigger: "blur" }],
        paceLayer: [
          { required: true, message: "空间层数不能为空", trigger: "blur" },
        ],
        allowMixedProduct: [
          { required: true, message: "1-允许不能为空", trigger: "blur" },
        ],
        allowMixedProductLot: [
          { required: true, message: "1-允许不能为空", trigger: "blur" },
        ],
        layer: [{ required: true, message: "层级不能为空", trigger: "blur" }],
        hasChild: [
          { required: true, message: "1-存在不能为空", trigger: "blur" },
        ],
        path: [{ required: true, message: "路径不能为空", trigger: "blur" }],
        description: [
          { required: true, message: "描述不能为空", trigger: "blur" },
        ],
        // state: [{ required: true, message: "状态不能为空", trigger: "blur" }],
        displayOrder: [
          { required: true, message: "排序不能为空", trigger: "blur" },
        ],
        createdUserId: [
          { required: true, message: "创建人id不能为空", trigger: "blur" },
        ],
        createdUserName: [
          { required: true, message: "创建人姓名不能为空", trigger: "blur" },
        ],
        createdDateTime: [
          { required: true, message: "创建日期时间不能为空", trigger: "blur" },
        ],
        lastUpdatedUserId: [
          { required: true, message: "最后更新人id不能为空", trigger: "blur" },
        ],
        lastUpdatedUserName: [
          {
            required: true,
            message: "最后更新人姓名不能为空",
            trigger: "blur",
          },
        ],
        lastUpdatedDateTime: [
          { required: true, message: "最后更新时间不能为空", trigger: "blur" },
        ],
        isDeleted: [
          { required: true, message: "是否删除不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.leftList();
  },
  methods: {
    /** 查询库位列表 */
    getList() {
      this.loading = true;
      listLocation(this.queryParams).then((response) => {
        this.locationList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    leftList() {
      listWaresList().then((res) => {
        console.log(res, "左侧数据信息");
        this.leftListdata = res.data;
      });

      listwerkshouse({
        pageNum: 1,
        pageSize: 99,
      }).then((res) => {
        console.log(res, "工厂");
        this.werksList = res.rows;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        locationId: undefined,
        parentLocationId: undefined,
        lgort: undefined,
        locationNo: undefined,
        locationName: undefined,
        werks: undefined,
        type: undefined,
        volumeRestriction: undefined,
        weightLimit: undefined,
        containerNumberLimit: undefined,
        quantitativeRestrictions: undefined,
        trayLimit: undefined,
        length: undefined,
        width: undefined,
        height: undefined,
        coordinateX: undefined,
        coordinateY: undefined,
        coordinateZ: undefined,
        pixelX: undefined,
        pixelY: undefined,
        paceLayer: undefined,
        allowMixedProduct: undefined,
        allowMixedProductLot: undefined,
        layer: undefined,
        hasChild: undefined,
        path: undefined,
        description: undefined,
        state: undefined,
        displayOrder: undefined,
        createdUserId: undefined,
        createdUserName: undefined,
        createdDateTime: undefined,
        lastUpdatedUserId: undefined,
        lastUpdatedUserName: undefined,
        lastUpdatedDateTime: undefined,
        isDeleted: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.locationId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加库位";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.reset();
      const locationId = row.locationId || this.ids;
      getLocation(locationId).then((response) => {
        this.loading = false;
        this.form = response.data;
        this.open = true;
        this.title = "修改库位";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.locationId != null) {
            updateLocation(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            addLocation(this.form)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const locationIds = row.locationId || this.ids;
      this.$modal
        .confirm('是否确认删除库位编号为"' + locationIds + '"的数据项？')
        .then(() => {
          this.loading = true;
          return delLocation(locationIds);
        })
        .then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false;
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/location/export",
        {
          ...this.queryParams,
        },
        `location_${new Date().getTime()}.xlsx`
      );
    },
      handleClick(item, index) {
      this.currentIndex = index;
      if (item.lgort) {
         this.queryParams.lgort = item.lgort;
         this.getList();
      }else{
           this.queryParams.werks = item.werks;
      this.getList();
      }
      console.log(item); // 处理点击事件，可以在这里获取到当前点击行的信息
    },
  },
};
</script>


<style scoped>
.box{
.box {
  width: 100%;
  height: calc(100vh - 124px);
  display: flex;
  padding: 20px;
  padding: 20px 10px 0;
  background-color: #f0f0f0;
}
.box-card1{
.box-card1 {
  width: 20%;
  height: 100%;
  background-color: #4b0f0f;
  background-color: #fff;
  margin-right: 10px;
}
.box-card2{
.box-card2 {
  width: 80%;
  height: 100%;
  background-color: #58c8eb;
  background-color: #fff;
}
.box1 {
  width: 100%;
  height: 100%;
}

.is-active {
  background-color: #2d8cf0 !important; /* 高亮颜色 */
}

::v-deep .el-menu-item {
  border: none !important; /* 使用 !important 来确保覆盖默认样式 */
}

/* 如果边框是由 submenu 引起的，可以这样写 */
::v-deep .el-submenu .el-submenu__title {
  border: none !important;
}

::v-deep .box-card1 > .el-card__body{
  padding: 20px 0 10px 10px  !important;
}
</style>