smartpark_durable_front/src/views/secondOrder/components/outDialog.vue

<template>
  <div>
    <el-dialog :close-on-click-modal="false" :title="outDialogTiltle" :visible.sync="outDialogVisible"
      :append-to-body="true" @close="handleCloseDetail" fullscreen>
      <div class="dialog-content">
        <!-- 基本信息 -->
        <el-form :model="sizeForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"
          :rules="dynamicRules">
          <div class="form-title">基本信息</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出库申请时间">
                <el-date-picker v-model="sizeForm.ldTwoOutStorage.outDate" type="date" placeholder="选择日期"
                  style="width: 100%" disabled>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="事由" prop="ldTwoOutStorage.reason">
                <el-input v-model="sizeForm.ldTwoOutStorage.reason" :disabled="outDialogType != 'add'"
                  placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物资类型" prop="ldTwoOutStorage.materialType">
                <el-select v-model="sizeForm.ldTwoOutStorage.materialType" placeholder="请选择" style="width: 100%"
                  :disabled="outDialogType != 'add'">
                  <el-option label="办公室物资" value="1"></el-option>
                  <el-option label="其他物资" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门" prop="ldTwoOutStorage.departmentInfo">
                <el-select v-model="sizeForm.ldTwoOutStorage.departmentInfo" placeholder="请选择" style="width: 100%"
                  :disabled="outDialogType != 'add'" @change="deptChange" clearable filterable value-key="departmentId">
                  <el-option v-for="item in departmentOptions" :key="item.departmentId" :label="item.department"
                    :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="领用人" prop="ldTwoOutStorage.proposerInfo">
                <el-select v-model="sizeForm.ldTwoOutStorage.proposerInfo" placeholder="请选择" style="width: 100%"
                  :disabled="sizeForm.departmentId == '' || outDialogType == 'details'
                    " clearable filterable value-key="userId" @change="proposerChange">
                  <el-option v-for="item in userOptions" :key="item.userId" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="outDialogType == 'details'">
              <el-form-item label="填报人">
                <el-input v-model="sizeForm.ldTwoOutStorage.shipperName" :disabled="outDialogType != 'add'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="form-title">{{ outDateInfo }} 出库信息：</div>
          <!-- <el-button
            type="primary"
            size="mini"
            style="margin-bottom: 18px"
            @click="inTableAdd()"
            v-if="outDialogType != 'details'"
            >新增</el-button
          > -->
          <el-button type="primary" size="mini" style="margin-bottom: 18px" @click="categoryHandle"
            v-if="outDialogType != 'details'">新增</el-button>
          <el-table :data="sizeForm.ldTwoOutStorageDetailList" border style="width: 100%">
            <el-table-column prop="materialCode" label="物资编码">
            </el-table-column>
            <!-- <el-table-column prop="str2" label="物资名称">
              <template slot-scope="scope">
                <el-select v-model="scope.row.materialitem" placeholder="请选择物资名称" style="width: 100%" @change="
                  handleMaterialChange(scope.row.materialitem, scope.$index)
                  " v-if="outDialogType != 'details'" value-key="id">
                  <el-option v-for="item in materials" :key="item.materialId" :label="item.materialName" :value="item">
                  </el-option>
                </el-select>
                <span v-else> {{ scope.row.materialName }}</span>
              </template>
</el-table-column> -->
            <el-table-column prop="materialName" label="物资名称"></el-table-column>
            <el-table-column prop="model" label="规格/型号"> </el-table-column>
            <!-- <el-table-column prop="type" label="类别"> </el-table-column> -->
            <el-table-column prop="type" label="类别">
              <template slot-scope="scope">
                {{ scope.row.type === "NY" ? "耐用品" : (scope.row.type === "YH" ? "易耗品" : "") }}
              </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位"> </el-table-column>
            <el-table-column prop="num" label="数量">
              <template slot-scope="scope">
                <el-input-number size="mini" v-model="scope.row.num" :min="1" style="width: 100%"
                  :disabled="outDialogType != 'add' || scope.row.type === 'NY'"
                  @change="(newValue) => handleQuantityChange(newValue, scope.$index)"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="操作" style="text-align: center;" v-if="outDialogType != 'details'">
              <template slot-scope="scope">
                <div style="text-align: center;" :disabled="outDialogType == 'details'">
                  <el-button type="text" size="mini" @click="handleDelete(scope.$index, scope.row)">
                    删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="form-title" v-if="outDialogType != 'details'">
            出库账目表格：
          </div>
          <el-table :data="sizeForm.inAccountsTableData" border style="width: 100%" v-if="outDialogType != 'details'">
            <el-table-column prop="date" label="当前库存">
              <el-table-column prop="materialCode" label="编码">
              </el-table-column>
              <el-table-column prop="materialName" label="名称">
              </el-table-column>
              <el-table-column prop="model" label="规格"> </el-table-column>
              <el-table-column prop="type" label="类别"> </el-table-column>
              <el-table-column prop="unit" label="单位"> </el-table-column>
              <el-table-column prop="oldNum" label="数量"> </el-table-column>
            </el-table-column>
            <el-table-column prop="date" label="出库信息">
              <el-table-column prop="num" label="数量"> </el-table-column>
            </el-table-column>
            <el-table-column prop="date" label="出库后库存">
              <el-table-column prop="newNum" label="数量"> </el-table-column>
            </el-table-column>
          </el-table>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseDetail()">取 消</el-button>
        <el-button v-if="outDialogType != 'details'" type="primary" @click="sumbit()">确 定</el-button>
      </span>
    </el-dialog>
    <categoryDialog v-if="categoryVisible" :categoryVisible='categoryVisible' :selectionData="selectionData"
      :departmentId="sizeForm.ldTwoOutStorage.departmentId" :categoryDialogTitle="categoryDialogTitle"
      @confirm="confirm" @handleCloseDetail="handleCloseDetail"></categoryDialog>
  </div>
</template>
<script>
import { getDetailedItems } from "@/api/firstOrder/outbound";
import categoryDialog from './categoryDialog.vue'
import {
  getUserList,
  getMaterialList,
  submit,
  getDetails,
} from "@/api/secondOrder/outbound";
export default {
  components: {
    categoryDialog
  },
  props: {
    repairVisible: {
      type: Boolean,
      default: false,
    },
    outDialogTiltle: {
      type: String,
      default: "",
    },
    outDialogType: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    rowData: {
      type: Object,
      default: {},
    },
  },
  computed: {
    outDateInfo() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      return `${year}年${month}月${day}日`;
    },
  },
  watch: {
    outDialogType: {
      immediate: true,
      handler(newVal) {
        if (newVal === "details") {
          this.dynamicRules = {}; // 清空校验规则
        } else {
          this.dynamicRules = this.rules; // 恢复校验规则
        }
      },
    },
  },
  data() {
    return {
      outDialogVisible: false,
      categoryVisible: false,
      categoryDialogTitle: '出库',
      allSelectedList:[],
      selectionData:[],
      sizeForm: {
        ldTwoOutStorage: {
          outDate: "",
          reason: "",
          materialType: "",
          departmentId: "",
          department: "",
          proposerId: "",
          proposerName: "",
          submitName: "", //填报人
          departmentInfo: null,
          proposerInfo: null,
          optionType: 'YH'
        },
        ldTwoOutStorageDetailList: [], //出库单详情
        inAccountsTableData: [], //库存汇总
        userInfoVO: {
          //登录用户的信息
          userId: "user001",
          name: "张三2",
          mainErDepartment: "20",
          mainErDepartmentName: "实业公司",
        },
      },
      rules: {
        ldTwoOutStorage: {
          reason: [
            {
              required: true,
              message: "请填写",
              trigger: "blur",
            },
          ],
          materialType: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          departmentInfo: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
          proposerInfo: [
            {
              required: true,
              message: "请选择",
              trigger: "change",
            },
          ],
        },
      },
      inBatchDialogVisible: false, //选择采购单的数据
      batchType: "", //批量选择类型
      materials: [], //物资列表
      userOptions: [], //领用人列表
      departmentOptions: [], //部门列表
      dynamicRules: {}, // 动态校验规则
    };
  },
  mounted() {
    this.outDialogVisible = this.repairVisible;
    if (this.outDialogType == "add") {
      this.addInit();
    } else {
      this.inInit();
    }

    this.getDetailedItems();
  },
  methods: {
    categoryHandle() {
      this.categoryVisible = true
    },
    confirm(allSelectedList) {
      console.log('allSelectedList-------',allSelectedList)
      // this.selectionData = allSelectedList
      allSelectedList.map(item =>{
        this.selectionData.push(item)
      })
      this.categoryVisible = false;
      // 去重：过滤已存在的物资
      const newItems = allSelectedList.filter(newItem =>
        !this.sizeForm.ldTwoOutStorageDetailList.some(
          oldItem => oldItem.id === newItem.id
        )
      );
      // 追加数据
      this.sizeForm.ldTwoOutStorageDetailList = [
        ...this.sizeForm.ldTwoOutStorageDetailList,
        ...newItems
      ];
      console.log('ldTwoOutStorageDetailList--------',this.sizeForm.ldTwoOutStorageDetailList)
      // 同步库存汇总表
      this.summaryTableData();
    },
    categoryHandle() {
      this.categoryVisible = true;
   
    },
    // 删除表格行数据
    handleDelete(index, row) {
      this.sizeForm.ldTwoOutStorageDetailList.splice(index, 1)
    },
    // 初始化  汇总库存 inAccountsTableData
    summaryTableData() {
      this.sizeForm.inAccountsTableData = JSON.parse(JSON.stringify(this.sizeForm.ldTwoOutStorageDetailList))
    },
    // handleQuantityChange(newValue, index) {
    //   const currentRow = this.sizeForm.ldTwoOutStorageDetailList[index];
    //   console.log(currentRow,'c')
    //   if (currentRow.materialCode != '') {
    //     currentRow.oldNum = currentRow.materialitem.num
    //     currentRow.num = currentRow.num
    //     currentRow.newNum = currentRow.materialitem.num - currentRow.num
    //   }
    //   this.$set(this.sizeForm.inAccountsTableData, index, currentRow)
    //   this.sizeForm.inAccountsTableData[index] = currentRow
    // },
    handleQuantityChange(newValue, index) {
      const currentRow = this.sizeForm.ldTwoOutStorageDetailList[index];
      if (!currentRow) return;
      if (currentRow.type === "NY") {
        currentRow.num = 1;
        this.$set(this.sizeForm.ldTwoOutStorageDetailList, index, currentRow);
        this.$set(this.sizeForm.inAccountsTableData, index, { ...currentRow });
        return;
      }
      const stockNum = currentRow.num // 原始库存数量
      currentRow.oldNum = stockNum // 出库前库存
      currentRow.num = newValue // 出库数量
      currentRow.newNum = stockNum - newValue // 出库后库存
      this.$set(this.sizeForm.ldTwoOutStorageDetailList, index, currentRow)
      this.$set(this.sizeForm.inAccountsTableData, index, { ...currentRow })
    },

    // 更新全局总计
    updateGlobalTotal() {
      let totalAmount = 0;
    },
    //获取单条选择的物资名称列表
    async getMaterialList(value) {
      getMaterialList({ departmentId: value }).then((res) => {
        this.materials = res.data.result;
      });
    },
    // 选中物资获取数据
    handleMaterialChange(row, index) {
      this.sizeForm.ldTwoOutStorageDetailList[index].materialId =
        row.materialId;
      this.sizeForm.ldTwoOutStorageDetailList[index].model = row.model;
      this.sizeForm.ldTwoOutStorageDetailList[index].materialCode =
        row.materialCode;
      this.sizeForm.ldTwoOutStorageDetailList[index].materialName =
        row.materialName;
      this.sizeForm.ldTwoOutStorageDetailList[index].type = row.type;
      this.sizeForm.ldTwoOutStorageDetailList[index].unit = row.unit;


    },
    // 获取领用人列表
    getUserList(value) {
      getUserList({ departmentId: value }).then((res) => {
        this.userOptions = res.data.result;
        if (this.outDialogType != "add") {
          let userArr = this.userOptions.filter(
            (item) => item.userId == this.sizeForm.ldTwoOutStorage.proposerId
          );
          this.sizeForm.ldTwoOutStorage.proposerInfo =
            userArr.length > 0 ? userArr[0] : {};
        }
      });
    },
    // 获取部门列表
    getDetailedItems() {
      getDetailedItems().then((res) => {
        this.departmentOptions = res.data.result;
      });
    },
    // 选中部门之后 获取领用人列表
    deptChange(value) {
      this.sizeForm.ldTwoOutStorage.proposerInfo = null;
      this.sizeForm.ldTwoOutStorage.departmentId = value.departmentId;
      this.sizeForm.ldTwoOutStorage.department = value.department;
      this.getUserList(value.departmentId);
      this.getMaterialList(value.departmentId);
      this.sizeForm.ldTwoOutStorageDetailList = []
    },
    // 领用人选中
    proposerChange(value) {
      console.log("领用人", value);
      this.sizeForm.ldTwoOutStorage.proposerId = value.userId;
      this.sizeForm.ldTwoOutStorage.proposerName = value.name;
    },
    handleCloseDetail() {
      this.outDialogVisible = false;
      this.categoryVisible = false
      this.$emit("handleCloseDetail");
    },
    inInit() {
      if (this.outDialogType != "add") {
        getDetails({ twoOutStorageId: this.rowData.id }).then((res) => {
          this.sizeForm = res.data.result;
          this.getUserList(this.sizeForm.ldTwoOutStorage.departmentId);

          let departmentArr = this.departmentOptions.filter(
            (item) =>
              item.departmentId == this.sizeForm.ldTwoOutStorage.departmentId
          );

          this.sizeForm.ldTwoOutStorage.departmentInfo =
            departmentArr.length > 0 ? departmentArr[0] : {};

          // this.sizeForm.ldTwoOutStorage.proposerInfo={}
        });
      }
    },

    addInit() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      this.sizeForm.ldTwoOutStorage.outDate = `${year}-${month}-${day} 00:00:00`; //入库时间
    },
    // 添加入库数据 ,点击新增
    inTableAdd() {
      this.sizeForm.ldTwoOutStorageDetailList.push({});
      this.summaryTableData()
    },
    // 提交
    sumbit() {
      console.log("form", this.sizeForm);
      this.$refs.dynamicValidateForm.validate((valid) => {
        if (valid) {
          submit(this.sizeForm).then((res) => {
            this.$message({
              type: "success",
              message: "提交成功",
            });
            this.handleCloseDetail();
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.form-title {
  margin: 20px 0;
}

::v-deep.el-dialog__footer {
  position: fixed !important;
  bottom: 0 !important;
  right: 0 !important;
}

::v-deep.dialog-content {
  max-height: calc(100vh - 200px);
  /* 减去标题栏和底部按钮的高度 */
  overflow-y: auto;
  padding-right: 10px;
  /* 预留滚动条空间 */
}
</style>