采购单，采购明细，库存管理，出入库，调拨管理，库存盘点

haoyahui

2023-11-11 332c012e7336f2996c4fe5c8c110d00713c1bde2

采购单，采购明细，库存管理，出入库，调拨管理，库存盘点

 admin-web/src/api/stock/procure/purchaseOrder.js

@@ -64,18 +64,18 @@
    params,
  });
}
export function procureDel(data) {
export function procureDel(params) {
  return request({
    url: '/pc/whForm/procure/del',
    method: 'delete',
    data,
    params,
  });
}
// 入库
export function procureIncome(data) {
export function procureIncome(params) {
  return request({
    url: '/pc/whForm/procure/income',
    method: 'post',
    data,
    params,
  });
}

 admin-web/src/views/foundation/classification/edit.vue

@@ -1,7 +1,7 @@
<template>
  <win-sm :title="setting.title" @close="close" :width="'800px'">
    <el-form ref="ruleForm" :model="formData" :rules="rules" class="demo-ruleForm" label-width="100px">
      <el-form-item label="上级分类" prop="fatherCategoryName" :key="key">
      <el-form-item v-if="setting.pid" label="上级分类" prop="fatherCategoryName" :key="key">
        <el-input
          v-model="formData.fatherCategoryName"
          clearable
@@ -100,6 +100,7 @@
    getEditInfo(id) {},
    // 分类名称获取
    getCategoryName() {
      if(!this.formData.fatherCategoryId) return
      getCategoryDetail({ id: this.formData.fatherCategoryId }).then((res) => {
        this.formData.fatherCategoryName = res.categoryName;
        this.key = Math.random();

 admin-web/src/views/foundation/classification/index.vue

@@ -17,7 +17,12 @@
            </el-col>
          </el-row>
          <!--添加/编辑弹窗-->
          <edit v-if="editSetting.show" :setting="editSetting" @close="editSetting.show = false" @search="refreshData" />
          <edit
            v-if="editSetting.show"
            :setting="editSetting"
            @close="editSetting.show = false"
            @search="refreshData"
          />
        </el-card>
      </el-container>
    </el-container>
@@ -40,8 +45,8 @@
import { getTree } from '@/api/foudation/classification';
import myImport from '@/views/components/myImport';
import { getBaseUrl } from '@/utils/base';
import {getType} from '@/api/system/dict/type'
import {getDicts} from '@/api/system/dict/data'
import { getType } from '@/api/system/dict/type';
import { getDicts } from '@/api/system/dict/data';

export default {
  name: 'index',
@@ -178,13 +183,13 @@
    // 获取机构树
    this.initTreeData();
    // 类别字典
    getDicts('GOODS_PRICE').then(res=>{
      this.items[1].options = res.map(v=>{
        v.label=v.dict_label
        v.value=v.dict_value
        return v
      })
    })
    getDicts('GOODS_PRICE').then((res) => {
      this.items[1].options = res.map((v) => {
        v.label = v.dict_label;
        v.value = v.dict_value;
        return v;
      });
    });
  },
  methods: {
    //导入
@@ -241,15 +246,17 @@
        .catch(() => {});
    },
    showAdd() {
      if (!this.editSetting.orgId) {
        this.$message.warning('请先选择左侧机构')
      } else {
      this.editSetting.pid = this.p.id;
      // if (!this.editSetting.orgId) {
      //   this.$message.warning('请先选择左侧机构')
      // } else {
      if (this.p && this.p) {
        this.editSetting.pid = this.p.id;
      }
      this.editSetting.id = null;
      this.editSetting.info = null;
      this.editSetting.title = '新增';
      this.editSetting.show = true;
      }
      // }
    },
    showAudit(row) {
      this.editSetting.id = row.id;
@@ -280,14 +287,14 @@
    // 查询table列表
    search(pageNum) {
      if (pageNum != undefined) {
        this.$refs.myTable.search({pageNum});
        this.$refs.myTable.search({ pageNum });
      } else {
        this.$refs.myTable.search();
      }
    },
    refreshData() {
      this.initTreeData()
      this.search()
      this.initTreeData();
      this.search();
    },
    fifterForm(params) {
      this.filterFrom = Object.assign(this.filterFrom, params);

 admin-web/src/views/foundation/material/edit.vue

@@ -59,7 +59,7 @@
        radio1: '',
        code: '',
        name: '',
        states: '',
        states: 1,
        summary: '',
        categoryId: null,
        models:[

 admin-web/src/views/foundation/store/edit.vue

@@ -1,19 +1,27 @@
<template>
  <win-sm :title="setting.title" @close="close" :width="'800px'">
    <el-form ref="ruleForm" :model="formData" :rules="rules" class="demo-ruleForm" label-width="100px">
      <el-form-item label="编号" prop="code">
        <el-input disabled v-model="formData.code" clearable maxlength="20" show-word-limit style="width: 100%"/>
      <el-form-item label="编号" prop="warehouseCode">
        <el-input disabled v-model="formData.warehouseCode" clearable maxlength="20" show-word-limit style="width: 100%" />
      </el-form-item>
      <el-form-item label="仓库名称" prop="warehouseName">
        <el-input v-model="formData.warehouseName" clearable maxlength="20" show-word-limit style="width: 100%"/>
        <el-input v-model="formData.warehouseName" clearable maxlength="20" show-word-limit style="width: 100%" />
      </el-form-item>
      <el-form-item label="仓库类型" prop="classificationCode">
        <el-select v-model="formData.classificationCode" clearable placeholder="请选择"  style="width: 100%">
          <el-option v-for="item in classList" :key="item.dict_code" :label="item.dict_label" :value="item.dict_code"></el-option>
        <el-select v-model="formData.classificationCode" clearable placeholder="请选择" style="width: 100%">
          <el-option
            v-for="item in classList"
            :key="item.dict_code"
            :label="item.dict_label"
            :value="item.dict_code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地址" >
        <el-input v-model="formData.adress" clearable maxlength="20" show-word-limit style="width: 100%"/>
      <el-form-item label="所属机构" prop="agencyIds">
          <el-cascader v-model="formData.agencyIds" :options="treeList" :props="{checkStrictly: true,value:'id'}" @change="handleChange" style="width: 100%"></el-cascader>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="formData.adress" clearable maxlength="20" show-word-limit style="width: 100%" />
      </el-form-item>
      <el-form-item label="状态" prop="states">
        <el-radio-group v-model="formData.states">
@@ -23,100 +31,145 @@
      </el-form-item>
    </el-form>
    <div slot="footer" align="center" class="dialog-footer">
      <my-button name="取消" site="form" @click="close"/>
      <my-button name="保存" site="form" @click="save"/>
      <my-button name="取消" site="form" @click="close" />
      <my-button name="保存" site="form" @click="save" />
    </div>
  </win-sm>
</template>

<script>
import winSm from '@/components/win/win-sm'
import myButton from '@/components/myButton/myButton'
import * as finsystenant from '@/api/baseSetting/finsystenant'
import winSm from '@/components/win/win-sm';
import myButton from '@/components/myButton/myButton';
import * as finsystenant from '@/api/baseSetting/finsystenant';

export default {
  components: {winSm, myButton},
  components: { winSm, myButton },
  props: {
    setting: {
      type: Object,
      default: () => {
      }
    }
      default: () => {},
    },
  },
  data() {
    return {
      classList:[],
      classList: [],
      treeList: [],
      checkAll: false,
      checkedList: [],
      formData: {
        warehouseCode:null,
        classificationId: null,
        classificationCode:null,
        states: 1,
        agencyIds:[],
        agencyId:''
      },
      rules: {
        warehouseName: [
          {required: true, message: '请输入', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入', trigger: 'blur'}
        ],
        states: [
          {required: true, message: '请选择状态', trigger: 'blur'}
        ]
      }
    }
        warehouseName: [{ required: true, message: '请输入', trigger: 'blur' }],
        classificationCode: [{ required: true, message: '请选择', trigger: 'blur' }],
        agencyIds: [{ required: true, message: '请选择', trigger: 'blur' }],
        states: [{ required: true, message: '请选择状态', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.class_List()
    if(this.setting.info){
      this.formData = Object.assign({},JSON.parse(this.setting.info))
    this.class_List();
    this.tree_List();
    if (this.setting.info) {
      this.formData = Object.assign({}, JSON.parse(this.setting.info));
    }
  },
  methods: {
    class_List (){
      finsystenant.classList().then(res => {
    class_List() {
      finsystenant.classList().then((res) => {
        if (res) {
          console.log(res,'res');
          this.classList = res
          console.log(res, 'res');
          this.classList = res;
        }
      })
      });
    },
    getEditInfo(id){

    tree_List() {
      finsystenant.getTree().then((res) => {
        if (res) {
          this.treeList = res;
          this.$set(this.formData,'agencyIds',this.findParentIds(this.treeList,this.formData.agencyId))
        }
      });
    },
    handleChange(e){
      this.formData.agencyId = e[e.length-1]
    },
    getEditInfo(id) {},
    close() {
      this.$emit('close')
      this.$emit('close');
    },
    save() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.formData)
          if(this.setting.id){
          const params = Object.assign({}, this.formData);
          if (this.setting.id) {
            // 编辑接口
            finsystenant.editstore(params).then(res => {
            finsystenant.editstore(params).then((res) => {
              if (res) {
                this.$message.success('保存成功！')
                this.close()
                this.$emit('search')
                this.$message.success('保存成功！');
                this.close();
                this.$emit('search');
              } else {
                this.$message.error('保存失败')
                this.$message.error('保存失败');
              }
            })
          }else{
            params.orgId = this.setting.orgId
            finsystenant.addstore(params).then(res => {
            });
          } else {
            params.orgId = this.setting.orgId;
            finsystenant.addstore(params).then((res) => {
              if (res) {
                this.$message.success('保存成功！')
                this.close()
                this.$emit('search')
                this.$message.success('保存成功！');
                this.close();
                this.$emit('search');
              } else {
                this.$message.error('保存失败')
                this.$message.error('保存失败');
              }
            })
            });
          }
        } else {
          this.$message.error('校验未通过，请检查。')
          this.$message.error('校验未通过，请检查。');
        }
      })
    }
  }
}
      });
    },
    // 通过子集id查到所以相关父级id并返回数组
    findParentIds(dataSource, nodeId) {
      const parentIds = [nodeId]; // 用于存储所有父节点ID的数组

      // 定义一个递归函数，用于遍历整棵树并查找子节点的所有父节点
      function traverse(node, nodeId) {
        if (node.id === nodeId) {
          // 如果当前节点的ID等于子节点的ID，则表示已经找到了子节点，可以开始向上查找父节点
          return true; // 返回true表示已经找到了子节点
        }

        if (node.children) {
          // 如果当前节点有子节点，则继续遍历子节点
          for (const childNode of node.children) {
            if (traverse(childNode, nodeId)) {
              // 如果在子节点中找到了子节点的父节点，则将当前节点的ID添加到父节点ID数组中，并返回true表示已经找到了子节点
              parentIds.unshift(node.id);
              return true;
            }
          }
        }

        return false; // 如果当前节点不是子节点的父节点，则返回false
      }

      // 从根节点开始遍历整棵树，并调用递归函数查找子节点的所有父节点
      for (const node of dataSource) {
        if (traverse(node, nodeId)) {
          // 如果在当前节点的子树中找到了子节点的父节点，则直接退出循环
          break;
        }
      }

      return parentIds; // 返回所有父节点ID的数组
    },
  },
};
</script>

 admin-web/src/views/stock/accessStock/outbound/detail.vue

New file
@@ -0,0 +1,116 @@
<template>
  <win-md class="stock-detail" :title="setting.title" @close="close" :width="'800px'">
    <el-row :gutter="20">
      <el-col :span="8">
        <span>出库单号：</span>
        <span>{{ detail.businessFormCode }}</span>
      </el-col>
      <el-col :span="8">
        <span>出库仓库：</span>
        <span>{{ detail.warehouseName }}</span>
      </el-col>
      <el-col :span="8">
        <span>所属机构：</span>
        <span>{{ detail.agencyName }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8">
        <span>创建人：</span>
        <span>{{ detail.buyerName }}</span>
      </el-col>
      <el-col :span="8">
        <span>出库时间：</span>
        <span>{{ detail.incomeTime | formatTime }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col class="img-row" :span="24">
        <span>出库手续：</span>
        <div class="img-box"></div>
      </el-col>
    </el-row>
    <div class="goods-card" v-for="(goodsItem, goodsIndex) in detail.procureGoods" :key="goodsIndex">
      <el-row :gutter="20">
        <el-col :span="8">
          <span>物品分类：</span>
          <span>{{ goodsItem.baseCategoryName }}</span>
        </el-col>
        <el-col :span="8">
          <span>物品名称：</span>
          <span>{{ goodsItem.goodsTemplateName }}</span>
        </el-col>
      </el-row>
      <el-table :data="goodsItem.models" :stripe="true" style="margin-top: 20px">
        <el-table-column prop="baseGoodsModelsName" label="规格型号" align="center">
          <template slot-scope="scope">
            {{ scope.row.baseGoodsModelsName }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center">
          <template slot-scope="scope">
            {{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="counts" label="出库数量" align="center">
          <template slot-scope="scope">
            {{ scope.row.counts }}
          </template>
        </el-table-column>
        <el-table-column prop="counts" label="金额" align="center">
          <template slot-scope="scope">
            {{ (scope.row.price * scope.row.counts).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </win-md>
</template>
<script>
import { procureDetail } from '@/api/stock/procure/purchaseOrder';
import winMd from '@/components/win/win-md';
import * as DateFormatter from '@/utils/DateFormatter';

export default {
  components: { winMd },

  props: {
    setting: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      detail: {
        baseCategoryName: '',
        businessFormCode: '',
        goodsTemplateName: '',
        agencyId: '',
        agencyName: '',
        states: '',
        createName: '',
        time: '',
        procureGoods: [{}, {}],
      },
    };
  },
  filters: {
    formatTime(time) {
      if (!time) return;
      return DateFormatter.LongToDateTime(time);
    },
  },
  created() {
    procureDetail({ id: this.setting.id }).then((res) => {
      this.detail = res;
    });
  },
  methods: {
    close() {},
  },
};
</script>
<style lang="scss" scoped>
@import url(../../index.scss);
</style>

 admin-web/src/views/stock/accessStock/outbound/edit.vue

New file
@@ -0,0 +1,516 @@
<template>
  <win-md class="stock-edit" :title="`${setting.title}出库出库`" @close="close" :width="'800px'">
    <el-form class="form" ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
      <div class="main-w">
        <el-row :gutter="24" class="headerHeight">
          <el-col :span="12">
            <el-form-item label="出库仓库" prop="warehouseId">
              <el-select v-model="formData.warehouseId" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in warehouses" :key="item.id" :label="item.warehouseName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出库时间" prop="procureTime">
              <el-date-picker
                v-model="formData.procureTime"
                type="datetime"
                value="yyyy-MM-dd HH:mm:ss"
                value-format="yyyyMMddHHmmss"
                placeholder="请选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="headerHeight">
          <el-col :span="12">
            <el-form-item label="出库手续" prop="procureDoc">
              <upload :settings="uploadSettings" @on-change="uploadChange"></upload>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="goods-card" v-for="(goodsItem, goodsIndex) in formData.procureGoods" :key="goodsIndex">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="物品分类"
                :prop="`procureGoods[${goodsIndex}].baseCategoryIds`"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change',
                }"
              >
                <el-cascader
                  v-model="goodsItem.baseCategoryIds"
                  :options="categoryOptions"
                  :props="{ value: 'id' }"
                  @change="categoryChange($event, goodsIndex)"
                  style="width: 100%"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="物品名称"
                :prop="`procureGoods[${goodsIndex}].baseGoodsTemplateId`"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change',
                }"
              >
                <el-select
                  v-model="goodsItem.baseGoodsTemplateId"
                  placeholder="请先择物品分类"
                  filterable
                  :disabled="!goodsItem.baseCategoryId"
                  style="width: 100%"
                  @change="goodsTemplateChange($event, goodsIndex)"
                >
                  <el-option
                    v-for="item in goodsItem.goodsOptions"
                    :key="item.id"
                    :label="item.goodsName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="规格型号"
                :prop="`procureGoods[${goodsIndex}].modelsIds`"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change',
                }"
              >
                <el-select
                  v-model="goodsItem.modelsIds"
                  multiple
                  placeholder="请先择物品名称"
                  :disabled="!goodsItem.baseCategoryId"
                  @change="modelChange($event, goodsIndex)"
                  @remove-tag="modelRemoveTag($event, goodsIndex)"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in goodsItem.modelsOptions"
                    :key="item.id"
                    :label="item.modelName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-table :data="goodsItem.models" :stripe="true">
            <el-table-column prop="baseGoodsModelsId" label="规格型号" align="center">
              <template slot-scope="scope">
                {{ getGoodsModelsName(scope.row.baseGoodsModelsId) }}
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center">
              <template slot-scope="scope">
                {{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column prop="price" label="现有库存" align="center">
              <template slot-scope="scope">{{  }}
                {{ scope.row.worehouseCount }}
              </template>
            </el-table-column>
            <el-table-column prop="counts" label="出库数量" align="center">
              <template slot-scope="scope">
                <el-input
                  type="number"
                  v-model="scope.row.counts"
                  @change="countsChange($event, goodsIndex,scope.$index)"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="btn-group">
            <el-button
              v-if="formData.procureGoods.length > 1"
              name="移除"
              type="danger"
              plain
              size="mini"
              @click="removeGoods(goodsIndex)"
              >移除</el-button
            >
            <el-button
              v-if="formData.procureGoods.length - 1 == goodsIndex"
              name="新增物品"
              type="primary"
              plain
              size="mini"
              @click="addGoods"
              >新增物品</el-button
            >
          </div>
        </div>
      </div>
    </el-form>
    <div slot="footer" align="center" class="dialog-footer">
      <my-button name="取消" site="form" @click="close" />
      <my-button name="保存" site="form" @click="handleSubmit" />
    </div>
  </win-md>
</template>
<script>
import {
  goodsTemplate,
  procureAdd,
  procureEdit,
  selectTenantWarehouse,
  goodsModel,
  procureDetail,
} from '@/api/stock/procure/purchaseOrder';
import { getTree } from '@/api/foudation/classification';
import MyButton from '@/components/myButton/myButton';
import winMd from '@/components/win/win-md';
import upload from '@/components/upload/index';
import { getUploadUrl } from '@/utils/base';

import SettingIplatform from '../../../../../public/static/config';

export default {
  components: { MyButton, winMd, upload },
  props: {
    setting: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      visible: false,
      loading: false,
      buyTypeOptions: [
        {
          label: '集采',
          value: '1',
        },
        {
          label: '自采',
          value: '2',
        },
      ],
      warehouses: [], // 出库仓库列表
      categoryOptions: [], // 物品分类列表
      modelList: [], //型号列表
      formData: {
        warehouseId: '', // 出库仓库id
        procureTime: '', // 出库时间
        buyType: '2', // 出库方式（1：集采；2=自采）
        procureGoods: [],
      },
      goodsItem: {
        whFormProcureId: '', // 出库单ID
        baseCategoryIds: '', // 分类编号数组
        baseCategoryId: '', // 分类编号
        baseGoodsTemplateId: '', // 物品模版编号
        goodsTemplateName: '', // 物品模版名称
        supplier: '', // 供应商
        sort: '', // 显示顺序
        goodsOptions: [], // 物品列表select
        modelsOptions: [], //规格型号select
        models: [], // 物品名称
        modelsIds: [], //规格型号
      },
      modelsItem: {
        baseGoodsModelsId: '', // 规格型号编号
        price: 0, // 单价(出库需要，调拨不需要)
        worehouseCount: 0,
        counts: 0, // 操作数量
        supplier: '', // 供应商
        unit: null, //单位
      },
      rules: {
        warehouseId: [{ required: true, message: '请选择', trigger: 'change' }],
        procureTime: [{ required: true, message: '请选择', trigger: 'change' }],
        buyType: [{ required: true, message: '请选择', trigger: 'change' }],

        // procureDoc: [{ required: true, message: '请上传', trigger: 'change' }],
        baseCategoryIds: [{ required: true, message: '请选择', trigger: 'change' }],
        baseGoodsTemplateId: [{ required: true, message: '请选择', trigger: 'change' }],
        modelsIds: [{ required: true, message: '请选择', trigger: 'change' }],
      },

      uploadSettings: {
        title: '上传',
        max: 20, // 最大大小，单位M
        num: 2, // 支持上传图片个数
        accept: '.jpg,.png', // 限制格式
        tip: '', // 提示 默认：`只能上传${this.defaultSettings.num}个${this.defaultSettings.accept}文件，且不超过${this.defaultSettings.max}kb`
        uploadUrl: getUploadUrl(), // 上传路径
        multiple: true, // 是否支持批量上传
        disabled: false, // 是否禁用
        type: 'text', // text/picture
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      this.getWarehouseList();
      this.getgoodsTemplate();
      this.getgoodsModel();
      // 获取物品分类列表
      const treeRes = await getTree();
      this.categoryOptions = this.removeEmptyChildren(treeRes);
      if (this.setting.id) {
        const detail = await procureDetail({ id: this.setting.id });
        this.formData = Object.assign(this.formData, detail);
        this.$set(this.formData, 'buyType', this.formData.buyType.toString());
        this.formData.procureTime = this.formData.procureTime.toString();
        this.formData.procureGoods.map((item, index) => {
          // 根据子集ID拼接物品分类列表
          let pIds = this.findParentIds(this.categoryOptions, item.baseCategoryId);
          pIds = pIds.reverse();
          item.baseCategoryIds = [...pIds, item.baseCategoryId];
          this.$set(
            this.formData.procureGoods[index],
            'modelsIds',
            item.models.map((v) => v.baseGoodsModelsId),
          );
          this.getgoodsTemplate(item.baseCategoryId, index);
          this.getgoodsModel(item.baseGoodsTemplateId, index);
          return item;
        });
      } else {
        this.formData.procureGoods.push(JSON.parse(JSON.stringify(this.goodsItem)));
      }
      this.visible = true;
    },

    // 获取出库仓库列表
    getWarehouseList() {
      selectTenantWarehouse()
        .then((res) => {
          this.warehouses = res;
          if (this.warehouses.length && !this.formData.warehouseId) {
            // 默认选中第一个仓库
            this.formData.warehouseId = this.warehouses[0].id;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    removeEmptyChildren(arr) {
      arr.forEach((item) => {
        if (!item.children || !item.children.length) {
          delete item.children;
        } else {
          this.removeEmptyChildren(item.children);
        }
      });
      return arr;
    },

    // 获取物品名称列表
    getgoodsTemplate(id, index) {
      goodsTemplate({ categoryId: id || '' }).then((res) => {
        if (index || index == 0) {
          this.$set(this.formData.procureGoods[index], 'goodsOptions', res);
        } else {
          this.goodsTemplatelAll = res;
        }
      });
    },

    // 规格型号
    getgoodsModel(id, index) {
      goodsModel({ goodsTemplatesId: id || '' }).then((res) => {
        if (index || index == 0) {
          this.$set(this.formData.procureGoods[index], 'modelsOptions', res);
        } else {
          this.goodsModelAll = res;
        }
      });
    },

    // 根据物品名称id获取名字
    getGoodsTemplateName(id) {
      let item = this.goodsTemplatelAll.find((v) => v.id == id);
      if (item) {
        return item.goodsName;
      }
      return;
    },

    // 根据规格型号id获取名字
    getGoodsModelsName(id) {
      let item = this.goodsModelAll.find((v) => v.id == id);
      if (item) {
        return item.modelName;
      }
      return;
    },

    // 物品分类选择
    categoryChange(e, index) {
      this.formData.procureGoods[index].goodsOptions = [];
      this.formData.procureGoods[index].baseGoodsTemplateId = '';
      this.formData.procureGoods[index].goodsTemplateName = '';
      this.formData.procureGoods[index].modelsOptions = [];
      this.formData.procureGoods[index].modelsIds = [];
      this.formData.procureGoods[index].models = [];

      this.formData.procureGoods[index].baseCategoryId = e[e.length - 1];
      // 根据选中分类请求物品名称列表
      this.getgoodsTemplate(e[e.length - 1], index);
    },

    // 物品名称列表
    goodsTemplateChange(e, index) {
      this.formData.procureGoods[index].modelsOptions = [];
      this.formData.procureGoods[index].modelsIds = [];
      this.formData.procureGoods[index].models = [];

      this.formData.procureGoods[index].goodsTemplateName = this.getGoodsTemplateName(e);
      // 根据选中物品名称id获取规格型号列表
      this.getgoodsModel(e, index);
    },

    // 规格型号选择
    modelChange(e, index) {
      let arr = [...this.formData.procureGoods[index].models];
      let str = JSON.stringify(arr);
      e.forEach((item) => {
        if (str.indexOf(item) == -1) {
          let temp = this.goodsModelAll.find((v) => v.id == item);
          arr.push({ ...this.modelsItem, baseGoodsModelsId: item, unit: temp.unit });
        }
      });
      this.formData.procureGoods[index].models = arr;
    },

    // 规格型号移除
    modelRemoveTag(e, index) {
      let arr = this.formData.procureGoods[index].models;
      let delIndex = arr.findIndex((v) => v.baseGoodsModelsId == e);
      this.formData.procureGoods[index].models.splice(delIndex, 1);
    },

    // 上传
    uploadChange(e) {
      console.log('uploadChange', e);
    },

    // 点击新增物品
    addGoods() {
      this.formData.procureGoods.push(JSON.parse(JSON.stringify(this.goodsItem)));
    },

    // 点击移除
    removeGoods(index) {
      this.formData.procureGoods.splice(index, 1);
    },

    // 出库数量校验
    countsChange(e, goodsIndex,index) {
      const curItem = this.formData.procureGoods[goodsIndex].models[index]
      const worehouseCount = curItem.worehouseCount
      if (e > worehouseCount) {
        this.$message.warning('数额超过现有库存');
        curItem.counts = worehouseCount
      }
    },

    // 提交
    handleSubmit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log('this.formData', this.formData);
          if (this.setting.id) {
            procureAdd(this.formData)
              .then((res) => {
                this.$message.success('保存成功！');
                this.close();
                this.$emit('search');
              })
              .catch((err) => {
                console.log('create err', err);
                this.$message.error('保存失败');
              });
          } else {
            procureEdit(this.formData)
              .then((res) => {
                this.$message.success('保存成功！');
                this.close();
                this.$emit('search');
              })
              .catch((err) => {
                console.log('edit err', err);
                this.$message.error('保存失败');
              });
          }
        } else {
          this.$message.error('校验未通过，请检查。');
        }
      });
    },

    close() {
      this.formData = {
        warehouseId: '', // 出库仓库id
        procureTime: '', // 出库时间
        procureGoods: [],
      };
      this.$emit('close');
    },

    // 通过子集id查到所以相关父级id并返回数组
    findParentIds(dataSource, nodeId) {
      const parentIds = []; // 用于存储所有父节点ID的数组

      // 定义一个递归函数，用于遍历整棵树并查找子节点的所有父节点
      function traverse(node, nodeId) {
        if (node.id === nodeId) {
          // 如果当前节点的ID等于子节点的ID，则表示已经找到了子节点，可以开始向上查找父节点
          return true; // 返回true表示已经找到了子节点
        }

        if (node.children) {
          // 如果当前节点有子节点，则继续遍历子节点
          for (const childNode of node.children) {
            if (traverse(childNode, nodeId)) {
              // 如果在子节点中找到了子节点的父节点，则将当前节点的ID添加到父节点ID数组中，并返回true表示已经找到了子节点
              parentIds.push(node.id);
              return true;
            }
          }
        }

        return false; // 如果当前节点不是子节点的父节点，则返回false
      }

      // 从根节点开始遍历整棵树，并调用递归函数查找子节点的所有父节点
      for (const node of dataSource) {
        if (traverse(node, nodeId)) {
          // 如果在当前节点的子树中找到了子节点的父节点，则直接退出循环
          break;
        }
      }

      return parentIds; // 返回所有父节点ID的数组
    },
  },
};
</script>
<style scoped lang="scss">
@import url(../../index.scss);
</style>

 admin-web/src/views/stock/accessStock/outbound/index.vue

@@ -1,118 +1,78 @@
<template>
  <div class="app-container">
  <div class="app-container stock-container">
    <el-container>
      <el-container>
        <el-card class="box-card" style="width: 100%" shadow="never">
          <!--搜索条件-->
          <div class="filter-container">
            <my-search ref="searchBar" :items="items" @search="fifterForm"></my-search>
          </div>
          <el-row style="margin-top: 15px">
            <el-col>
              <!--列表-->
              <my-button name="新增" @click="addtable" site="form" />
              <div :style="{'overflow-y': 'auto', height:`${clientHeight - 320}px`}">
                    <el-row class="card"
                            :gutter="5">
                        <el-col v-for="(item, index) in proData" :key="index" class="cm-item">
                          <el-card class="card-data">
                            <div class="card-container">
                              <div class="hed-one">出库单号：{{ item.order_no }}</div>
                              <div class="one-hed">
                                <div class="box"><span class="span-two">机构：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">操作人：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">出库时间：</span>{{ item.customer_name }}</div>
                              </div>
                              <div class="card-end">
                                <div v-for="(just, index) in item.data" class="two-end">
                                  <div class="item"><span>{{ just.order_no }}：</span>{{ just.customer_name }}</div>
                                </div>
                              </div>
                            </div>
                            <div class="card-but">
                              <my-button name="查看详情"   site="form" />
                              <my-button name="导出出库单" site="form" />
                            </div>
                          </el-card>
                        </el-col>
                    </el-row>
              </div>
              <el-pagination
                :small="false"
                :current-page="1"
                :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400, 500]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="0"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </el-col>
          </el-row>
          <!--添加/编辑弹窗-->
          <el-dialog title="新增出库"  :close-on-click-modal="false" :visible.sync="adddialog" width="60%" >
            <el-form ref="ruleForm" :model="formData" class="demo-ruleForm" label-width="100px">
              <el-row :gutter="24" class="headerHeight">
                  <el-col :span="12">
                    <el-form-item label="仓库名称" prop="name">
                      <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="仓库名称" prop="name">
                      <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24" class="headerHeight">
                  <el-col :span="24">
                    <el-form-item label="出库手续" prop="name">                      
                      仅允许导入xls、xlsx格式文件
                    </el-form-item>
                  </el-col>
                </el-row>
                <div style="position: relative;">
                  <div style="background-color: #F9F9F9;width: 90%;">
                  <el-row :gutter="24" class="">
                    <el-col :span="12">
                      <el-form-item label="仓库名称" prop="name">
                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="仓库名称" prop="name">
                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24" class="">
                    <el-col :span="12">
                      <el-form-item label="仓库名称" prop="name">
                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-table :data="formData.tableData" height="100%"  :stripe="true">
                    <el-table-column prop="projectName" label="规格型号" align="center"> </el-table-column>
                    <el-table-column prop="time1" label="单位"  align="center"> </el-table-column>
                    <el-table-column prop="unit" label="现有库存" align="center"> </el-table-column>
                    <el-table-column prop="time2" label="出库数量"  align="center"> </el-table-column>
                  </el-table>
                  </div>
                  <div style="position: absolute;right: 0;top: 152px;">
                    <my-button style="display: block;margin-left: 10px;margin-bottom: 5px;" name="移除" site="form"/>
                    <my-button name="新增物品" site="form"/>
                  </div>
                </div>
            </el-form>
            <div slot="footer" align="center" class="dialog-footer">
              <my-button name="确定" site="form" />
              <my-button name="取消" site="form" @click="adddialog = false"/>
      <el-card class="box-card" style="width: 100%" shadow="never">
        <!--搜索条件-->
        <div class="filter-container">
          <my-search ref="searchBar" :items="items" @search="fifterForm"></my-search>
        </div>
        <el-row style="margin-top: 15px">
          <el-col>
            <!--列表-->
            <div class="table-tool-bar" style="margin-bottom: 15px;">
              <my-button name="新增" @click="handleAdd" site="tools" size="medium" />
              <my-button name="导入" @click="importSetting.dialogShow = true" site="tools" size="medium" />
            </div>
          </el-dialog>
        </el-card>
      </el-container>
            <div :style="{ 'overflow-y': 'auto', height: `${clientHeight - 320}px` }" v-loading="loading">
              <el-row class="card" :gutter="5">
                <el-col v-for="(item, index) in list" :key="index" class="cm-item">
                  <el-card class="card-data">
                    <div class="card-container">
                      <div class="card-header">
                        <div class="card-header-left">
                          <span>出库单号：</span>
                          <span class="value">{{ item.businessFormCode }}</span>
                        </div>
                        <div class="card-header-right">
                            <el-button site="form" type="success" size="mini" @click="handleExport(item)"
                              >导出出库单</el-button
                            >
                          <el-button name="查看详情" site="form" type="info" size="mini" @click="handleDetail(item)"
                            >查看详情</el-button
                          >
                        </div>
                      </div>
                      <div class="one-hed">
                        <div class="box"><span class="span-two">机构：</span>{{ item.agencyId }}</div>
                        <div class="box"><span class="span-two">操作人：</span>{{ item.buyerName }}</div>
                        <div class="box">
                          <span class="span-two">出库时间：</span>{{ item.procureTime | formatTime }}
                        </div>
                      </div>
                      <div class="card-end">
                        <div v-for="(just, index) in item.fromProcureTemplateInfoList" :key="index" class="item">
                          <div class="name">{{ just.goodsTemplateName }}</div>
                          <div class="value-box">
                            <div class="value-box-item">
                              <span class="label">数量：</span>
                              <span class="value">{{ just.count }}</span>
                              <span class="unit">{{ just.unit }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <el-pagination
              :small="false"
              :current-page="pageNum"
              :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400, 500]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </el-card>
    </el-container>
    <!--添加/编辑弹窗-->
    <edit v-if="editSetting.show" :setting="editSetting" ref="editRef" @close="editSetting.show=false" @search="refreshData"></edit>
    <detail v-if="detailSetting.show" :setting="detailSetting" @close="editSetting.show=false" ref="detailRef"></detail>
    <my-import
      :import-setting="importSetting"
      :dialog-show="importSetting.dialogShow"
@@ -122,196 +82,66 @@
</template>

<script>
import MyButton from "@/components/myButton/myButton";
import { procureList, procureDel, procureIncome } from '@/api/stock/procure/purchaseOrder';
import MyButton from '@/components/myButton/myButton';
import SettingIplatform from '@/utils/settingIplatform';
import myImport from '@/views/components/myImport'
import {getBaseUrl} from '@/utils/base';
import myImport from '@/views/components/myImport';
import edit from './edit';
import detail from './detail';
import { getBaseUrl } from '@/utils/base';
import * as DateFormatter from '@/utils/DateFormatter';

export default {
  name: "index",
  components: {MyButton, myImport},
  name: 'index',
  components: { MyButton, myImport, edit, detail },
  data() {
    return {
      
      loading: false,
      adddialog: false,
      formData:{
        tableData:[
          {
            projectName:'555'
          },
          {
            projectName:'444'
          }
        ],
      },
      list: [],
      // 搜索框
      items: [
        {
          type: 'text',
          dataIndex: 'name',
          dataIndex: 'businessFormCode',
          label: '出库单号',
          placeholder: '请输入',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'text',
          dataIndex: 'name',
          dataIndex: 'goodsTemplateName',
          label: '物品名称',
          placeholder: '可模糊搜索',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'select',
          dataIndex: 'name',
          label: '机构',
          placeholder: '请选择',
          defaultValue: '',
          options: [],
        },
        {
          type: 'text',
          dataIndex: 'name',
          dataIndex: 'buyerName',
          label: '创建人',
          placeholder: '请输入',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'date-picker',
          dataIndex: 'val1',
          label: '出库时间',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'date-picker',
          dataIndex: 'val2',
          label: '至',
          defaultValue: ''
          defaultValue: '',
        },
        // {
        //   type: 'select',
        //   dataIndex: 'status',
        //   label: '状态',
        //   placeholder: '请选择',
        //   defaultValue: '1',
        //   options: [
        //     {
        //       label: '启用',
        //       value: '1'
        //     },
        //     {
        //       label: '禁用',
        //       value: '0'
        //     }
        //   ]
        // }
      ],
      proData: [
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
        },
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
        },
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
        },
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        },
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        },
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        },
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        }
      ],
      // 树数据
      treeDataList: [],
@@ -320,25 +150,25 @@
        tenantId: null,
        userName: null,
        userPhone: null,
        status: 1
        states: null,
      },
      // 导入
      importSetting: {
          dialogTitle: '导入',
          dialogShow: false,
          fileSettings: {
              data: {},
              uploadUrl: getBaseUrl()+"/pc/fin/sys/tenant/import", // 上传地址
              accept: '.xls', // 格式
              type: 'text', // 回显形式
              loading: false // 导入效果
          },
          /* 模板下载 */
          templateSettings: {
              templateName: '导入模板.xls', // 名称
              templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate' // 下载地址
          },
          onSuccess: null
        dialogTitle: '导入',
        dialogShow: false,
        fileSettings: {
          data: {},
          uploadUrl: getBaseUrl() + '/pc/fin/sys/tenant/import', // 上传地址
          accept: '.xls', // 格式
          type: 'text', // 回显形式
          loading: false, // 导入效果
        },
        /* 模板下载 */
        templateSettings: {
          templateName: '导入模板.xls', // 名称
          templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate', // 下载地址
        },
        onSuccess: null,
      },
      editSetting: {
        title: '',
@@ -346,104 +176,129 @@
        orgId: '',
        show: false,
      },
    }
      detailSetting: {
        title: '详情',
        id: '',
        show: false,
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
    };
  },
  computed: {
    clientHeight () {
      return document.documentElement.clientHeight
    clientHeight() {
      return document.documentElement.clientHeight;
    },
  },
  filters: {
    formatTime(time) {
      if (!time) return;
      return DateFormatter.LongToDateTime(time);
    },
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSizeChange(){},
    handleCurrentChange(){},
    fetchData() {
      this.loading = true;
      procureList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.filterFrom,
      }).then((res) => {
        this.list = res.datas;
        this.total = res.totalRows;
        this.loading = false;
        console.log(this.list);
      });
    },
    //导入
    importOrg() {
        this.importSetting.dialogShow = true
        this.importSetting.onSuccess = (response, callBack) => {
            if (response.code===1){
              this.$message.success(response.msg)
              this.search(1)
            }else{
              this.$message.warning(response.msg)
            }
            callBack()
      this.importSetting.dialogShow = true;
      this.importSetting.onSuccess = (response, callBack) => {
        if (response.code === 1) {
          this.$message.success(response.msg);
          this.search(1);
        } else {
          this.$message.warning(response.msg);
        }
        callBack();
      };
    },
   
    addtable() {
      this.adddialog = true
    // 导出
    handleExport() {},
    // 新增
    handleAdd() {
      this.editSetting.id = null;
      this.editSetting.info = null;
      this.editSetting.title = '新增';
      this.editSetting.show = true;
    },
    // 编辑
    handleEdit(row) {
      this.editSetting.id = row.id;
      this.editSetting.info = null;
      this.editSetting.title = '编辑';
      this.editSetting.show = true;
    },
    // 详情
    handleDetail(row) {
      this.detailSetting.id = row.id;
      this.detailSetting.info = JSON.stringify(row);
      this.detailSetting.title = '详情';
      this.detailSetting.show = true;
    },
    // 出库
    handleIncome(row) {
      this.$confirm(`您确定 单号：${row.businessFormCode}  出库吗?`, '出库出库')
        .then(function () {
          procureIncome({ id: row.id }).then((res) => {
            this.$message.success('出库成功！');
            this.search();
          });
        })
        .catch(() => {});
    },
    del(row) {
      this.$modal
        .confirm('是否确认删除出库单号为"' + row.businessFormCode + '"的数据吗？')
        .then(function () {
          procureDel({ id: row.id }).then((res) => {});
        })
        .then((res) => {
          this.$message.success('删除成功！');
          this.search();
        })
        .catch(() => {});
    },
    // 分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.search({ pageNum: 1 });
    },
    handleCurrentChange(pageNum) {
      this.myTable.paging.page.pageNum = pageNum;
      this.search({ pageNum: pageNum });
    },
    // 查询table列表
    search(pageNum) {
      if (pageNum != undefined) {
        // this.$refs.myTable.search(pageNum)
      } else {
        // this.$refs.myTable.search()
      }
      this.fetchData();
    },
    refreshData() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.search();
    },
    fifterForm(params) {
      console.log(params,'555');
      this.filterFrom = Object.assign(this.filterFrom, params)
      this.search(1)
    }
  }
}
      this.filterFrom = Object.assign(this.filterFrom, params);
      this.search(1);
    },
  },
};
</script>

<style scoped>
.card {
    display: flex;
    flex-wrap: wrap;
    margin: 0px !important;
    .cm-item {
        width: 100%;
    }
    .cm-item /deep/ .el-card__body {
        padding: 10px;
    }
}
.card-data{
  margin-top: 8px;
  .card-container{
    display: inline-block; 
    width: 70%;
    .hed-one{
      color: #2298EE;
      font-size: 18px;
    }
    .one-hed{
      margin-top: 15px;
      .box{
        display: inline-block;  
        margin-right: 20px;  
      }
    }
    .span-two{
      color: #83919e;
      font-size: 14px;
    }
    .card-end{
      font-size: 14px;
      color: #3d3d3d;
      margin-top: 15px;
      display: flex;  
      flex-wrap: wrap; 
      .two-end{
        width: calc(33.33% - 20px); 
        margin-bottom: 15px; 
      }
    }
    
  }
  .card-but{
    display: inline-block; 
  }
  .end{
    display: inline-block;  
  }
  
}

<style scoped lang="scss">
@import url(../../index.scss);
</style>

 admin-web/src/views/stock/accessStock/outboundDetails/index.vue

@@ -14,7 +14,7 @@
            </el-col>
          </el-row>
          <!--添加/编辑弹窗-->
          <edit v-if="editSetting.show" :setting="editSetting" @close="editSetting.show = false" @search="search"/>
          <detail v-if="detailSetting.show" :setting="detailSetting" @close="detailSetting.show = false"/>
        </el-card>
      </el-container>
    </el-container>
@@ -30,14 +30,14 @@
import MyTableV2 from "@/components/myTable/myTableV2";
import MyButton from "@/components/myButton/myButton";
import SettingIplatform from '@/utils/settingIplatform';
import edit from './edit'
import detail from '../outbound/detail'
import * as finsystenant from '@/api/baseSetting/finsystenant'
import myImport from '@/views/components/myImport'
import {getBaseUrl} from '@/utils/base';

export default {
  name: "index",
  components: {MyButton, MyTableV2, edit, myImport},
  components: {MyButton, MyTableV2, detail, myImport},
  data() {
    return {
      // 搜索框
@@ -72,6 +72,23 @@
          label: '物品名称',
          placeholder: '请输入',
          defaultValue: ''
        },
        {
          type: 'select',
          dataIndex: 'modelsIds',
          label: '规格型号',
          placeholder: '请选择',
          defaultValue: '',
          options: [],
        },
        {
          type: 'cascader',
          dataIndex: 'agencyId',
          label: '机构',
          placeholder: '请选择',
          optionsConfig: { url: '/pc/fin/sys/tenant/select/tree_fin_tenant', props: null },
          defaultValue: '',
          options: [],
        },
        {
          type: 'text',
@@ -114,6 +131,11 @@
        orgId: '',
        show: false,
      },
      detailSetting: {
        title: '详情',
        id: '',
        show: false,
      },
      // 表格数据
      table: {
        showIndex: true, // 是否显示序号
@@ -151,7 +173,7 @@
            {
              title: '详情',
              events: (row) => {
                this.showAudit(row);
                this.showDetail(row);
              },
            },
          ],
@@ -227,37 +249,11 @@
        .catch(() => {
        });
    },
    showAdd() {
      // if (!this.editSetting.orgId) {
      //   this.$message.warning('请先选择左侧机构')
      // } else {
        this.editSetting.id = null;
        this.editSetting.info = null;
        this.editSetting.title = '新增';
        this.editSetting.show = true;
      // }
    },
    showAudit(row) {
      this.editSetting.id = row.id;
      this.editSetting.info = JSON.stringify(row);
      this.editSetting.title = '编辑';
      this.editSetting.show = true;
    },
    nodeClick(param) {
      param = param || {}
      this.p = Object.assign({}, {
        id: param.id,
        name: param.name
      })
      if (this.p.id != undefined && this.p.id != null) {
        this.filterFrom.tenantId = this.p.id
        this.editSetting.orgId = this.p.id
      } else {
        this.filterFrom.tenantId = null
        this.editSetting.orgId = null
      }
      this.importSetting.fileSettings.data = {pid: param.id}
      this.search(1)
    showDetail(row) {
      this.detailSetting.id = row.id;
      this.detailSetting.info = JSON.stringify(row);
      this.detailSetting.title = '详情';
      this.detailSetting.show = true;
    },
    // 查询table列表
    search(pageNum) {

 admin-web/src/views/stock/index.scss

New file
@@ -0,0 +1,188 @@
.stock-container {
  .ml-20 {
    margin-left: 20px;
  }
  .card {
    display: flex;
    flex-wrap: wrap;
    margin: 0px !important;
    .cm-item {
      width: 100%;
    }
    .cm-item .el-card__body {
      padding-bottom: 5px;
    }
  }
  .card-data {
    position: relative;
    margin-top: 8px;
    .card-container {
      .card-header {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f3f9fe;
        padding: 0 32px 0 15px;
        box-sizing: border-box;
      }
      .card-header-left {
        display: flex;
        align-items: center;
        color: #999999;
        font-family: 'Microsoft YaHei UI';
        font-size: 18px;
        font-weight: 700;
        .value {
          color: #3d3d3d;
        }

        .states {
          width: 54px;
          height: 22px;
          line-height: 22px;
          text-align: center;
          border-radius: 4px;
          border: 1px solid #f9675b99;
          background: #f9675b1a;
          font-family: 'Microsoft YaHei';
          color: #f9675b;
          font-size: 13px;
          font-style: normal;
          font-weight: 400;
          margin-left: 8px;
        }
        .states-success {
          border: 1px solid #39ad6199;
          background: #39ad610f;
          color: #39ad61;
        }
        .states-info {
          border: 1px solid #999999;
          background: #39ad610f;
          color: #999999;
        }
      }
      .one-hed {
        margin-top: 15px;
        padding: 0 32px 0 15px;
        box-sizing: border-box;
        .box {
          display: inline-block;
          margin-right: 20px;
        }
        .span-two {
          color: #83919e;
          font-size: 14px;
        }
      }
      .card-end {
        font-size: 14px;
        color: #3d3d3d;
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;
        font-family: 'Microsoft YaHei UI';
        padding: 0 16px;
        box-sizing: border-box;
        .item {
          width: 379px;
          height: 60px;
          padding: 8px 12px 9px 12px;
          box-sizing: border-box;
          align-items: center;
          gap: 8px;
          flex-shrink: 0;
          background: #f9f9f9;
          margin-right: 15px;
          margin-bottom: 15px;
          &:last-child {
            margin-right: 0;
          }
          .name {
            height: 22px;
            line-height: 22px;
          }
          .value-box {
            display: flex;
            .value-box-item {
              margin-right: 20px;
              .label {
                color: #99999999;
                line-height: 22px;
              }
              .value {
                color: #ff3131;
              }
            }
          }
        }
      }
    }
  }
}

/*编辑*/
.stock-edit{
  .main-w {
    width: 88%;
  }
  .goods-card {
    position: relative;
    background: #f6f6f6;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #f9f9f9;
    margin-top: 20px;
    &:nth-of-type(1) {
      margin-top: 0;
    }
  }
  .btn-group {
    width: 80px;
    position: absolute;
    right: -94px;
    bottom: 0px;
    .el-button {
      margin-bottom: 10px;
      margin-left: 0;
      display: block;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

/*详情*/
.stock-detail{
  .img-row {
    display: flex;
    align-content: center;
  }
  .img-box {
    display: inline-block;
    width: 80px;
    height: 80px;
    background: #f9f9f9;
    margin-right: 20px;
    cursor: pointer;
    .img {
      width: 100%;
    }
  }
  
  .goods-card {
    position: relative;
    background: #f6f6f6;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #f9f9f9;
    margin-top: 20px;
    &:nth-of-type(1) {
      margin-top: 0;
    }
  }
}

 admin-web/src/views/stock/inventorycount/inventorytask/edit.vue

@@ -1,43 +1,48 @@
<template>
  <win-sm :title="setting.title" @close="close" :width="'800px'">
    <el-form ref="ruleForm" :model="formData" :rules="rules" class="demo-ruleForm" label-width="100px">
      <el-form-item label="编号" prop="code">
        <el-input disabled v-model="formData.code" clearable maxlength="20" show-word-limit style="width: 100%"/>
      <el-form-item label="盘点单名" prop="code">
        <el-input disabled v-model="formData.code" clearable maxlength="20" show-word-limit style="width: 100%" />
      </el-form-item>
      <el-form-item label="仓库名称" prop="name">
        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
      <el-form-item label="盘点仓库" prop="name">
        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%" />
      </el-form-item>
      <el-form-item label="地址" >
        <el-input v-model="formData.adss" clearable maxlength="20" show-word-limit style="width: 100%"/>
      <el-form-item label="盘点人">
        <el-input v-model="formData.adss" clearable maxlength="20" show-word-limit style="width: 100%" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch
          v-model="formData.status"
          active-color="#0d997c"
          inactive-color="#C0CCDA">
        </el-switch>
      <el-form-item label="监盘人">
        <el-input v-model="formData.adss" clearable maxlength="20" show-word-limit style="width: 100%" />
      </el-form-item>
      <el-form-item label="备注" prop="status">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="formData.adss"
          resize="none"
          maxlength="100"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" align="center" class="dialog-footer">
      <my-button name="取消" site="form" @click="close"/>
      <my-button name="保存" site="form" @click="save"/>
      <my-button name="取消" site="form" @click="close" />
      <my-button name="保存" site="form" @click="save" />
    </div>
  </win-sm>
</template>

<script>
import winSm from '@/components/win/win-sm'
import myButton from '@/components/myButton/myButton'
import * as finsystenant from '@/api/baseSetting/finsystenant'
import winSm from '@/components/win/win-sm';
import myButton from '@/components/myButton/myButton';
import * as finsystenant from '@/api/baseSetting/finsystenant';

export default {
  components: {winSm, myButton},
  components: { winSm, myButton },
  props: {
    setting: {
      type: Object,
      default: () => {
      }
    }
      default: () => {},
    },
  },
  data() {
    return {
@@ -50,62 +55,54 @@
        summary: '',
      },
      rules: {
        code: [
          {required: true, message: '请输入机构编号', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入机构名称', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '请选择状态', trigger: 'blur'}
        ]
      }
    }
        code: [{ required: true, message: '请输入机构编号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
      },
    };
  },
  created() {
    if(this.setting.info){
      this.formData = Object.assign({},JSON.parse(this.setting.info))
    if (this.setting.info) {
      this.formData = Object.assign({}, JSON.parse(this.setting.info));
    }
  },
  methods: {
    getEditInfo(id){

    },
    getEditInfo(id) {},
    close() {
      this.$emit('close')
      this.$emit('close');
    },
    save() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.formData)
          if(this.setting.id){
          const params = Object.assign({}, this.formData);
          if (this.setting.id) {
            // 编辑接口
            finsystenant.edit(params).then(res => {
            finsystenant.edit(params).then((res) => {
              if (res) {
                this.$message.success('保存成功！')
                this.close()
                this.$emit('search')
                this.$message.success('保存成功！');
                this.close();
                this.$emit('search');
              } else {
                this.$message.error('保存失败')
                this.$message.error('保存失败');
              }
            })
          }else{
            params.orgId = this.setting.orgId
            finsystenant.add(params).then(res => {
            });
          } else {
            params.orgId = this.setting.orgId;
            finsystenant.add(params).then((res) => {
              if (res) {
                this.$message.success('保存成功！')
                this.close()
                this.$emit('search')
                this.$message.success('保存成功！');
                this.close();
                this.$emit('search');
              } else {
                this.$message.error('保存失败')
                this.$message.error('保存失败');
              }
            })
            });
          }
        } else {
          this.$message.error('校验未通过，请检查。')
          this.$message.error('校验未通过，请检查。');
        }
      })
    }
  }
}
      });
    },
  },
};
</script>

 admin-web/src/views/stock/inventorycount/inventorytask/index.vue

@@ -10,11 +10,17 @@
          <el-row style="margin-top: 15px">
            <el-col>
              <!--列表-->
              <my-table-v2 ref="myTable" :filter="filterFrom" :table="table"/>
              <my-table-v2 ref="myTable" :filter="filterFrom" :table="table" />
            </el-col>
          </el-row>
          <!--添加/编辑弹窗-->
          <edit v-if="editSetting.show" :setting="editSetting" @close="editSetting.show = false" @search="search"/>
          <edit v-if="editSetting.show" :setting="editSetting" @close="editSetting.show = false" @search="search" />
          <inventory
            v-if="inventorySetting.show"
            :setting="inventorySetting"
            @close="inventorySetting.show = false"
            @search="search"
          />
        </el-card>
      </el-container>
    </el-container>
@@ -27,17 +33,18 @@
</template>

<script>
import MyTableV2 from "@/components/myTable/myTableV2";
import MyButton from "@/components/myButton/myButton";
import MyTableV2 from '@/components/myTable/myTableV2';
import MyButton from '@/components/myButton/myButton';
import SettingIplatform from '@/utils/settingIplatform';
import edit from './edit'
import * as finsystenant from '@/api/baseSetting/finsystenant'
import myImport from '@/views/components/myImport'
import {getBaseUrl} from '@/utils/base';
import edit from './edit';
import inventory from './inventory';
import * as finsystenant from '@/api/baseSetting/finsystenant';
import myImport from '@/views/components/myImport';
import { getBaseUrl } from '@/utils/base';

export default {
  name: "index",
  components: {MyButton, MyTableV2, edit, myImport},
  name: 'index',
  components: { MyButton, MyTableV2, edit, myImport, inventory },
  data() {
    return {
      // 搜索框
@@ -47,31 +54,14 @@
          dataIndex: 'name',
          label: '盘点单号',
          placeholder: '请输入',
          defaultValue: ''
          defaultValue: '',
        },
        // {
        //   type: 'select',
        //   dataIndex: 'status',
        //   label: '类型',
        //   placeholder: '请选择',
        //   defaultValue: '1',
        //   options: [
        //     {
        //       label: '启用',
        //       value: '1'
        //     },
        //     {
        //       label: '禁用',
        //       value: '0'
        //     }
        //   ]
        // },
        {
          type: 'text',
          dataIndex: 'name',
          label: '任务名称',
          placeholder: '请输入',
          defaultValue: ''
          defaultValue: '',
        },
      ],
      // 树数据
@@ -81,27 +71,33 @@
        tenantId: null,
        userName: null,
        userPhone: null,
        status: 1
        status: 1,
      },
      // 导入
      importSetting: {
          dialogTitle: '导入',
          dialogShow: false,
          fileSettings: {
              data: {},
              uploadUrl: getBaseUrl()+"/pc/fin/sys/tenant/import", // 上传地址
              accept: '.xls', // 格式
              type: 'text', // 回显形式
              loading: false // 导入效果
          },
          /* 模板下载 */
          templateSettings: {
              templateName: '导入模板.xls', // 名称
              templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate' // 下载地址
          },
          onSuccess: null
        dialogTitle: '导入',
        dialogShow: false,
        fileSettings: {
          data: {},
          uploadUrl: getBaseUrl() + '/pc/fin/sys/tenant/import', // 上传地址
          accept: '.xls', // 格式
          type: 'text', // 回显形式
          loading: false, // 导入效果
        },
        /* 模板下载 */
        templateSettings: {
          templateName: '导入模板.xls', // 名称
          templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate', // 下载地址
        },
        onSuccess: null,
      },
      editSetting: {
        title: '',
        id: '',
        orgId: '',
        show: false,
      },
      inventorySetting: {
        title: '',
        id: '',
        orgId: '',
@@ -114,36 +110,51 @@
        url: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/select/list', // 请求地址
        // 工具条
        tools: {
          columnsCtrl: {// 列控制按钮
            show: false
          columnsCtrl: {
            // 列控制按钮
            show: false,
          },
          generalExport: {// 通用导出按钮
            show: false
          generalExport: {
            // 通用导出按钮
            show: false,
          },
          // 自定义工具条按钮
          custom: [
          ]
            {
              name: '新增',
              click: () => {
                this.showAdd();
              },
            },
          ],
        },
        // 列信息
        columns: [
          {title: '盘点单号', field: 'name', align: 'left',},
          {title: '任务名称', field: 'code', align: 'center'},
          {title: '盘点仓库', field: 'lv', align: 'center', },
          {title: '盘点人', field: 'lv', align: 'center', },
          {title: '监盘人', field: 'summary', align: 'left',},
          {title: '盘点时间', field: 'summary', align: 'left',},
          {title: '创建时间', field: 'summary', align: 'left',},
          {title: '状态', field: 'summary', align: 'left',},
        ],   
          { title: '盘点单号', field: 'name', align: 'left' },
          { title: '任务名称', field: 'code', align: 'center' },
          { title: '盘点仓库', field: 'lv', align: 'center' },
          { title: '盘点人', field: 'lv', align: 'center' },
          { title: '监盘人', field: 'summary', align: 'left' },
          { title: '盘点时间', field: 'summary', align: 'left' },
          { title: '创建时间', field: 'summary', align: 'left' },
          { title: '状态', field: 'summary', align: 'left' },
        ],
        // 操作信息
        operation: {
          show: true, // 显示操作列
          width: '150', // 列宽
          attr: [
            {
              title: '详情',
              title: '编辑',
              events: (row) => {
                this.showAudit(row);
              },
            },
            {
              title: '盘点',
              type:'success',
              events: (row) => {
                this.showInventory(row);
              },
            },
          ],
@@ -155,79 +166,73 @@
            small: false,
            pageNum: 1,
            pageSize: 10,
            total: 0
          }
        }
            total: 0,
          },
        },
      },
    }
    };
  },
  created() {
    // 获取机构树
    this.initTreeData()
    this.initTreeData();
  },
  methods: {
    //导入
    importOrg() {
        this.importSetting.dialogShow = true
        this.importSetting.onSuccess = (response, callBack) => {
            if (response.code===1){
              this.$message.success(response.msg)
              this.search(1)
            }else{
              this.$message.warning(response.msg)
            }
            callBack()
      this.importSetting.dialogShow = true;
      this.importSetting.onSuccess = (response, callBack) => {
        if (response.code === 1) {
          this.$message.success(response.msg);
          this.search(1);
        } else {
          this.$message.warning(response.msg);
        }
        callBack();
      };
    },
    // 左侧树初始化
    initTreeData() {
      finsystenant.getTree().then(res => {
        const content = res || []
        this.treeDataList.splice(0, this.treeDataList.length)
        this.treeDataList = content
      finsystenant.getTree().then((res) => {
        const content = res || [];
        this.treeDataList.splice(0, this.treeDataList.length);
        this.treeDataList = content;
        if (content.length > 0) {
          this.importSetting.fileSettings.data = {pid: content[0].id}
          this.importSetting.fileSettings.data = { pid: content[0].id };
        }
      })
      });
    },
    updState(row) {
      let vm = this
      let text = row.status == 0 ? "启用" : "禁用";
      let vm = this;
      let text = row.status == 0 ? '启用' : '禁用';
      vm.$modal.confirm('确认要' + text + '"' + row.name + '"吗？').then(function () {
        let params = Object.assign({}, row)
        params.status = row.status == 1 ? 0 : 1
        finsystenant.edit(params).then(res => {
        let params = Object.assign({}, row);
        params.status = row.status == 1 ? 0 : 1;
        finsystenant.edit(params).then((res) => {
          if (res) {
            row.status = row.status === 1 ? 0 : 1
            vm.$modal.msgSuccess(text + "成功");
            vm.search()
            row.status = row.status === 1 ? 0 : 1;
            vm.$modal.msgSuccess(text + '成功');
            vm.search();
          }
        })
      })
        });
      });
    },
    del(row) {
      this.$modal
        .confirm('是否确认删除名称为"' + row.name + '"的机构吗？')
        .then(function () {
          finsystenant.del({id: row.id}).then((res) => {
          });
          finsystenant.del({ id: row.id }).then((res) => {});
        })
        .then((res) => {
          this.$message.success('删除成功！');
          this.search()
          this.search();
        })
        .catch(() => {
        });
        .catch(() => {});
    },
    showAdd() {
      // if (!this.editSetting.orgId) {
      //   this.$message.warning('请先选择左侧机构')
      // } else {
        this.editSetting.id = null;
        this.editSetting.info = null;
        this.editSetting.title = '新增';
        this.editSetting.show = true;
      // }
      this.editSetting.id = null;
      this.editSetting.info = null;
      this.editSetting.title = '新增';
      this.editSetting.show = true;
    },
    showAudit(row) {
      this.editSetting.id = row.id;
@@ -235,38 +240,45 @@
      this.editSetting.title = '编辑';
      this.editSetting.show = true;
    },
    showInventory(row) {
      this.inventorySetting.id = row.id;
      this.inventorySetting.info = JSON.stringify(row);
      this.inventorySetting.title = '盘点';
      this.inventorySetting.show = true;
    },
    nodeClick(param) {
      param = param || {}
      this.p = Object.assign({}, {
        id: param.id,
        name: param.name
      })
      param = param || {};
      this.p = Object.assign(
        {},
        {
          id: param.id,
          name: param.name,
        },
      );
      if (this.p.id != undefined && this.p.id != null) {
        this.filterFrom.tenantId = this.p.id
        this.editSetting.orgId = this.p.id
        this.filterFrom.tenantId = this.p.id;
        this.editSetting.orgId = this.p.id;
      } else {
        this.filterFrom.tenantId = null
        this.editSetting.orgId = null
        this.filterFrom.tenantId = null;
        this.editSetting.orgId = null;
      }
      this.importSetting.fileSettings.data = {pid: param.id}
      this.search(1)
      this.importSetting.fileSettings.data = { pid: param.id };
      this.search(1);
    },
    // 查询table列表
    search(pageNum) {
      if (pageNum != undefined) {
        this.$refs.myTable.search(pageNum)
        this.$refs.myTable.search(pageNum);
      } else {
        this.$refs.myTable.search()
        this.$refs.myTable.search();
      }
    },
    fifterForm(params) {
      this.filterFrom = Object.assign(this.filterFrom, params)
      this.search(1)
    }
  }
}
      this.filterFrom = Object.assign(this.filterFrom, params);
      this.search(1);
    },
  },
};
</script>

<style scoped>

</style>
<style scoped></style>

 admin-web/src/views/stock/inventorycount/inventorytask/inventory.vue

New file
@@ -0,0 +1,80 @@
<template>
  <win-md :title="setting.title" @close="close" :width="'1200px'">
    <el-row :gutter="20" style="margin-bottom: 20px" type="flex" align="middle">
      <el-col :span="6">盘点单号：{{ formData.businessFormCode }}</el-col>
      <el-col :span="6">盘点任务：{{ formData.businessTaskCode }}</el-col>
      <el-col :span="6">盘点仓库：{{ formData.warehouseId }}</el-col>
      <el-col :span="3" :offset="3">
        <my-button name="导出盘点单" site="form" size="medium" type="primary" />
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="formData.tableData" height="100%" :stripe="true" class="the-table">
      <el-table-column prop="goodsTemplateName" label="物品名称"> </el-table-column>
      <el-table-column prop="baseGoodsModelsId" label="型号" align="center"> </el-table-column>
      <el-table-column prop="classification" label="类别"> </el-table-column>
      <el-table-column prop="unit" label="单位" align="center"> </el-table-column>
      <el-table-column prop="kc" label="应有库存" align="center"> </el-table-column>
      <el-table-column prop="price" label="单价" align="center"> </el-table-column>
      <el-table-column prop="inventoryResult" label="金额" align="center"> </el-table-column>
      <el-table-column prop="inventoryCounts" label="实盘数量" align="center">
        <template slot-scope="scope">
            <el-input v-model="scope.row.inventoryCounts"></el-input>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" align="center" class="dialog-footer">
      <my-button name="暂存" site="form" type="primary" @click="close" />
      <my-button name="完成盘点" site="form" type="success" @click="save" />
    </div>
  </win-md>
</template>

<script>
import winMd from '@/components/win/win-md';
import myButton from '@/components/myButton/myButton';
export default {
  components: { winMd, myButton },
  props: {
    setting: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: false,
      formData: {
        businessFormCode: '2023080812',
        businessTaskCode: '2023年9月盘点单',
        warehouseId: '开封市仓库',
        tableData: [],
      },
    };
  },
  created() {
    for (let i = 0; i < 10; i++) {
      this.formData.tableData.push({
        goodsTemplateName: '施乐黑色碳粉',
        baseGoodsModelsId: '施乐c2201',
        classification: 'A',
        unit: '套',
        kc: 10,
        price: 20,
        inventoryResult: 200,
        inventoryCounts: 0,
      });
    }
  },
  methods: {
    close() {
      this.$emit('close');
    },
    save() {

    }
  },
};
</script>

<style></style>

 admin-web/src/views/stock/procure/purchaseOrder/detail.vue

@@ -1,15 +1,5 @@
<template>
  <el-dialog
    title="详情"
    width="60%"
    :modal="true"
    :visible.sync="visible"
    :top="'15vh'"
    :close-on-click-modal="false"
    :append-to-body="true"
    :destroy-on-close="true"
    @close="close"
  >
  <win-md class="stock-detail" :title="setting.title" @close="close" :width="'800px'">
    <el-row :gutter="20">
      <el-col :span="8">
        <span>入库单号：</span>
@@ -17,17 +7,17 @@
      </el-col>
      <el-col :span="8">
        <span>入库仓库：</span>
        <span>{{ detail.goodsTemplateName }}</span>
        <span>{{ detail.warehouseName }}</span>
      </el-col>
      <el-col :span="8">
        <span>所属机构：</span>
        <span>{{ detail.agencyId }}</span>
        <span>{{ detail.agencyName }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8">
        <span>状态：</span>
        <span>{{ detail.states==1?'待入库':'已入库' }}</span>
        <span>{{ detail.states == 1 ? '待入库' : '已入库' }}</span>
      </el-col>
      <el-col :span="8">
        <span>创建人：</span>
@@ -35,34 +25,42 @@
      </el-col>
      <el-col :span="8">
        <span>入库时间：</span>
        <span>{{ detail.time }}</span>
        <span>{{ detail.incomeTime | formatTime }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col class="img-row" :span="12">
        <span>采购类型：</span>
        <span>{{ detail.buyType == 1 ? '集采' : '自采' }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col class="img-row" :span="24">
        <span>采购手续照片：</span>
        <div class="img-box"></div>
        <div class="img-box" v-for="(item, index) in fileList" :key="index" @click="handlePreview(item)">
          <img class="img" :src="getUrl(item.path)" alt="" />
        </div>
      </el-col>
    </el-row>
    <div class="goods-card" v-for="(goodsItem, goodsIndex) in detail.procureGoods" :key="goodsIndex">
      <el-row :gutter="20">
        <el-col :span="8">
          <span>物品分类：</span>
          <span>{{ goodsItem.baseCategoryId }}</span>
          <span>{{ goodsItem.baseCategoryName }}</span>
        </el-col>
        <el-col :span="8">
          <span>物品名称：</span>
          <span>{{ goodsItem.baseGoodsTemplateId }}</span>
          <span>{{ goodsItem.goodsTemplateName }}</span>
        </el-col>
        <el-col :span="8">
          <span>供货商：</span>
          <span>{{ goodsItem.supplier }}</span>
        </el-col>
      </el-row>
      <el-table :data="goodsItem.models" :stripe="true" style="margin-top: 20px;">
        <el-table-column prop="baseGoodsModelsId" label="规格型号" align="center">
      <el-table :data="goodsItem.models" :stripe="true" style="margin-top: 20px">
        <el-table-column prop="baseGoodsModelsName" label="规格型号" align="center">
          <template slot-scope="scope">
            {{ scope.row.baseGoodsModelsId }}
            {{ scope.row.baseGoodsModelsName }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center">
@@ -70,78 +68,145 @@
            {{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="现有库存" align="center">
        <el-table-column prop="price" label="单价" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price"></el-input>
            {{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="counts" label="出库数量" align="center">
        <el-table-column prop="counts" label="入库数量" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.counts"></el-input>
            {{ scope.row.counts }}
          </template>
        </el-table-column>
        <el-table-column prop="counts" label="金额" align="center">
          <template slot-scope="scope">
            {{ (scope.row.price * scope.row.counts).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
    <div id="uploadPreviewImages" style="display: none">
      <span v-for="(src, index) in fileList" :key="index">
        <img
          v-if="checkImg(src.name)"
          class="v-img"
          :src="src.url"
          :alt="src.name"
          style="width: 100px; height: 100px"
        />
      </span>
    </div>
  </win-md>
</template>
<script>
import {
  procureDetail,
} from '@/api/stock/procure/purchaseOrder';
import { procureDetail } from '@/api/stock/procure/purchaseOrder';
import winMd from '@/components/win/win-md';
import * as DateFormatter from '@/utils/DateFormatter';
import { getDownUrl } from '@/utils/base';
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';

let viewer = null;

export default {
  components: { winMd },

  props: {
    setting: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      visible: false,
      fileList: [],
      detail: {
        businessFormCode:'',
        goodsTemplateName:'',
        agencyId:'',
        states:'',
        createName:'',
        time:'',
        procureGoods:[{},{}]
        baseCategoryName: '',
        businessFormCode: '',
        goodsTemplateName: '',
        procureDoc: '',
        agencyId: '',
        agencyName: '',
        states: '',
        createName: '',
        time: '',
        procureGoods: [{}, {}],
        fileKey: Math.random(),
      },
    };
  },
  filters: {
    formatTime(time) {
      if (!time) return;
      return DateFormatter.LongToDateTime(time);
    },
  },
  created() {
    procureDetail({ id: this.setting.id }).then((res) => {
      this.detail = res;
      this.fileList = this.detail.procureDoc ? JSON.parse(this.detail.procureDoc) : [];
      this.$nextTick(() => {
        this.initPreviewImg();
      });
    });
  },
  methods: {
    open(id) {
      this.visible = true;
      procureDetail({ id }).then(res=>{
        this.detail = res
      })
    initPreviewImg() {
      if (viewer != null) {
        viewer.destroy();
      }
      const ViewerDom = document.querySelector('#uploadPreviewImages');
      viewer = new Viewer(ViewerDom, {});
    },
    handlePreview(file) {
      if (!this.checkImg(file.name)) {
        return false;
      }
      let index = 0;
      for (let i = 0; i < this.fileList.length; i++) {
        const f = this.fileList[i];
        if (this.checkImg(f.name)) {
          if (file.id == f.id) {
            break;
          }
          index++;
        }
      }
      // this.fileList.forEach((f, i) => {
      //   if (file.uid == f.uid) {
      //     index = i
      //   }
      // })
      // document.querySelector('#uploadPreviewImages').children[0].click()
      viewer.view(index);
    },
    checkImg(name) {
      const suffix = name.substring(name.lastIndexOf('.'), name.length);
      const imgArray = ['.jpg', '.jpeg', '.png', '.bmp'];
      if (imgArray.indexOf(suffix) < 0) {
        return false;
      }
      return true;
    },
    getUrl(path) {
      if (path.substr(0, 7).toLowerCase() == 'http://' || path.substr(0, 8).toLowerCase() == 'https://') {
        return path;
      } else {
        return getDownUrl() + path;
      }
    },
    close() {
      this.visible = false;
      this.$emit('close');
    },
  },
};
</script>
<style lang="scss" scoped>
.img-row {
  display: flex;
  align-content: center;
@import url(../../index.scss);
.el-dialog {
  z-index: 1100 !important;
}
.img-box {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: #f9f9f9;
  margin-right: 20px;
  img {
    width: 100%;
  }
}

.goods-card {
  position: relative;
  background: #f6f6f6;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #f9f9f9;
  margin-top: 20px;
  &:nth-of-type(1) {
    margin-top: 0;
  }
>>> .el-dialog {
  z-index: 1100 !important;
}
</style>

 admin-web/src/views/stock/procure/purchaseOrder/edit.vue

@@ -1,15 +1,5 @@
<template>
  <el-dialog
    :title="`${type == 'create' ? '新增' : '编辑'}${title}`"
    width="60%"
    :modal="true"
    :visible.sync="visible"
    :top="'15vh'"
    :close-on-click-modal="false"
    :append-to-body="true"
    :destroy-on-close="true"
    @close="close"
  >
  <win-md class="stock-edit" :title="`${setting.title}采购入库`" @close="close" :width="'800px'">
    <el-form class="form" ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
      <div class="main-w">
        <el-row :gutter="24" class="headerHeight">
@@ -35,9 +25,18 @@
          </el-col>
        </el-row>
        <el-row :gutter="24" class="headerHeight">
          <el-col :span="12">
            <el-form-item label="采购类型" prop="buyType">
              <el-select v-model="formData.buyType" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in buyTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="headerHeight">
          <el-col :span="24">
            <el-form-item label="采购入库手续" prop="procureDoc">
              <upload :settings="uploadSettings" @on-change="uploadChange"></upload>
              <upload ref="uploadRef" :values="fileList" :settings="uploadSettings" @on-change="uploadChange"></upload>
            </el-form-item>
          </el-col>
        </el-row>
@@ -171,10 +170,10 @@
      </div>
    </el-form>
    <div slot="footer" align="center" class="dialog-footer">
      <el-button name="确定" site="form" type="primary" @click="handleSubmit">确定</el-button>
      <el-button name="取消" site="form" @click="close">取消</el-button>
      <my-button name="取消" site="form" @click="close"/>
      <my-button name="保存" site="form" @click="handleSubmit"/>
    </div>
  </el-dialog>
  </win-md>
</template>
<script>
import {
@@ -189,29 +188,39 @@
import MyButton from '@/components/myButton/myButton';
import winMd from '@/components/win/win-md';
import upload from '@/components/upload/index';
import { getUploadUrl } from '@/utils/base';
import { getUploadUrl,getDownUrl} from '@/utils/base';

import SettingIplatform from '../../../../../public/static/config';

export default {
  components: { MyButton, winMd, upload },
  props: {
    title: {
      type: String,
      default: '采购入库',
    },
    setting: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      type: 'create',
      visible: false,
      loading: false,
      buyTypeOptions:[{
        label:'集采',
        value: '1'
      },{
        label:'自采',
        value: '2'
      }],
      fileList:[],
      warehouses: [], // 入库仓库列表
      categoryOptions: [], // 物品分类列表
      modelList: [], //型号列表
      formData: {
        procureDoc:'',
        warehouseId: '', // 入库仓库id
        procureTime: '', // 采购时间
        buyType: '2', // 采购方式（1：集采；2=自采）
        procureGoods: [],
      },
      goodsItem: {
@@ -237,8 +246,9 @@
      rules: {
        warehouseId: [{ required: true, message: '请选择', trigger: 'change' }],
        procureTime: [{ required: true, message: '请选择', trigger: 'change' }],
        buyType: [{ required: true, message: '请选择', trigger: 'change' }],

        // procureDoc: [{ required: true, message: '请上传', trigger: 'change' }],
        procureDoc: [{ required: true, message: '请上传', trigger: 'change' }],
        baseCategoryIds: [{ required: true, message: '请选择', trigger: 'change' }],
        baseGoodsTemplateId: [{ required: true, message: '请选择', trigger: 'change' }],
        modelsIds: [{ required: true, message: '请选择', trigger: 'change' }],
@@ -247,41 +257,45 @@
      uploadSettings: {
        title: '上传',
        max: 20, // 最大大小，单位M
        num: 2, // 支持上传图片个数
        num: 10, // 支持上传图片个数
        accept: '.jpg,.png', // 限制格式
        tip: '', // 提示 默认：`只能上传${this.defaultSettings.num}个${this.defaultSettings.accept}文件，且不超过${this.defaultSettings.max}kb`
        uploadUrl: getUploadUrl(), // 上传路径
        multiple: true, // 是否支持批量上传
        disabled: false, // 是否禁用
        type: 'text', // text/picture
        type: 'picture', // text/picture
      },
    };
  },
  created() {},
  created() {
    this.init()
  },
  methods: {
    async open(id) {
    async init() {
      this.getWarehouseList();
      this.getgoodsTemplate()
      this.getgoodsModel();
      // 获取物品分类列表
      const treeRes = await getTree();
      this.categoryOptions = this.removeEmptyChildren(treeRes);
      if (id) {
        this.type = 'edit';
        const detail = await procureDetail({ id });
        console.log('procureDetail', detail);
      if (this.setting.id) {
        const detail = await procureDetail({ id:this.setting.id });
        this.formData = Object.assign(this.formData, detail);
        if(this.formData.procureDoc) {
          this.fileList = JSON.parse(this.formData.procureDoc)
        }
        this.$set(this.formData,'buyType',this.formData.buyType.toString())
        this.formData.procureTime = this.formData.procureTime.toString();
        this.formData.procureGoods.map((item, index) => {
          // 根据子集ID拼接物品分类列表
          let pIds = this.findParentIds(this.categoryOptions, item.baseCategoryId);
          pIds = pIds.reverse();
          item.baseCategoryIds = [...pIds, item.baseCategoryId];
          item.modelsIds = item.models.map((v) => v.baseGoodsModelsId);
          this.$set(this.formData.procureGoods[index],'modelsIds',item.models.map((v) => v.baseGoodsModelsId))
          this.getgoodsTemplate(item.baseCategoryId, index);
          this.getgoodsModel(item.baseGoodsTemplateId, index);
          return item
        });
      } else {
        this.type = 'create';
        this.formData.procureGoods.push(JSON.parse(JSON.stringify(this.goodsItem)));
      }
      this.visible = true;
@@ -318,6 +332,8 @@
      goodsTemplate({ categoryId: id || '' }).then((res) => {
        if (index || index == 0) {
          this.$set(this.formData.procureGoods[index], 'goodsOptions', res);
        }else {
          this.goodsTemplatelAll = res;
        }
      });
    },
@@ -333,6 +349,15 @@
      });
    },

    // 根据物品名称id获取名字
    getGoodsTemplateName(id) {
      let item = this.goodsTemplatelAll.find((v) => v.id == id);
      if (item) {
        return item.goodsName;
      }
      return;
    },

    // 根据规格型号id获取名字
    getGoodsModelsName(id) {
      let item = this.goodsModelAll.find((v) => v.id == id);
@@ -345,7 +370,11 @@
    // 物品分类选择
    categoryChange(e, index) {
      this.formData.procureGoods[index].goodsOptions = []
      this.formData.procureGoods[index].baseCategoryId = ''
      this.formData.procureGoods[index].baseGoodsTemplateId = ''
      this.formData.procureGoods[index].goodsTemplateName = ''
      this.formData.procureGoods[index].modelsOptions = []
      this.formData.procureGoods[index].modelsIds = []
      this.formData.procureGoods[index].models = []

      this.formData.procureGoods[index].baseCategoryId = e[e.length - 1];
      // 根据选中分类请求物品名称列表
@@ -358,6 +387,7 @@
      this.formData.procureGoods[index].modelsIds = []
      this.formData.procureGoods[index].models = []

      this.formData.procureGoods[index].goodsTemplateName = this.getGoodsTemplateName(e)
      // 根据选中物品名称id获取规格型号列表
      this.getgoodsModel(e, index);
    },
@@ -383,8 +413,9 @@
    },

    // 上传
    uploadChange(e) {
      console.log('uploadChange', e);
    uploadChange() {
      let arr = this.$refs.uploadRef.fileList
      this.formData.procureDoc = JSON.stringify(arr)
    },

    // 点击新增物品
@@ -402,7 +433,7 @@
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log('this.formData', this.formData);
          if (this.type == 'create') {
          if (!this.setting.id) {
            procureAdd(this.formData)
              .then((res) => {
                this.$message.success('保存成功！');
@@ -437,12 +468,12 @@
        procureTime: '', // 采购时间
        procureGoods: [],
      }
      this.visible = false;
      this.$emit('close')
    },

    // 通过子集id查到所以相关父级id并返回数组
    findParentIds(dataSource, nodeId) {
      const parentIds = []; // 用于存储所有父节点ID的数组
      const parentIds = [nodeId]; // 用于存储所有父节点ID的数组

      // 定义一个递归函数，用于遍历整棵树并查找子节点的所有父节点
      function traverse(node, nodeId) {
@@ -456,7 +487,7 @@
          for (const childNode of node.children) {
            if (traverse(childNode, nodeId)) {
              // 如果在子节点中找到了子节点的父节点，则将当前节点的ID添加到父节点ID数组中，并返回true表示已经找到了子节点
              parentIds.push(node.id);
              parentIds.unshift(node.id);
              return true;
            }
          }
@@ -479,33 +510,5 @@
};
</script>
<style scoped lang="scss">
.main-w {
  width: 88%;
}
.goods-card {
  position: relative;
  background: #f6f6f6;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #f9f9f9;
  margin-top: 20px;
  &:nth-of-type(1) {
    margin-top: 0;
  }
}
.btn-group {
  width: 140px;
  position: absolute;
  right: -160px;
  bottom: 0px;
  .el-button {
    margin-bottom: 10px;
    margin-left: 0;
    display: block;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
@import url(../../index.scss);
</style>

 admin-web/src/views/stock/procure/purchaseOrder/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="app-container">
  <div class="app-container stock-container">
    <el-container>
      <el-card class="box-card" style="width: 100%" shadow="never">
        <!--搜索条件-->
@@ -9,8 +9,10 @@
        <el-row style="margin-top: 15px">
          <el-col>
            <!--列表-->
            <my-button name="新增" @click="addtable" site="tools" size="medium" />
            <my-button name="导入" @click="importSetting.dialogShow = true" site="tools" size="medium" />
            <div class="table-tool-bar" style="margin-bottom: 15px">
              <my-button name="新增" @click="handleAdd" site="tools" size="medium" />
              <my-button name="导入" @click="importSetting.dialogShow = true" site="tools" size="medium" />
            </div>
            <div :style="{ 'overflow-y': 'auto', height: `${clientHeight - 320}px` }" v-loading="loading">
              <el-row class="card" :gutter="5">
                <el-col v-for="(item, index) in list" :key="index" class="cm-item">
@@ -20,7 +22,9 @@
                        <div class="card-header-left">
                          <span>入库单号：</span>
                          <span class="value">{{ item.businessFormCode }}</span>
                          <div class="states" :class="item.states==1?'':'states-income'">{{ item.states == 1 ? '待入库' : '已入库' }}</div>
                          <div class="states" :class="item.states == 1 ? '' : 'states-success'">
                            {{ item.states == 1 ? '待入库' : '已入库' }}
                          </div>
                        </div>
                        <div class="card-header-right">
                          <template v-if="item.states == 1">
@@ -47,20 +51,21 @@
                      <div class="one-hed">
                        <div class="box"><span class="span-two">机构：</span>{{ item.agencyId }}</div>
                        <div class="box"><span class="span-two">操作人：</span>{{ item.buyerName }}</div>
                        <div class="box"><span class="span-two">出库时间：</span>{{ item.procureTime }}</div>
                        <div class="box"><span class="span-two">入库时间：</span>{{ item.procureTime }}</div>
                        <div class="box">
                          <span class="span-two">采购时间：</span>{{ item.procureTime | formatTime }}
                        </div>
                        <div class="box">
                          <span class="span-two">入库时间：</span>{{ item.incomeTime | formatTime }}
                        </div>
                      </div>
                      <div class="card-end">
                        <div v-for="(just, index) in item.models" :key="index" class="item">
                          <div class="name">{{ just.baseGoodsModelsId }}</div>
                        <div v-for="(just, index) in item.fromProcureTemplateInfoList" :key="index" class="item">
                          <div class="name">{{ just.goodsTemplateName }}</div>
                          <div class="value-box">
                            <div class="value-box-item">
                              <span class="label">数量：</span>
                              <span class="value">{{ just.counts }}</span>
                            </div>
                            <div class="value-box-item">
                              <span class="label">金额：</span>
                              <span class="value">{{ just.price }}</span>
                              <span class="value">{{ just.count }}</span>
                              <span class="unit">{{ just.unit }}</span>
                            </div>
                          </div>
                        </div>
@@ -85,8 +90,19 @@
      </el-card>
    </el-container>
    <!--添加/编辑弹窗-->
    <edit ref="editRef"></edit>
    <detail ref="detailRef"></detail>
    <edit
      v-if="editSetting.show"
      :setting="editSetting"
      ref="editRef"
      @close="editSetting.show = false"
      @search="refreshData"
    ></edit>
    <detail
      v-if="detailSetting.show"
      :setting="detailSetting"
      @close="detailSetting.show = false"
      ref="detailRef"
    ></detail>
    <my-import
      :import-setting="importSetting"
      :dialog-show="importSetting.dialogShow"
@@ -97,12 +113,14 @@

<script>
import { procureList, procureDel, procureIncome } from '@/api/stock/procure/purchaseOrder';
import { getTree } from '@/api/baseSetting/finsystenant';
import MyButton from '@/components/myButton/myButton';
import SettingIplatform from '@/utils/settingIplatform';
import myImport from '@/views/components/myImport';
import edit from './edit';
import detail from './detail';
import { getBaseUrl } from '@/utils/base';
import * as DateFormatter from '@/utils/DateFormatter';

export default {
  name: 'index',
@@ -112,16 +130,6 @@
      loading: false,
      adddialog: false,
      list: [],
      formData: {
        tableData: [
          {
            projectName: '555',
          },
          {
            projectName: '444',
          },
        ],
      },
      // 搜索框
      items: [
        {
@@ -139,10 +147,11 @@
          defaultValue: '',
        },
        {
          type: 'select',
          dataIndex: 'name',
          type: 'cascader',
          dataIndex: 'agencyId',
          label: '机构',
          placeholder: '请选择',
          optionsConfig: { url: '/pc/fin/sys/tenant/select/tree_fin_tenant', props: null },
          defaultValue: '',
          options: [],
        },
@@ -176,13 +185,13 @@
        },
        {
          type: 'date-picker',
          dataIndex: 'val1',
          dataIndex: 'incomeTimeStart',
          label: '入库时间',
          defaultValue: '',
        },
        {
          type: 'date-picker',
          dataIndex: 'val2',
          dataIndex: 'incomeTimeEnd',
          label: '至',
          defaultValue: '',
        },
@@ -220,6 +229,11 @@
        orgId: '',
        show: false,
      },
      detailSetting: {
        title: '详情',
        id: '',
        show: false,
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
@@ -228,6 +242,12 @@
  computed: {
    clientHeight() {
      return document.documentElement.clientHeight;
    },
  },
  filters: {
    formatTime(time) {
      if (!time) return;
      return DateFormatter.LongToDateTime(time);
    },
  },
  created() {
@@ -247,6 +267,7 @@
        console.log(this.list);
      });
    },

    //导入
    importOrg() {
      this.importSetting.dialogShow = true;
@@ -261,61 +282,79 @@
      };
    },
    // 导出
    handleExport() {

    },
    handleExport() {},
    // 新增
    addtable() {
      this.$refs.editRef.open();
    handleAdd() {
      this.editSetting.id = null;
      this.editSetting.info = null;
      this.editSetting.title = '新增';
      this.editSetting.show = true;
    },
    // 编辑
    handleEdit(row) {
      this.$refs.editRef.open(row.id);
      this.editSetting.id = row.id;
      this.editSetting.info = null;
      this.editSetting.title = '编辑';
      this.editSetting.show = true;
    },
    // 详情
    handleDetail(row) {
      this.$refs.detailRef.open(row.id);
      this.detailSetting.id = row.id;
      this.detailSetting.show = true;
    },
    // 入库
    handleIncome(row) {
      this.$confirm(`您确定 单号：${row.businessFormCode}  入库吗?`, '采购入库')
        .then(function () {
          procureIncome({ id: row.id }).then((res) => {
      this.$confirm(`您确定 单号：${row.businessFormCode}  入库吗?`, '采购入库').then(() => {
        procureIncome({ id: row.id })
          .then((res) => {
            this.$message.success('入库成功！');
          });
        })
        .then((res) => {
          this.search();
        })
        .catch(() => {});
            this.search();
          })
          .catch(() => {});
      });
    },
    del(row) {
      this.$modal
        .confirm('是否确认删除入库单号为"' + row.businessFormCode + '"的数据吗？')
        .then(function () {
          procureDel({ id: row.id }).then((res) => {});
        })
        .then((res) => {
          this.$message.success('删除成功！');
          this.search();
        })
        .catch(() => {});
      this.$modal.confirm('是否确认删除入库单号为"' + row.businessFormCode + '"的数据吗？').then( () => {
        procureDel({ id: row.id })
          .then((res) => {
            this.$message.success('删除成功！');
            this.search();
          })
          .catch(() => {});
      });
    },
    // 分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.search({ pageNum: 1 });
      this.search(1);
    },
    handleCurrentChange(pageNum) {
      this.myTable.paging.page.pageNum = pageNum;
      this.search({ pageNum: pageNum });
      this.pageNum = pageNum;
      this.search(pageNum);
    },
    // 查询table列表
    search(pageNum) {
      if (pageNum) {
        this.pageNum = pageNum;
      }
      this.fetchData();
    },
    refreshData() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.search();
    },
    fifterForm(params) {
      this.filterFrom = Object.assign(this.filterFrom, params);
      if (this.filterFrom.incomeTimeStart) {
        this.filterFrom.incomeTimeStart = this.filterFrom.incomeTimeStart.replace(/\-/g, '');
      }
      if (this.filterFrom.incomeTimeEnd) {
        this.filterFrom.incomeTimeEnd = this.filterFrom.incomeTimeEnd.replace(/\-/g, '');
      }
      if (this.filterFrom.agencyId.length) {
        this.filterFrom.agencyId = this.filterFrom.agencyId[this.filterFrom.agencyId.length - 1];
      }
      this.search(1);
    },
  },
@@ -323,120 +362,5 @@
</script>

<style scoped lang="scss">
.ml-20 {
  margin-left: 20px;
}
.card {
  display: flex;
  flex-wrap: wrap;
  margin: 0px !important;
  .cm-item {
    width: 100%;
  }
  .cm-item ::v-deep .el-card__body {
    padding-bottom: 5px;
  }
}
.card-data {
  position: relative;
  margin-top: 8px;
  .card-container {
    .card-header {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f3f9fe;
      padding: 0 32px 0 15px;
      box-sizing: border-box;
    }
    .card-header-left {
      display: flex;
      align-items: center;
      color: #999999;
      font-family: 'Microsoft YaHei UI';
      font-size: 18px;
      font-weight: 700;
      .value {
        color: #3d3d3d;
      }

      .states {
        width: 54px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #f9675b99;
        background: #f9675b1a;
        font-family: 'Microsoft YaHei';
        color: #f9675b;
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        margin-left: 8px;
      }
      .states-income {
        border: 1px solid #39ad6199;
        background: #39ad610f;
        color: #39ad61;
      }
    }
    .one-hed {
      margin-top: 15px;
      padding: 0 32px 0 15px;
      box-sizing: border-box;
      .box {
        display: inline-block;
        margin-right: 20px;
      }
      .span-two {
        color: #83919e;
        font-size: 14px;
      }
    }
    .card-end {
      font-size: 14px;
      color: #3d3d3d;
      margin-top: 15px;
      display: flex;
      flex-wrap: wrap;
      font-family: 'Microsoft YaHei UI';
      padding: 0 16px;
      box-sizing: border-box;
      .item {
        width: 379px;
        height: 60px;
        padding: 8px 12px 9px 12px;
        box-sizing: border-box;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        background: #f9f9f9;
        margin-right: 15px;
        margin-bottom: 15px;
        &:last-child {
          margin-right: 0;
        }
        .name {
          height: 22px;
          line-height: 22px;
        }
        .value-box {
          display: flex;
          .value-box-item {
            margin-right: 20px;
            .label {
              color: #99999999;
              line-height: 22px;
            }
            .value {
              color: #ff3131;
            }
          }
        }
      }
    }
  }
}
@import url(../../index.scss);
</style>

 admin-web/src/views/stock/procure/receiptDetails/index.vue

@@ -10,11 +10,11 @@
          <el-row style="margin-top: 15px">
            <el-col>
              <!--列表-->
              <my-table-v2 ref="myTable" :filter="filterFrom" :table="table"/>
              <my-table-v2 ref="myTable" :filter="filterFrom" :table="table" />
            </el-col>
          </el-row>
          <!--添加/编辑弹窗-->
          <edit v-if="editSetting.show" :setting="editSetting" @close="editSetting.show = false" @search="search"/>
          <detail v-if="detailSetting.show" :setting="detailSetting" @close="detailSetting.show = false" />
        </el-card>
      </el-container>
    </el-container>
@@ -27,58 +27,72 @@
</template>

<script>
import MyTableV2 from "@/components/myTable/myTableV2";
import MyButton from "@/components/myButton/myButton";
import * as DateFormatter from '@/utils/DateFormatter';
import MyTableV2 from '@/components/myTable/myTableV2';
import MyButton from '@/components/myButton/myButton';
import SettingIplatform from '@/utils/settingIplatform';
import edit from './edit'
import * as finsystenant from '@/api/baseSetting/finsystenant'
import myImport from '@/views/components/myImport'
import {getBaseUrl} from '@/utils/base';
import detail from '../purchaseOrder/detail';
import * as finsystenant from '@/api/baseSetting/finsystenant';
import {goodsModel} from '@/api/stock/procure/purchaseOrder';
import myImport from '@/views/components/myImport';
import { getBaseUrl } from '@/utils/base';

export default {
  name: "index",
  components: {MyButton, MyTableV2, edit, myImport},
  name: 'index',
  components: { MyButton, MyTableV2, detail, myImport },
  data() {
    return {
      // 搜索框
      items: [
        {
          type: 'text',
          dataIndex: 'name',
          dataIndex: 'businessFormCode',
          label: '单号',
          placeholder: '请输入',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'text',
          dataIndex: 'goodsTemplateName',
          label: '物品名称',
          placeholder: '请输入',
          defaultValue: '',
        },
        {
          type: 'select',
          dataIndex: 'status',
          label: '类型',
          dataIndex: 'baseGoodsTemplateId',
          label: '规格型号',
          placeholder: '请选择',
          defaultValue: '1',
          options: [
            {
              label: '启用',
              value: '1'
            },
            {
              label: '禁用',
              value: '0'
            }
          ]
          defaultValue: '',
          options:[]
        },
        {
          type: 'cascader',
          dataIndex: 'agencyId',
          label: '机构',
          placeholder: '请选择',
          optionsConfig: { url: '/pc/fin/sys/tenant/select/tree_fin_tenant', props: null },
          defaultValue: '',
          options: [],
        },
        {
          type: 'text',
          dataIndex: 'name',
          label: '物品名称',
          placeholder: '请输入',
          defaultValue: ''
        },
        {
          type: 'text',
          dataIndex: 'name',
          dataIndex: 'buyerName',
          label: '创建人',
          placeholder: '请输入',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'date-picker',
          dataIndex: 'incomeTimeStart',
          label: '时间',
          defaultValue: '',
        },
        {
          type: 'date-picker',
          dataIndex: 'incomeTimeEnd',
          label: '至',
          defaultValue: '',
        },
      ],
      // 树数据
@@ -86,29 +100,28 @@
      // 搜索条件
      filterFrom: {
        tenantId: null,
        userName: null,
        userPhone: null,
        status: 1
        agencyId:[],
        status: 1,
      },
      // 导入
      importSetting: {
          dialogTitle: '导入',
          dialogShow: false,
          fileSettings: {
              data: {},
              uploadUrl: getBaseUrl()+"/pc/fin/sys/tenant/import", // 上传地址
              accept: '.xls', // 格式
              type: 'text', // 回显形式
              loading: false // 导入效果
          },
          /* 模板下载 */
          templateSettings: {
              templateName: '导入模板.xls', // 名称
              templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate' // 下载地址
          },
          onSuccess: null
        dialogTitle: '导入',
        dialogShow: false,
        fileSettings: {
          data: {},
          uploadUrl: getBaseUrl() + '/pc/fin/sys/tenant/import', // 上传地址
          accept: '.xls', // 格式
          type: 'text', // 回显形式
          loading: false, // 导入效果
        },
        /* 模板下载 */
        templateSettings: {
          templateName: '导入模板.xls', // 名称
          templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate', // 下载地址
        },
        onSuccess: null,
      },
      editSetting: {
      detailSetting: {
        title: '',
        id: '',
        orgId: '',
@@ -118,30 +131,39 @@
      table: {
        showIndex: true, // 是否显示序号
        expand: false, // 是否显示详情数据
        url: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/select/list', // 请求地址
        url: SettingIplatform.apiBaseURL + '/pc/whForm/procure/detail/list', // 请求地址
        // 工具条
        tools: {
          columnsCtrl: {// 列控制按钮
            show: false
          columnsCtrl: {
            // 列控制按钮
            show: false,
          },
          generalExport: {// 通用导出按钮
            show: false
          generalExport: {
            // 通用导出按钮
            show: false,
          },
          // 自定义工具条按钮
          custom: [
          ]
          custom: [],
        },
        // 列信息
        columns: [
          {title: '单号', field: 'code', align: 'center'},
          {title: '物品名称', field: 'lv', align: 'center', },
          {title: '规格型号', field: 'lv', align: 'center', },
          {title: '单价', field: 'summary', align: 'left',},
          {title: '入库数量', field: 'summary', align: 'left',},
          {title: '金额', field: 'summary', align: 'left',},
          {title: '所属机构', field: 'summary', align: 'left',},
          {title: '创建人', field: 'summary', align: 'left',},
          {title: '操作时间', field: 'summary', align: 'left',},
          { title: '单号', field: 'businessFormCode', align: 'center' },
          { title: '物品名称', field: 'goodsTemplateName', align: 'center' },
          { title: '规格型号', field: 'baseGoodsModelsName', align: 'center' },
          { title: '单价', field: 'price', align: 'center' },
          { title: '入库数量', field: 'counts', align: 'center' },
          { title: '金额', field: 'amount', align: 'center' },
          { title: '所属机构', field: 'agencyName', align: 'center' },
          { title: '创建人', field: 'buyerName', align: 'center' },
          {
            title: '操作时间',
            field: 'procureTime',
            align: 'center',
            width: 160,
            formatter: (row) => {
              return { value: DateFormatter.LongToDateTime(row.procureTime) };
            },
          },
        ],
        // 操作信息
        operation: {
@@ -151,7 +173,7 @@
            {
              title: '详情',
              events: (row) => {
                this.showAudit(row);
                this.showDetail(row);
              },
            },
          ],
@@ -163,118 +185,95 @@
            small: false,
            pageNum: 1,
            pageSize: 10,
            total: 0
          }
        }
            total: 0,
          },
        },
      },
    }
    };
  },
  created() {
    // 获取机构树
    this.initTreeData()
    // 搜索框规格型号
    goodsModel().then(res=>{
      this.items.forEach(v=>{
        if(v.label=='规格型号'){
          v.options = res.map(item=>{
            item.label = item.modelName,
            item.value = item.id
            return item
          })
        }
      })
    })
  },
  methods: {
    //导入
    importOrg() {
        this.importSetting.dialogShow = true
        this.importSetting.onSuccess = (response, callBack) => {
            if (response.code===1){
              this.$message.success(response.msg)
              this.search(1)
            }else{
              this.$message.warning(response.msg)
            }
            callBack()
      this.importSetting.dialogShow = true;
      this.importSetting.onSuccess = (response, callBack) => {
        if (response.code === 1) {
          this.$message.success(response.msg);
          this.search(1);
        } else {
          this.$message.warning(response.msg);
        }
    },
    // 左侧树初始化
    initTreeData() {
      finsystenant.getTree().then(res => {
        const content = res || []
        this.treeDataList.splice(0, this.treeDataList.length)
        this.treeDataList = content
        if (content.length > 0) {
          this.importSetting.fileSettings.data = {pid: content[0].id}
        }
      })
        callBack();
      };
    },
    updState(row) {
      let vm = this
      let text = row.status == 0 ? "启用" : "禁用";
      let vm = this;
      let text = row.status == 0 ? '启用' : '禁用';
      vm.$modal.confirm('确认要' + text + '"' + row.name + '"吗？').then(function () {
        let params = Object.assign({}, row)
        params.status = row.status == 1 ? 0 : 1
        finsystenant.edit(params).then(res => {
        let params = Object.assign({}, row);
        params.status = row.status == 1 ? 0 : 1;
        finsystenant.edit(params).then((res) => {
          if (res) {
            row.status = row.status === 1 ? 0 : 1
            vm.$modal.msgSuccess(text + "成功");
            vm.search()
            row.status = row.status === 1 ? 0 : 1;
            vm.$modal.msgSuccess(text + '成功');
            vm.search();
          }
        })
      })
        });
      });
    },
    del(row) {
      this.$modal
        .confirm('是否确认删除名称为"' + row.name + '"的机构吗？')
        .then(function () {
          finsystenant.del({id: row.id}).then((res) => {
          });
          finsystenant.del({ id: row.id }).then((res) => {});
        })
        .then((res) => {
          this.$message.success('删除成功！');
          this.search()
          this.search();
        })
        .catch(() => {
        });
        .catch(() => {});
    },
    showAdd() {
      // if (!this.editSetting.orgId) {
      //   this.$message.warning('请先选择左侧机构')
      // } else {
        this.editSetting.id = null;
        this.editSetting.info = null;
        this.editSetting.title = '新增';
        this.editSetting.show = true;
      // }
    },
    showAudit(row) {
      this.editSetting.id = row.id;
      this.editSetting.info = JSON.stringify(row);
      this.editSetting.title = '编辑';
      this.editSetting.show = true;
    },
    nodeClick(param) {
      param = param || {}
      this.p = Object.assign({}, {
        id: param.id,
        name: param.name
      })
      if (this.p.id != undefined && this.p.id != null) {
        this.filterFrom.tenantId = this.p.id
        this.editSetting.orgId = this.p.id
      } else {
        this.filterFrom.tenantId = null
        this.editSetting.orgId = null
      }
      this.importSetting.fileSettings.data = {pid: param.id}
      this.search(1)
    showDetail(row) {
      this.detailSetting.id=row.businessId
      this.detailSetting.title='详情'
      this.detailSetting.show=true
    },
    // 查询table列表
    search(pageNum) {
      if (pageNum != undefined) {
        this.$refs.myTable.search(pageNum)
        this.$refs.myTable.search(pageNum);
      } else {
        this.$refs.myTable.search()
        this.$refs.myTable.search();
      }
    },
    fifterForm(params) {
      this.filterFrom = Object.assign(this.filterFrom, params)
      this.search(1)
    }
  }
}
      this.filterFrom = Object.assign(this.filterFrom, params);
      if (this.filterFrom.incomeTimeStart) {
        this.filterFrom.incomeTimeStart = this.filterFrom.incomeTimeStart.replace(/\-/g, '');
      }
      if (this.filterFrom.incomeTimeEnd) {
        this.filterFrom.incomeTimeEnd = this.filterFrom.incomeTimeEnd.replace(/\-/g, '');
      }
      if (params.agencyId&&params.agencyId.length) {
        this.filterFrom.agencyId = params.agencyId[params.agencyId.length - 1];
      }
      this.search(1);
    },
  },
};
</script>

<style scoped>

</style>
<style scoped></style>

 admin-web/src/views/stock/scrap/itemScrapping/detail.vue

New file
@@ -0,0 +1,120 @@
<template>
  <el-dialog
    title="详情"
    width="60%"
    :modal="true"
    :visible.sync="visible"
    :top="'15vh'"
    :close-on-click-modal="false"
    :append-to-body="true"
    :destroy-on-close="true"
    @close="close"
    class="stock-detail"
  >
    <el-row :gutter="20">
      <el-col :span="8">
        <span>入库单号：</span>
        <span>{{ detail.businessFormCode }}</span>
      </el-col>
      <el-col :span="8">
        <span>入库仓库：</span>
        <span>{{ detail.goodsTemplateName }}</span>
      </el-col>
      <el-col :span="8">
        <span>所属机构：</span>
        <span>{{ detail.agencyId }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8">
        <span>状态：</span>
        <span>{{ detail.states == 1 ? '待入库' : '已入库' }}</span>
      </el-col>
      <el-col :span="8">
        <span>创建人：</span>
        <span>{{ detail.buyerName }}</span>
      </el-col>
      <el-col :span="8">
        <span>入库时间：</span>
        <span>{{ detail.time }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col class="img-row" :span="24">
        <span>采购手续照片：</span>
        <div class="img-box"></div>
      </el-col>
    </el-row>
    <div class="goods-card" v-for="(goodsItem, goodsIndex) in detail.procureGoods" :key="goodsIndex">
      <el-row :gutter="20">
        <el-col :span="8">
          <span>物品分类：</span>
          <span>{{ goodsItem.baseCategoryId }}</span>
        </el-col>
        <el-col :span="8">
          <span>物品名称：</span>
          <span>{{ goodsItem.baseGoodsTemplateId }}</span>
        </el-col>
        <el-col :span="8">
          <span>供货商：</span>
          <span>{{ goodsItem.supplier }}</span>
        </el-col>
      </el-row>
      <el-table :data="goodsItem.models" :stripe="true" style="margin-top: 20px">
        <el-table-column prop="baseGoodsModelsId" label="规格型号" align="center">
          <template slot-scope="scope">
            {{ scope.row.baseGoodsModelsId }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center">
          <template slot-scope="scope">
            {{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="现有库存" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="counts" label="出库数量" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.counts"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<script>
import { procureDetail } from '@/api/stock/procure/purchaseOrder';
export default {
  data() {
    return {
      visible: false,
      detail: {
        businessFormCode: '',
        goodsTemplateName: '',
        agencyId: '',
        states: '',
        createName: '',
        time: '',
        procureGoods: [{}, {}],
      },
    };
  },
  methods: {
    open(id) {
      this.visible = true;
      procureDetail({ id }).then((res) => {
        this.detail = res;
      });
    },
    close() {
      this.visible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import url(../../index.scss);
</style>

 admin-web/src/views/stock/scrap/itemScrapping/edit.vue

New file
@@ -0,0 +1,486 @@
<template>
  <el-dialog
    :title="`${type == 'create' ? '新增' : '编辑'}${title}`"
    width="60%"
    :modal="true"
    :visible.sync="visible"
    :top="'15vh'"
    :close-on-click-modal="false"
    :append-to-body="true"
    :destroy-on-close="true"
    @close="close"
    class="stock-edit"
  >
    <el-form class="form" ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
      <div class="main-w">
        <el-row :gutter="24" class="headerHeight">
          <el-col :span="12">
            <el-form-item label="入库仓库" prop="warehouseId">
              <el-select v-model="formData.warehouseId" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in warehouses" :key="item.id" :label="item.warehouseName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购时间" prop="procureTime">
              <el-date-picker
                v-model="formData.procureTime"
                type="datetime"
                value="yyyy-MM-dd HH:mm:ss"
                value-format="yyyyMMddHHmmss"
                placeholder="请选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="headerHeight">
          <el-col :span="24">
            <el-form-item label="采购入库手续" prop="procureDoc">
              <upload :settings="uploadSettings" @on-change="uploadChange"></upload>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="goods-card" v-for="(goodsItem, goodsIndex) in formData.procureGoods" :key="goodsIndex">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="物品分类"
                :prop="`procureGoods[${goodsIndex}].baseCategoryIds`"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change',
                }"
              >
                <el-cascader
                  v-model="goodsItem.baseCategoryIds"
                  :options="categoryOptions"
                  :props="{ value: 'id' }"
                  @change="categoryChange($event, goodsIndex)"
                  style="width: 100%"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="物品名称"
                :prop="`procureGoods[${goodsIndex}].baseGoodsTemplateId`"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change',
                }"
              >
                <el-select
                  v-model="goodsItem.baseGoodsTemplateId"
                  placeholder="请先择物品分类"
                  filterable
                  :disabled="!goodsItem.baseCategoryId"
                  style="width: 100%"
                  @change="goodsTemplateChange($event, goodsIndex)"
                >
                  <el-option
                    v-for="item in goodsItem.goodsOptions"
                    :key="item.id"
                    :label="item.goodsName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="规格型号"
                :prop="`procureGoods[${goodsIndex}].modelsIds`"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change',
                }"
              >
                <el-select
                  v-model="goodsItem.modelsIds"
                  multiple
                  placeholder="请先择物品名称"
                  :disabled="!goodsItem.baseCategoryId"
                  @change="modelChange($event, goodsIndex)"
                  @remove-tag="modelRemoveTag($event, goodsIndex)"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in goodsItem.modelsOptions"
                    :key="item.id"
                    :label="item.modelName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供货商" prop="supplier">
                <el-input v-model="goodsItem.supplier" clearable maxlength="20" show-word-limit />
              </el-form-item>
            </el-col>
          </el-row>
          <el-table :data="goodsItem.models" :stripe="true">
            <el-table-column prop="baseGoodsModelsId" label="规格型号" align="center">
              <template slot-scope="scope">
                {{ getGoodsModelsName(scope.row.baseGoodsModelsId) }}
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center">
              <template slot-scope="scope">
                {{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column prop="price" label="单价（元）" align="center">
              <template slot-scope="scope">
                <el-input type="number" v-model="scope.row.price"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="counts" label="采购数量" align="center">
              <template slot-scope="scope">
                <el-input type="number" v-model="scope.row.counts"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="btn-group">
            <el-button
              v-if="formData.procureGoods.length > 1"
              name="移除"
              type="danger"
              plain
              size="mini"
              @click="removeGoods(goodsIndex)"
              >移除</el-button
            >
            <el-button
              v-if="formData.procureGoods.length - 1 == goodsIndex"
              name="新增物品"
              type="primary"
              plain
              size="mini"
              @click="addGoods"
              >新增物品</el-button
            >
          </div>
        </div>
      </div>
    </el-form>
    <div slot="footer" align="center" class="dialog-footer">
      <el-button name="确定" site="form" type="primary" @click="handleSubmit">确定</el-button>
      <el-button name="取消" site="form" @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  goodsTemplate,
  procureAdd,
  procureEdit,
  selectTenantWarehouse,
  goodsModel,
  procureDetail,
} from '@/api/stock/procure/purchaseOrder';
import { getTree } from '@/api/foudation/classification';
import MyButton from '@/components/myButton/myButton';
import winMd from '@/components/win/win-md';
import upload from '@/components/upload/index';
import { getUploadUrl } from '@/utils/base';

import SettingIplatform from '../../../../../public/static/config';

export default {
  components: { MyButton, winMd, upload },
  props: {
    title: {
      type: String,
      default: '采购入库',
    },
  },
  data() {
    return {
      type: 'create',
      visible: false,
      loading: false,
      warehouses: [], // 入库仓库列表
      categoryOptions: [], // 物品分类列表
      modelList: [], //型号列表
      formData: {
        warehouseId: '', // 入库仓库id
        procureTime: '', // 采购时间
        procureGoods: [],
      },
      goodsItem: {
        whFormProcureId: '', // 采购单ID
        baseCategoryIds: '', // 分类编号数组
        baseCategoryId: '', // 分类编号
        baseGoodsTemplateId: '', // 物品模版编号
        goodsTemplateName: '', // 物品模版名称
        supplier: '', // 供应商
        sort: '', // 显示顺序
        goodsOptions: [], // 物品列表select
        modelsOptions: [], //规格型号select
        models: [], // 物品名称
        modelsIds: [], //规格型号
      },
      modelsItem: {
        baseGoodsModelsId: '', // 规格型号编号
        price: 0, // 单价(采购需要，调拨不需要)
        counts: 0, // 操作数量
        supplier: '', // 供应商
        unit: null, //单位
      },
      rules: {
        warehouseId: [{ required: true, message: '请选择', trigger: 'change' }],
        procureTime: [{ required: true, message: '请选择', trigger: 'change' }],

        // procureDoc: [{ required: true, message: '请上传', trigger: 'change' }],
        baseCategoryIds: [{ required: true, message: '请选择', trigger: 'change' }],
        baseGoodsTemplateId: [{ required: true, message: '请选择', trigger: 'change' }],
        modelsIds: [{ required: true, message: '请选择', trigger: 'change' }],
      },

      uploadSettings: {
        title: '上传',
        max: 20, // 最大大小，单位M
        num: 2, // 支持上传图片个数
        accept: '.jpg,.png', // 限制格式
        tip: '', // 提示 默认：`只能上传${this.defaultSettings.num}个${this.defaultSettings.accept}文件，且不超过${this.defaultSettings.max}kb`
        uploadUrl: getUploadUrl(), // 上传路径
        multiple: true, // 是否支持批量上传
        disabled: false, // 是否禁用
        type: 'text', // text/picture
      },
    };
  },
  created() {},
  methods: {
    async open(id) {
      this.getWarehouseList();
      this.getgoodsModel();
      // 获取物品分类列表
      const treeRes = await getTree();
      this.categoryOptions = this.removeEmptyChildren(treeRes);
      if (id) {
        this.type = 'edit';
        const detail = await procureDetail({ id });
        console.log('procureDetail', detail);
        this.formData = Object.assign(this.formData, detail);
        this.formData.procureTime = this.formData.procureTime.toString();
        this.formData.procureGoods.map((item, index) => {
          // 根据子集ID拼接物品分类列表
          let pIds = this.findParentIds(this.categoryOptions, item.baseCategoryId);
          pIds = pIds.reverse();
          item.baseCategoryIds = [...pIds, item.baseCategoryId];
          item.modelsIds = item.models.map((v) => v.baseGoodsModelsId);
          this.getgoodsTemplate(item.baseCategoryId, index);
          this.getgoodsModel(item.baseGoodsTemplateId, index);
        });
      } else {
        this.type = 'create';
        this.formData.procureGoods.push(JSON.parse(JSON.stringify(this.goodsItem)));
      }
      this.visible = true;
    },

    // 获取入库仓库列表
    getWarehouseList() {
      selectTenantWarehouse()
        .then((res) => {
          this.warehouses = res;
          if (this.warehouses.length && !this.formData.warehouseId) {
            // 默认选中第一个仓库
            this.formData.warehouseId = this.warehouses[0].id;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    removeEmptyChildren(arr) {
      arr.forEach((item) => {
        if (!item.children || !item.children.length) {
          delete item.children;
        } else {
          this.removeEmptyChildren(item.children);
        }
      });
      return arr;
    },

    // 获取物品名称列表
    getgoodsTemplate(id, index) {
      goodsTemplate({ categoryId: id || '' }).then((res) => {
        if (index || index == 0) {
          this.$set(this.formData.procureGoods[index], 'goodsOptions', res);
        }
      });
    },

    // 规格型号
    getgoodsModel(id, index) {
      goodsModel({ goodsTemplatesId: id || '' }).then((res) => {
        if (index || index == 0) {
          this.$set(this.formData.procureGoods[index], 'modelsOptions', res);
        } else {
          this.goodsModelAll = res;
        }
      });
    },

    // 根据规格型号id获取名字
    getGoodsModelsName(id) {
      let item = this.goodsModelAll.find((v) => v.id == id);
      if (item) {
        return item.modelName;
      }
      return;
    },

    // 物品分类选择
    categoryChange(e, index) {
      this.formData.procureGoods[index].goodsOptions = []
      this.formData.procureGoods[index].baseGoodsTemplateId = ''
      this.formData.procureGoods[index].goodsTemplateName = ''

      this.formData.procureGoods[index].baseCategoryId = e[e.length - 1];
      // 根据选中分类请求物品名称列表
      this.getgoodsTemplate(e[e.length - 1], index);
    },

    // 物品名称列表
    goodsTemplateChange(e, index) {
      this.formData.procureGoods[index].modelsOptions = []
      this.formData.procureGoods[index].modelsIds = []
      this.formData.procureGoods[index].models = []

      this.formData.goodsTemplateName = this.getGoodsModelsName(e)
      // 根据选中物品名称id获取规格型号列表
      this.getgoodsModel(e, index);
    },

    // 规格型号选择
    modelChange(e, index) {
      let arr = [...this.formData.procureGoods[index].models];
      let str = JSON.stringify(arr);
      e.forEach((item) => {
        if (str.indexOf(item) == -1) {
          let temp = this.goodsModelAll.find((v) => v.id == item);
          arr.push({ ...this.modelsItem, baseGoodsModelsId: item, unit: temp.unit });
        }
      });
      this.formData.procureGoods[index].models = arr;
    },

    // 规格型号移除
    modelRemoveTag(e, index) {
      let arr = this.formData.procureGoods[index].models;
      let delIndex = arr.findIndex((v) => v.baseGoodsModelsId == e);
      this.formData.procureGoods[index].models.splice(delIndex, 1);
    },

    // 上传
    uploadChange(e) {
      console.log('uploadChange', e);
    },

    // 点击新增物品
    addGoods() {
      this.formData.procureGoods.push(JSON.parse(JSON.stringify(this.goodsItem)));
    },

    // 点击移除
    removeGoods(index) {
      this.formData.procureGoods.splice(index, 1);
    },

    // 提交
    handleSubmit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log('this.formData', this.formData);
          if (this.type == 'create') {
            procureAdd(this.formData)
              .then((res) => {
                this.$message.success('保存成功！');
                this.close();
                this.$emit('search');
              })
              .catch((err) => {
                console.log('create err', err);
                this.$message.error('保存失败');
              });
          } else {
            procureEdit(this.formData)
              .then((res) => {
                this.$message.success('保存成功！');
                this.close();
                this.$emit('search');
              })
              .catch((err) => {
                console.log('edit err', err);
                this.$message.error('保存失败');
              });
          }
        } else {
          this.$message.error('校验未通过，请检查。');
        }
      });
    },

    close() {
      this.formData ={
        warehouseId: '', // 入库仓库id
        procureTime: '', // 采购时间
        procureGoods: [],
      }
      this.visible = false;
    },

    // 通过子集id查到所以相关父级id并返回数组
    findParentIds(dataSource, nodeId) {
      const parentIds = []; // 用于存储所有父节点ID的数组

      // 定义一个递归函数，用于遍历整棵树并查找子节点的所有父节点
      function traverse(node, nodeId) {
        if (node.id === nodeId) {
          // 如果当前节点的ID等于子节点的ID，则表示已经找到了子节点，可以开始向上查找父节点
          return true; // 返回true表示已经找到了子节点
        }

        if (node.children) {
          // 如果当前节点有子节点，则继续遍历子节点
          for (const childNode of node.children) {
            if (traverse(childNode, nodeId)) {
              // 如果在子节点中找到了子节点的父节点，则将当前节点的ID添加到父节点ID数组中，并返回true表示已经找到了子节点
              parentIds.push(node.id);
              return true;
            }
          }
        }

        return false; // 如果当前节点不是子节点的父节点，则返回false
      }

      // 从根节点开始遍历整棵树，并调用递归函数查找子节点的所有父节点
      for (const node of dataSource) {
        if (traverse(node, nodeId)) {
          // 如果在当前节点的子树中找到了子节点的父节点，则直接退出循环
          break;
        }
      }

      return parentIds; // 返回所有父节点ID的数组
    },
  },
};
</script>
<style scoped lang="scss">
@import url(../../index.scss);
</style>

 admin-web/src/views/stock/scrap/itemScrapping/index.vue

@@ -1,118 +1,79 @@
<template>
  <div class="app-container">
  <div class="app-container stock-container">
    <el-container>
      <el-container>
        <el-card class="box-card" style="width: 100%" shadow="never">
          <!--搜索条件-->
          <div class="filter-container">
            <my-search ref="searchBar" :items="items" @search="fifterForm"></my-search>
          </div>
          <el-row style="margin-top: 15px">
            <el-col>
              <!--列表-->
              <my-button name="新增" @click="addtable" site="form" />
              <div :style="{'overflow-y': 'auto', height:`${clientHeight - 320}px`}">
                    <el-row class="card"
                            :gutter="5">
                        <el-col v-for="(item, index) in proData" :key="index" class="cm-item">
                          <el-card class="card-data">
                            <div class="card-container">
                              <div class="hed-one">出库单号：{{ item.order_no }}</div>
                              <div class="one-hed">
                                <div class="box"><span class="span-two">机构：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">操作人：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">出库时间：</span>{{ item.customer_name }}</div>
                              </div>
                              <div class="card-end">
                                <div v-for="(just, index) in item.data" class="two-end">
                                  <div class="item"><span>{{ just.order_no }}：</span>{{ just.customer_name }}</div>
                                </div>
                              </div>
      <el-card class="box-card" style="width: 100%" shadow="never">
        <!--搜索条件-->
        <div class="filter-container">
          <my-search ref="searchBar" :items="items" @search="fifterForm"></my-search>
        </div>
        <el-row style="margin-top: 15px">
          <el-col>
            <!--列表-->
            <div :style="{ 'overflow-y': 'auto', height: `${clientHeight - 320}px` }" v-loading="loading">
              <el-row class="card" :gutter="5">
                <el-col v-for="(item, index) in list" :key="index" class="cm-item">
                  <el-card class="card-data">
                    <div class="card-container">
                      <div class="card-header">
                        <div class="card-header-left">
                          <span>调拨单号：</span>
                          <span class="value">{{ item.businessFormCode }}</span>
                          <div class="states" :class="item.states == 1 ? '' : 'states-success'">
                            {{ item.states == 1 ? '待调拨' : '已调拨' }}
                          </div>
                        </div>
                        <div class="card-header-right">
                          <el-button site="form" type="success" size="mini" @click="handleExport(item)"
                            >导出调拨出库单</el-button
                          >
                          <el-button name="查看详情" site="form" type="info" size="mini" @click="handleDetail(item)"
                            >查看详情</el-button
                          >
                        </div>
                      </div>
                      <div class="one-hed">
                        <div class="box"><span class="span-two">接收机构：</span>{{ item.agencyId }}</div>
                        <div class="box"><span class="span-two">申请人：</span>{{ item.buyerName }}</div>
                        <div class="box"><span class="span-two">申请调拨时间：</span>{{ item.procureTime }}</div>
                        <div class="box"><span class="span-two">接收时间：</span>{{ item.procureTime }}</div>
                        <div class="box"><span class="span-two">调拨机构：</span>{{ item.procureTime }}</div>
                        <div class="box"><span class="span-two">调拨人：</span>{{ item.procureTime }}</div>
                        <div class="box"><span class="span-two">调拨时间：</span>{{ item.procureTime }}</div>
                      </div>
                      <div class="card-end">
                        <div v-for="(just, index) in item.models" :key="index" class="item">
                          <div class="name">{{ just.baseGoodsModelsId }}</div>
                          <div class="value-box">
                            <div class="value-box-item">
                              <span class="label">数量：</span>
                              <span class="value">{{ just.counts }}</span>
                              <span class="unit">{{ just.unit }}</span>
                            </div>
                            <div class="card-but">
                              <my-button name="查看详情"   site="form" />
                              <my-button name="导出出库单" site="form" />
                            </div>
                          </el-card>
                        </el-col>
                    </el-row>
              </div>
              <el-pagination
                :small="false"
                :current-page="1"
                :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400, 500]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="0"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </el-col>
          </el-row>
          <!--添加/编辑弹窗-->
          <el-dialog title="新增出库"  :close-on-click-modal="false" :visible.sync="adddialog" width="60%" >
            <el-form ref="ruleForm" :model="formData" class="demo-ruleForm" label-width="100px">
              <el-row :gutter="24" class="headerHeight">
                  <el-col :span="12">
                    <el-form-item label="仓库名称" prop="name">
                      <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="仓库名称" prop="name">
                      <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24" class="headerHeight">
                  <el-col :span="24">
                    <el-form-item label="出库手续" prop="name">                      
                      仅允许导入xls、xlsx格式文件
                    </el-form-item>
                  </el-col>
                </el-row>
                <div style="position: relative;">
                  <div style="background-color: #F9F9F9;width: 90%;">
                  <el-row :gutter="24" class="">
                    <el-col :span="12">
                      <el-form-item label="仓库名称" prop="name">
                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="仓库名称" prop="name">
                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24" class="">
                    <el-col :span="12">
                      <el-form-item label="仓库名称" prop="name">
                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-table :data="formData.tableData" height="100%"  :stripe="true">
                    <el-table-column prop="projectName" label="规格型号" align="center"> </el-table-column>
                    <el-table-column prop="time1" label="单位"  align="center"> </el-table-column>
                    <el-table-column prop="unit" label="现有库存" align="center"> </el-table-column>
                    <el-table-column prop="time2" label="出库数量"  align="center"> </el-table-column>
                  </el-table>
                  </div>
                  <div style="position: absolute;right: 0;top: 152px;">
                    <my-button style="display: block;margin-left: 10px;margin-bottom: 5px;" name="移除" site="form"/>
                    <my-button name="新增物品" site="form"/>
                  </div>
                </div>
            </el-form>
            <div slot="footer" align="center" class="dialog-footer">
              <my-button name="确定" site="form" />
              <my-button name="取消" site="form" @click="adddialog = false"/>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-dialog>
        </el-card>
      </el-container>
            <el-pagination
              :small="false"
              :current-page="pageNum"
              :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400, 500]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </el-card>
    </el-container>
    <!--添加/编辑弹窗-->
    <edit ref="editRef"></edit>
    <detail ref="detailRef"></detail>
    <my-import
      :import-setting="importSetting"
      :dialog-show="importSetting.dialogShow"
@@ -122,196 +83,86 @@
</template>

<script>
import MyButton from "@/components/myButton/myButton";
import { procureList, procureDel, procureIncome } from '@/api/stock/procure/purchaseOrder';
import MyButton from '@/components/myButton/myButton';
import SettingIplatform from '@/utils/settingIplatform';
import myImport from '@/views/components/myImport'
import {getBaseUrl} from '@/utils/base';
import myImport from '@/views/components/myImport';
import edit from './edit';
import detail from './detail';
import { getBaseUrl } from '@/utils/base';

export default {
  name: "index",
  components: {MyButton, myImport},
  name: 'index',
  components: { MyButton, myImport, edit, detail },
  data() {
    return {
      
      loading: false,
      adddialog: false,
      formData:{
        tableData:[
          {
            projectName:'555'
          },
          {
            projectName:'444'
          }
        ],
      },
      list: [],
      // 搜索框
      items: [
        {
          type: 'text',
          dataIndex: 'name',
          label: '出库单号',
          dataIndex: 'businessFormCode',
          label: '调拨单号',
          placeholder: '请输入',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'text',
          dataIndex: 'name',
          dataIndex: 'goodsTemplateName',
          label: '物品名称',
          placeholder: '可模糊搜索',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'select',
          dataIndex: 'name',
          label: '机构',
          placeholder: '请选择',
          defaultValue: '',
          options: [],
        },
        {
          type: 'text',
          dataIndex: 'name',
          dataIndex: 'buyerName',
          label: '创建人',
          placeholder: '请输入',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'select',
          dataIndex: 'states',
          label: '状态',
          placeholder: '请选择',
          defaultValue: '',
          options: [
            {
              label: '全部',
              value: '',
            },
            {
              label: '待调拨',
              value: '1',
            },
            {
              label: '已调拨',
              value: '2',
            },
          ],
        },
        {
          type: 'date-picker',
          dataIndex: 'val1',
          label: '出库时间',
          defaultValue: ''
          label: '调拨时间',
          defaultValue: '',
        },
        {
          type: 'date-picker',
          dataIndex: 'val2',
          label: '至',
          defaultValue: ''
          defaultValue: '',
        },
        // {
        //   type: 'select',
        //   dataIndex: 'status',
        //   label: '状态',
        //   placeholder: '请选择',
        //   defaultValue: '1',
        //   options: [
        //     {
        //       label: '启用',
        //       value: '1'
        //     },
        //     {
        //       label: '禁用',
        //       value: '0'
        //     }
        //   ]
        // }
      ],
      proData: [
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
        },
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
        },
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
        },
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        },
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        },
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        },
        {
          order_no:'55555',
          customer_name:'666',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        }
      ],
      // 树数据
      treeDataList: [],
@@ -320,25 +171,25 @@
        tenantId: null,
        userName: null,
        userPhone: null,
        status: 1
        states: null,
      },
      // 导入
      importSetting: {
          dialogTitle: '导入',
          dialogShow: false,
          fileSettings: {
              data: {},
              uploadUrl: getBaseUrl()+"/pc/fin/sys/tenant/import", // 上传地址
              accept: '.xls', // 格式
              type: 'text', // 回显形式
              loading: false // 导入效果
          },
          /* 模板下载 */
          templateSettings: {
              templateName: '导入模板.xls', // 名称
              templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate' // 下载地址
          },
          onSuccess: null
        dialogTitle: '导入',
        dialogShow: false,
        fileSettings: {
          data: {},
          uploadUrl: getBaseUrl() + '/pc/fin/sys/tenant/import', // 上传地址
          accept: '.xls', // 格式
          type: 'text', // 回显形式
          loading: false, // 导入效果
        },
        /* 模板下载 */
        templateSettings: {
          templateName: '导入模板.xls', // 名称
          templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate', // 下载地址
        },
        onSuccess: null,
      },
      editSetting: {
        title: '',
@@ -346,104 +197,106 @@
        orgId: '',
        show: false,
      },
    }
      pageNum: 1,
      pageSize: 10,
      total: 0,
    };
  },
  computed: {
    clientHeight () {
      return document.documentElement.clientHeight
    clientHeight() {
      return document.documentElement.clientHeight;
    },
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSizeChange(){},
    handleCurrentChange(){},
    fetchData() {
      this.loading = true;
      procureList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.filterFrom,
      }).then((res) => {
        this.list = res.datas;
        this.total = res.totalRows;
        this.loading = false;
        console.log(this.list);
      });
    },
    //导入
    importOrg() {
        this.importSetting.dialogShow = true
        this.importSetting.onSuccess = (response, callBack) => {
            if (response.code===1){
              this.$message.success(response.msg)
              this.search(1)
            }else{
              this.$message.warning(response.msg)
            }
            callBack()
      this.importSetting.dialogShow = true;
      this.importSetting.onSuccess = (response, callBack) => {
        if (response.code === 1) {
          this.$message.success(response.msg);
          this.search(1);
        } else {
          this.$message.warning(response.msg);
        }
        callBack();
      };
    },
   
    // 导出
    handleExport() {},
    // 新增
    addtable() {
      this.adddialog = true
      this.$refs.editRef.open();
    },
    // 编辑
    handleEdit(row) {
      this.$refs.editRef.open(row.id);
    },
    // 详情
    handleDetail(row) {
      this.$refs.detailRef.open(row.id);
    },
    // 调拨
    handleIncome(row) {
      this.$confirm(`您确定 单号：${row.businessFormCode}  调拨吗?`, '采购调拨')
        .then(function () {
          procureIncome({ id: row.id }).then((res) => {
            this.$message.success('调拨成功！');
          });
        })
        .then((res) => {
          this.search();
        })
        .catch(() => {});
    },
    del(row) {
      this.$modal
        .confirm('是否确认删除调拨单号为"' + row.businessFormCode + '"的数据吗？')
        .then(function () {
          procureDel({ id: row.id }).then((res) => {});
        })
        .then((res) => {
          this.$message.success('删除成功！');
          this.search();
        })
        .catch(() => {});
    },
    // 分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.search({ pageNum: 1 });
    },
    handleCurrentChange(pageNum) {
      this.myTable.paging.page.pageNum = pageNum;
      this.search({ pageNum: pageNum });
    },
    // 查询table列表
    search(pageNum) {
      if (pageNum != undefined) {
        // this.$refs.myTable.search(pageNum)
      } else {
        // this.$refs.myTable.search()
      }
      this.fetchData();
    },
    fifterForm(params) {
      console.log(params,'555');
      this.filterFrom = Object.assign(this.filterFrom, params)
      this.search(1)
    }
  }
}
      this.filterFrom = Object.assign(this.filterFrom, params);
      this.search(1);
    },
  },
};
</script>

<style scoped>
.card {
    display: flex;
    flex-wrap: wrap;
    margin: 0px !important;
    .cm-item {
        width: 100%;
    }
    .cm-item /deep/ .el-card__body {
        padding: 10px;
    }
}
.card-data{
  margin-top: 8px;
  .card-container{
    display: inline-block; 
    width: 70%;
    .hed-one{
      color: #2298EE;
      font-size: 18px;
    }
    .one-hed{
      margin-top: 15px;
      .box{
        display: inline-block;  
        margin-right: 20px;  
      }
    }
    .span-two{
      color: #83919e;
      font-size: 14px;
    }
    .card-end{
      font-size: 14px;
      color: #3d3d3d;
      margin-top: 15px;
      display: flex;  
      flex-wrap: wrap; 
      .two-end{
        width: calc(33.33% - 20px); 
        margin-bottom: 15px; 
      }
    }
    
  }
  .card-but{
    display: inline-block; 
  }
  .end{
    display: inline-block;  
  }
  
}

<style scoped lang="scss">
@import url(../../index.scss);
</style>

 admin-web/src/views/stock/transfer/transferApplication/detail.vue

New file
@@ -0,0 +1,128 @@
<template>
  <el-dialog
    title="详情"
    width="60%"
    :modal="true"
    :visible.sync="visible"
    :top="'15vh'"
    :close-on-click-modal="false"
    :append-to-body="true"
    :destroy-on-close="true"
    @close="close"
    class="stock-detail"
  >
    <el-row :gutter="20">
      <el-col :span="8">
        <span>调拨单号：</span>
        <span>{{ detail.businessFormCode }}</span>
      </el-col>
      <el-col :span="8">
        <span>调拨仓库：</span>
        <span>{{ detail.warehouseName }}</span>
      </el-col>
      <el-col :span="8">
        <span>所属机构：</span>
        <span>{{ detail.agencyId }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8">
        <span>状态：</span>
        <span>{{ detail.states == 1 ? '待调拨' : '已调拨' }}</span>
      </el-col>
      <el-col :span="8">
        <span>创建人：</span>
        <span>{{ detail.buyerName }}</span>
      </el-col>
      <el-col :span="8">
        <span>调拨时间：</span>
        <span>{{ detail.incomeTime | formatTime }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col class="img-row" :span="24">
        <span>调拨手续照片：</span>
        <div class="img-box"></div>
      </el-col>
    </el-row>
    <div class="goods-card" v-for="(goodsItem, goodsIndex) in detail.procureGoods" :key="goodsIndex">
      <el-row :gutter="20">
        <el-col :span="8">
          <span>物品分类：</span>
          <span>{{ goodsItem.baseCategoryId }}</span>
        </el-col>
        <el-col :span="8">
          <span>物品名称：</span>
          <span>{{ goodsItem.goodsTemplateName }}</span>
        </el-col>
        <el-col :span="8">
          <span>供货商：</span>
          <span>{{ goodsItem.supplier }}</span>
        </el-col>
      </el-row>
      <el-table :data="goodsItem.models" :stripe="true" style="margin-top: 20px">
        <el-table-column prop="baseGoodsModelsName" label="规格型号" align="center">
          <template slot-scope="scope">
            {{ scope.row.baseGoodsModelsName }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center">
          <template slot-scope="scope">
            {{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="现有库存" align="center">
          <template slot-scope="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="counts" label="调拨数量" align="center">
          <template slot-scope="scope">
            {{ scope.row.counts }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<script>
import { procureDetail } from '@/api/stock/procure/purchaseOrder';
import * as DateFormatter from '@/utils/DateFormatter';

export default {
  data() {
    return {
      visible: false,
      detail: {
        businessFormCode: '',
        goodsTemplateName: '',
        agencyId: '',
        states: '',
        createName: '',
        time: '',
        procureGoods: [{}, {}],
      },
    };
  },
  filters:{
    formatTime(time) {
      if(!time) return
      return DateFormatter.LongToDateTime(time)
    }
  },
  methods: {
    open(id) {
      this.visible = true;
      procureDetail({ id }).then((res) => {
        this.detail = res;
      });
    },
    close() {
      this.visible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import url(../../index.scss);
</style>

 admin-web/src/views/stock/transfer/transferApplication/edit.vue

New file
@@ -0,0 +1,516 @@
<template>
  <win-md class="stock-edit" :title="`${setting.title}调拨调拨`" @close="close" :width="'800px'">
    <el-form class="form" ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
      <div class="main-w">
        <el-row :gutter="24" class="headerHeight">
          <el-col :span="12">
            <el-form-item label="调拨仓库" prop="warehouseId">
              <el-select v-model="formData.warehouseId" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in warehouses" :key="item.id" :label="item.warehouseName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调拨时间" prop="procureTime">
              <el-date-picker
                v-model="formData.procureTime"
                type="datetime"
                value="yyyy-MM-dd HH:mm:ss"
                value-format="yyyyMMddHHmmss"
                placeholder="请选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="headerHeight">
          <el-col :span="12">
            <el-form-item label="调拨手续" prop="procureDoc">
              <upload :settings="uploadSettings" @on-change="uploadChange"></upload>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="goods-card" v-for="(goodsItem, goodsIndex) in formData.procureGoods" :key="goodsIndex">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="物品分类"
                :prop="`procureGoods[${goodsIndex}].baseCategoryIds`"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change',
                }"
              >
                <el-cascader
                  v-model="goodsItem.baseCategoryIds"
                  :options="categoryOptions"
                  :props="{ value: 'id' }"
                  @change="categoryChange($event, goodsIndex)"
                  style="width: 100%"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="物品名称"
                :prop="`procureGoods[${goodsIndex}].baseGoodsTemplateId`"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change',
                }"
              >
                <el-select
                  v-model="goodsItem.baseGoodsTemplateId"
                  placeholder="请先择物品分类"
                  filterable
                  :disabled="!goodsItem.baseCategoryId"
                  style="width: 100%"
                  @change="goodsTemplateChange($event, goodsIndex)"
                >
                  <el-option
                    v-for="item in goodsItem.goodsOptions"
                    :key="item.id"
                    :label="item.goodsName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="规格型号"
                :prop="`procureGoods[${goodsIndex}].modelsIds`"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change',
                }"
              >
                <el-select
                  v-model="goodsItem.modelsIds"
                  multiple
                  placeholder="请先择物品名称"
                  :disabled="!goodsItem.baseCategoryId"
                  @change="modelChange($event, goodsIndex)"
                  @remove-tag="modelRemoveTag($event, goodsIndex)"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in goodsItem.modelsOptions"
                    :key="item.id"
                    :label="item.modelName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-table :data="goodsItem.models" :stripe="true">
            <el-table-column prop="baseGoodsModelsId" label="规格型号" align="center">
              <template slot-scope="scope">
                {{ getGoodsModelsName(scope.row.baseGoodsModelsId) }}
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center">
              <template slot-scope="scope">
                {{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column prop="price" label="现有库存" align="center">
              <template slot-scope="scope">{{  }}
                {{ scope.row.worehouseCount }}
              </template>
            </el-table-column>
            <el-table-column prop="counts" label="调拨数量" align="center">
              <template slot-scope="scope">
                <el-input
                  type="number"
                  v-model="scope.row.counts"
                  @change="countsChange($event, goodsIndex,scope.$index)"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="btn-group">
            <el-button
              v-if="formData.procureGoods.length > 1"
              name="移除"
              type="danger"
              plain
              size="mini"
              @click="removeGoods(goodsIndex)"
              >移除</el-button
            >
            <el-button
              v-if="formData.procureGoods.length - 1 == goodsIndex"
              name="新增物品"
              type="primary"
              plain
              size="mini"
              @click="addGoods"
              >新增物品</el-button
            >
          </div>
        </div>
      </div>
    </el-form>
    <div slot="footer" align="center" class="dialog-footer">
      <my-button name="取消" site="form" @click="close" />
      <my-button name="保存" site="form" @click="handleSubmit" />
    </div>
  </win-md>
</template>
<script>
import {
  goodsTemplate,
  procureAdd,
  procureEdit,
  selectTenantWarehouse,
  goodsModel,
  procureDetail,
} from '@/api/stock/procure/purchaseOrder';
import { getTree } from '@/api/foudation/classification';
import MyButton from '@/components/myButton/myButton';
import winMd from '@/components/win/win-md';
import upload from '@/components/upload/index';
import { getUploadUrl } from '@/utils/base';

import SettingIplatform from '../../../../../public/static/config';

export default {
  components: { MyButton, winMd, upload },
  props: {
    setting: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      visible: false,
      loading: false,
      buyTypeOptions: [
        {
          label: '集采',
          value: '1',
        },
        {
          label: '自采',
          value: '2',
        },
      ],
      warehouses: [], // 调拨仓库列表
      categoryOptions: [], // 物品分类列表
      modelList: [], //型号列表
      formData: {
        warehouseId: '', // 调拨仓库id
        procureTime: '', // 调拨时间
        buyType: '2', // 调拨方式（1：集采；2=自采）
        procureGoods: [],
      },
      goodsItem: {
        whFormProcureId: '', // 调拨单ID
        baseCategoryIds: '', // 分类编号数组
        baseCategoryId: '', // 分类编号
        baseGoodsTemplateId: '', // 物品模版编号
        goodsTemplateName: '', // 物品模版名称
        supplier: '', // 供应商
        sort: '', // 显示顺序
        goodsOptions: [], // 物品列表select
        modelsOptions: [], //规格型号select
        models: [], // 物品名称
        modelsIds: [], //规格型号
      },
      modelsItem: {
        baseGoodsModelsId: '', // 规格型号编号
        price: 0, // 单价(调拨需要，调拨不需要)
        worehouseCount: 0,
        counts: 0, // 操作数量
        supplier: '', // 供应商
        unit: null, //单位
      },
      rules: {
        warehouseId: [{ required: true, message: '请选择', trigger: 'change' }],
        procureTime: [{ required: true, message: '请选择', trigger: 'change' }],
        buyType: [{ required: true, message: '请选择', trigger: 'change' }],

        // procureDoc: [{ required: true, message: '请上传', trigger: 'change' }],
        baseCategoryIds: [{ required: true, message: '请选择', trigger: 'change' }],
        baseGoodsTemplateId: [{ required: true, message: '请选择', trigger: 'change' }],
        modelsIds: [{ required: true, message: '请选择', trigger: 'change' }],
      },

      uploadSettings: {
        title: '上传',
        max: 20, // 最大大小，单位M
        num: 2, // 支持上传图片个数
        accept: '.jpg,.png', // 限制格式
        tip: '', // 提示 默认：`只能上传${this.defaultSettings.num}个${this.defaultSettings.accept}文件，且不超过${this.defaultSettings.max}kb`
        uploadUrl: getUploadUrl(), // 上传路径
        multiple: true, // 是否支持批量上传
        disabled: false, // 是否禁用
        type: 'text', // text/picture
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      this.getWarehouseList();
      this.getgoodsTemplate();
      this.getgoodsModel();
      // 获取物品分类列表
      const treeRes = await getTree();
      this.categoryOptions = this.removeEmptyChildren(treeRes);
      if (this.setting.id) {
        const detail = await procureDetail({ id: this.setting.id });
        this.formData = Object.assign(this.formData, detail);
        this.$set(this.formData, 'buyType', this.formData.buyType.toString());
        this.formData.procureTime = this.formData.procureTime.toString();
        this.formData.procureGoods.map((item, index) => {
          // 根据子集ID拼接物品分类列表
          let pIds = this.findParentIds(this.categoryOptions, item.baseCategoryId);
          pIds = pIds.reverse();
          item.baseCategoryIds = [...pIds, item.baseCategoryId];
          this.$set(
            this.formData.procureGoods[index],
            'modelsIds',
            item.models.map((v) => v.baseGoodsModelsId),
          );
          this.getgoodsTemplate(item.baseCategoryId, index);
          this.getgoodsModel(item.baseGoodsTemplateId, index);
          return item;
        });
      } else {
        this.formData.procureGoods.push(JSON.parse(JSON.stringify(this.goodsItem)));
      }
      this.visible = true;
    },

    // 获取调拨仓库列表
    getWarehouseList() {
      selectTenantWarehouse()
        .then((res) => {
          this.warehouses = res;
          if (this.warehouses.length && !this.formData.warehouseId) {
            // 默认选中第一个仓库
            this.formData.warehouseId = this.warehouses[0].id;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    removeEmptyChildren(arr) {
      arr.forEach((item) => {
        if (!item.children || !item.children.length) {
          delete item.children;
        } else {
          this.removeEmptyChildren(item.children);
        }
      });
      return arr;
    },

    // 获取物品名称列表
    getgoodsTemplate(id, index) {
      goodsTemplate({ categoryId: id || '' }).then((res) => {
        if (index || index == 0) {
          this.$set(this.formData.procureGoods[index], 'goodsOptions', res);
        } else {
          this.goodsTemplatelAll = res;
        }
      });
    },

    // 规格型号
    getgoodsModel(id, index) {
      goodsModel({ goodsTemplatesId: id || '' }).then((res) => {
        if (index || index == 0) {
          this.$set(this.formData.procureGoods[index], 'modelsOptions', res);
        } else {
          this.goodsModelAll = res;
        }
      });
    },

    // 根据物品名称id获取名字
    getGoodsTemplateName(id) {
      let item = this.goodsTemplatelAll.find((v) => v.id == id);
      if (item) {
        return item.goodsName;
      }
      return;
    },

    // 根据规格型号id获取名字
    getGoodsModelsName(id) {
      let item = this.goodsModelAll.find((v) => v.id == id);
      if (item) {
        return item.modelName;
      }
      return;
    },

    // 物品分类选择
    categoryChange(e, index) {
      this.formData.procureGoods[index].goodsOptions = [];
      this.formData.procureGoods[index].baseGoodsTemplateId = '';
      this.formData.procureGoods[index].goodsTemplateName = '';
      this.formData.procureGoods[index].modelsOptions = [];
      this.formData.procureGoods[index].modelsIds = [];
      this.formData.procureGoods[index].models = [];

      this.formData.procureGoods[index].baseCategoryId = e[e.length - 1];
      // 根据选中分类请求物品名称列表
      this.getgoodsTemplate(e[e.length - 1], index);
    },

    // 物品名称列表
    goodsTemplateChange(e, index) {
      this.formData.procureGoods[index].modelsOptions = [];
      this.formData.procureGoods[index].modelsIds = [];
      this.formData.procureGoods[index].models = [];

      this.formData.procureGoods[index].goodsTemplateName = this.getGoodsTemplateName(e);
      // 根据选中物品名称id获取规格型号列表
      this.getgoodsModel(e, index);
    },

    // 规格型号选择
    modelChange(e, index) {
      let arr = [...this.formData.procureGoods[index].models];
      let str = JSON.stringify(arr);
      e.forEach((item) => {
        if (str.indexOf(item) == -1) {
          let temp = this.goodsModelAll.find((v) => v.id == item);
          arr.push({ ...this.modelsItem, baseGoodsModelsId: item, unit: temp.unit });
        }
      });
      this.formData.procureGoods[index].models = arr;
    },

    // 规格型号移除
    modelRemoveTag(e, index) {
      let arr = this.formData.procureGoods[index].models;
      let delIndex = arr.findIndex((v) => v.baseGoodsModelsId == e);
      this.formData.procureGoods[index].models.splice(delIndex, 1);
    },

    // 上传
    uploadChange(e) {
      console.log('uploadChange', e);
    },

    // 点击新增物品
    addGoods() {
      this.formData.procureGoods.push(JSON.parse(JSON.stringify(this.goodsItem)));
    },

    // 点击移除
    removeGoods(index) {
      this.formData.procureGoods.splice(index, 1);
    },

    // 调拨数量校验
    countsChange(e, goodsIndex,index) {
      const curItem = this.formData.procureGoods[goodsIndex].models[index]
      const worehouseCount = curItem.worehouseCount
      if (e > worehouseCount) {
        this.$message.warning('数额超过现有库存');
        curItem.counts = worehouseCount
      }
    },

    // 提交
    handleSubmit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log('this.formData', this.formData);
          if (this.setting.id) {
            procureAdd(this.formData)
              .then((res) => {
                this.$message.success('保存成功！');
                this.close();
                this.$emit('search');
              })
              .catch((err) => {
                console.log('create err', err);
                this.$message.error('保存失败');
              });
          } else {
            procureEdit(this.formData)
              .then((res) => {
                this.$message.success('保存成功！');
                this.close();
                this.$emit('search');
              })
              .catch((err) => {
                console.log('edit err', err);
                this.$message.error('保存失败');
              });
          }
        } else {
          this.$message.error('校验未通过，请检查。');
        }
      });
    },

    close() {
      this.formData = {
        warehouseId: '', // 调拨仓库id
        procureTime: '', // 调拨时间
        procureGoods: [],
      };
      this.$emit('close');
    },

    // 通过子集id查到所以相关父级id并返回数组
    findParentIds(dataSource, nodeId) {
      const parentIds = []; // 用于存储所有父节点ID的数组

      // 定义一个递归函数，用于遍历整棵树并查找子节点的所有父节点
      function traverse(node, nodeId) {
        if (node.id === nodeId) {
          // 如果当前节点的ID等于子节点的ID，则表示已经找到了子节点，可以开始向上查找父节点
          return true; // 返回true表示已经找到了子节点
        }

        if (node.children) {
          // 如果当前节点有子节点，则继续遍历子节点
          for (const childNode of node.children) {
            if (traverse(childNode, nodeId)) {
              // 如果在子节点中找到了子节点的父节点，则将当前节点的ID添加到父节点ID数组中，并返回true表示已经找到了子节点
              parentIds.push(node.id);
              return true;
            }
          }
        }

        return false; // 如果当前节点不是子节点的父节点，则返回false
      }

      // 从根节点开始遍历整棵树，并调用递归函数查找子节点的所有父节点
      for (const node of dataSource) {
        if (traverse(node, nodeId)) {
          // 如果在当前节点的子树中找到了子节点的父节点，则直接退出循环
          break;
        }
      }

      return parentIds; // 返回所有父节点ID的数组
    },
  },
};
</script>
<style scoped lang="scss">
@import url(../../index.scss);
</style>

 admin-web/src/views/stock/transfer/transferApplication/index.vue

@@ -1,125 +1,77 @@
<template>
  <div class="app-container">
  <div class="app-container stock-container">
    <el-container>
      <el-container>
        <el-card class="box-card" style="width: 100%" shadow="never">
          <!--搜索条件-->
          <div class="filter-container">
            <my-search ref="searchBar" :items="items" @search="fifterForm"></my-search>
          </div>
          <el-row style="margin-top: 15px">
            <el-col>
              <!--列表-->
              <my-button name="新增" @click="addtable" site="form" />
              <div :style="{'overflow-y': 'auto', height:`${clientHeight - 320}px`}">
                    <el-row class="card"
                            :gutter="5">
                        <el-col v-for="(item, index) in proData" :key="index" class="cm-item">
                          <el-card class="card-data">
                            <div class="card-container">
                              <div class="hed-one"> <span>调拨单号：{{ item.order_no }}</span><span style="margin-left: 20px;"><el-button type="warning" plain size="mini">待接收</el-button></span></div>
                              <div class="one-hed">
                                <div class="box"><span class="span-two">接受机构：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">申请人：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">申请调拨时间：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">接收时间：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">调拨时间：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">接受人：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">接受时间：</span>{{ item.customer_name }}</div>
                              </div>
                              <div class="card-end">
                                <div v-for="(just, index) in item.data" class="two-end">
                                  <div class="item"><span>{{ just.order_no }}：</span>{{ just.customer_name }}</div>
                                </div>
                              </div>
                            </div>
                            <div class="card-but">
                              <div  style="margin-top: 10px;">
                                <my-button style="width: 120px;" name="删除"   site="form" />
                                <my-button style="width: 120px;" name="查看详情" site="form" />
                              </div>
                            </div>
                            
                          </el-card>
                        </el-col>
                    </el-row>
              </div>
              <el-pagination
                :small="false"
                :current-page="1"
                :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400, 500]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="0"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </el-col>
          </el-row>
          <!--添加/编辑弹窗-->
          <el-dialog title="新增出库"  :close-on-click-modal="false" :visible.sync="adddialog" width="60%" >
            <el-form ref="ruleForm" :model="formData" class="demo-ruleForm" label-width="100px">
              <el-row :gutter="24" class="headerHeight">
                  <el-col :span="12">
                    <el-form-item label="仓库名称" prop="name">
                      <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="仓库名称" prop="name">
                      <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24" class="headerHeight">
                  <el-col :span="24">
                    <el-form-item label="出库手续" prop="name">                      
                      仅允许导入xls、xlsx格式文件
                    </el-form-item>
                  </el-col>
                </el-row>
                <div style="position: relative;">
                  <div style="background-color: #F9F9F9;width: 90%;">
                  <el-row :gutter="24" class="">
                    <el-col :span="12">
                      <el-form-item label="仓库名称" prop="name">
                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="仓库名称" prop="name">
                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24" class="">
                    <el-col :span="12">
                      <el-form-item label="仓库名称" prop="name">
                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-table :data="formData.tableData" height="100%"  :stripe="true">
                    <el-table-column prop="projectName" label="规格型号" align="center"> </el-table-column>
                    <el-table-column prop="time1" label="单位"  align="center"> </el-table-column>
                    <el-table-column prop="unit" label="现有库存" align="center"> </el-table-column>
                    <el-table-column prop="time2" label="出库数量"  align="center"> </el-table-column>
                  </el-table>
                  </div>
                  <div style="position: absolute;right: 0;top: 152px;">
                    <my-button style="display: block;margin-left: 10px;margin-bottom: 5px;" name="移除" site="form"/>
                    <my-button name="新增物品" site="form"/>
                  </div>
                </div>
            </el-form>
            <div slot="footer" align="center" class="dialog-footer">
              <my-button name="确定" site="form" />
              <my-button name="取消" site="form" @click="adddialog = false"/>
      <el-card class="box-card" style="width: 100%" shadow="never">
        <!--搜索条件-->
        <div class="filter-container">
          <my-search ref="searchBar" :items="items" @search="fifterForm"></my-search>
        </div>
        <el-row style="margin-top: 15px">
          <el-col>
            <!--列表-->
            <div class="table-tool-bar" style="margin-bottom: 15px;">
              <my-button name="新增" @click="handleAdd" site="tools" size="medium" />
            </div>
          </el-dialog>
        </el-card>
      </el-container>
            <div :style="{ 'overflow-y': 'auto', height: `${clientHeight - 320}px` }" v-loading="loading">
              <el-row class="card" :gutter="5">
                <el-col v-for="(item, index) in list" :key="index" class="cm-item">
                  <el-card class="card-data">
                    <div class="card-container">
                      <div class="card-header">
                        <div class="card-header-left">
                          <span>调拨单号：</span>
                          <span class="value">{{ item.businessFormCode }}</span>
                        </div>
                        <div class="card-header-right">
                            <el-button site="form" type="success" size="mini" @click="handleExport(item)"
                              >导出调拨单</el-button
                            >
                          <el-button name="查看详情" site="form" type="info" size="mini" @click="handleDetail(item)"
                            >查看详情</el-button
                          >
                        </div>
                      </div>
                      <div class="one-hed">
                        <div class="box"><span class="span-two">机构：</span>{{ item.agencyId }}</div>
                        <div class="box"><span class="span-two">操作人：</span>{{ item.buyerName }}</div>
                        <div class="box">
                          <span class="span-two">调拨时间：</span>{{ item.procureTime | formatTime }}
                        </div>
                      </div>
                      <div class="card-end">
                        <div v-for="(just, index) in item.fromProcureTemplateInfoList" :key="index" class="item">
                          <div class="name">{{ just.goodsTemplateName }}</div>
                          <div class="value-box">
                            <div class="value-box-item">
                              <span class="label">数量：</span>
                              <span class="value">{{ just.count }}</span>
                              <span class="unit">{{ just.unit }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <el-pagination
              :small="false"
              :current-page="pageNum"
              :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400, 500]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </el-card>
    </el-container>
    <!--添加/编辑弹窗-->
    <edit v-if="editSetting.show" :setting="editSetting" ref="editRef" @close="editSetting.show=false" @search="refreshData"></edit>
    <detail ref="detailRef"></detail>
    <my-import
      :import-setting="importSetting"
      :dialog-show="importSetting.dialogShow"
@@ -129,196 +81,100 @@
</template>

<script>
import MyButton from "@/components/myButton/myButton";
import { procureList, procureDel, procureIncome } from '@/api/stock/procure/purchaseOrder';
import MyButton from '@/components/myButton/myButton';
import SettingIplatform from '@/utils/settingIplatform';
import myImport from '@/views/components/myImport'
import {getBaseUrl} from '@/utils/base';
import myImport from '@/views/components/myImport';
import edit from './edit';
import detail from './detail';
import { getBaseUrl } from '@/utils/base';
import * as DateFormatter from '@/utils/DateFormatter';

export default {
  name: "index",
  components: {MyButton, myImport},
  name: 'index',
  components: { MyButton, myImport, edit, detail },
  data() {
    return {
      
      loading: false,
      adddialog: false,
      formData:{
        tableData:[
          {
            projectName:'555'
          },
          {
            projectName:'444'
          }
        ],
      },
      list: [],
      // 搜索框
      items: [
        {
          type: 'text',
          dataIndex: 'name',
          label: '出库单号',
          dataIndex: 'businessFormCode',
          label: '调拨单号',
          placeholder: '请输入',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'text',
          dataIndex: 'name',
          dataIndex: 'goodsTemplateName',
          label: '物品名称',
          placeholder: '可模糊搜索',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'text',
          type: 'select',
          dataIndex: 'name',
          label: '创建人',
          placeholder: '请输入',
          defaultValue: ''
          label: '调拨机构',
          placeholder: '请选择',
          defaultValue: '',
          options: [],
        },
        {
          type: 'select',
          dataIndex: 'name',
          label: '接收机构',
          placeholder: '请选择',
          defaultValue: '',
          options: [],
        },
        {
          type: 'select',
          dataIndex: 'states',
          label: '状态',
          placeholder: '请选择',
          defaultValue: '',
          options: [
            {
              label: '全部',
              value: '',
            },
            {
              label: '待调拨',
              value: '1',
            },
            {
              label: '已调拨',
              value: '2',
            },
          ],
        },
        {
          type: 'date-picker',
          dataIndex: 'val1',
          label: '出库时间',
          defaultValue: ''
          label: '申请时间',
          defaultValue: '',
        },
        {
          type: 'date-picker',
          dataIndex: 'val2',
          label: '至',
          defaultValue: ''
        },
        // {
        //   type: 'select',
        //   dataIndex: 'status',
        //   label: '状态',
        //   placeholder: '请选择',
        //   defaultValue: '1',
        //   options: [
        //     {
        //       label: '启用',
        //       value: '1'
        //     },
        //     {
        //       label: '禁用',
        //       value: '0'
        //     }
        //   ]
        // }
      ],
      proData: [
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          defaultValue: '',
        },
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'郑州市邮政分公司'
            },
          ]
          type: 'date-picker',
          dataIndex: 'val1',
          label: '接收时间',
          defaultValue: '',
        },
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          type: 'date-picker',
          dataIndex: 'val2',
          label: '至',
          defaultValue: '',
        },
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        },
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        },
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        },
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        }
      ],
      // 树数据
      treeDataList: [],
@@ -327,25 +183,25 @@
        tenantId: null,
        userName: null,
        userPhone: null,
        status: 1
        states: null,
      },
      // 导入
      importSetting: {
          dialogTitle: '导入',
          dialogShow: false,
          fileSettings: {
              data: {},
              uploadUrl: getBaseUrl()+"/pc/fin/sys/tenant/import", // 上传地址
              accept: '.xls', // 格式
              type: 'text', // 回显形式
              loading: false // 导入效果
          },
          /* 模板下载 */
          templateSettings: {
              templateName: '导入模板.xls', // 名称
              templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate' // 下载地址
          },
          onSuccess: null
        dialogTitle: '导入',
        dialogShow: false,
        fileSettings: {
          data: {},
          uploadUrl: getBaseUrl() + '/pc/fin/sys/tenant/import', // 上传地址
          accept: '.xls', // 格式
          type: 'text', // 回显形式
          loading: false, // 导入效果
        },
        /* 模板下载 */
        templateSettings: {
          templateName: '导入模板.xls', // 名称
          templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate', // 下载地址
        },
        onSuccess: null,
      },
      editSetting: {
        title: '',
@@ -353,105 +209,121 @@
        orgId: '',
        show: false,
      },
    }
      pageNum: 1,
      pageSize: 10,
      total: 0,
    };
  },
  computed: {
    clientHeight () {
      return document.documentElement.clientHeight
    clientHeight() {
      return document.documentElement.clientHeight;
    },
  },
  filters: {
    formatTime(time) {
      if (!time) return;
      return DateFormatter.LongToDateTime(time);
    },
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSizeChange(){},
    handleCurrentChange(){},
    fetchData() {
      this.loading = true;
      procureList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.filterFrom,
      }).then((res) => {
        this.list = res.datas;
        this.total = res.totalRows;
        this.loading = false;
        console.log(this.list);
      });
    },
    //导入
    importOrg() {
        this.importSetting.dialogShow = true
        this.importSetting.onSuccess = (response, callBack) => {
            if (response.code===1){
              this.$message.success(response.msg)
              this.search(1)
            }else{
              this.$message.warning(response.msg)
            }
            callBack()
      this.importSetting.dialogShow = true;
      this.importSetting.onSuccess = (response, callBack) => {
        if (response.code === 1) {
          this.$message.success(response.msg);
          this.search(1);
        } else {
          this.$message.warning(response.msg);
        }
        callBack();
      };
    },
   
    addtable() {
      this.adddialog = true
    // 导出
    handleExport() {},
    // 新增
    handleAdd() {
      this.editSetting.id = null;
      this.editSetting.info = null;
      this.editSetting.title = '新增';
      this.editSetting.show = true;
    },
    // 编辑
    handleEdit(row) {
      this.editSetting.id = row.id;
      this.editSetting.info = null;
      this.editSetting.title = '编辑';
      this.editSetting.show = true;
    },
    // 详情
    handleDetail(row) {
      this.$refs.detailRef.open(row.id);
    },
    // 调拨
    handleIncome(row) {
      this.$confirm(`您确定 单号：${row.businessFormCode}  调拨吗?`, '调拨调拨')
        .then(function () {
          procureIncome({ id: row.id }).then((res) => {
            this.$message.success('调拨成功！');
            this.search();
          });
        })
        .catch(() => {});
    },
    del(row) {
      this.$modal
        .confirm('是否确认删除调拨单号为"' + row.businessFormCode + '"的数据吗？')
        .then(function () {
          procureDel({ id: row.id }).then((res) => {});
        })
        .then((res) => {
          this.$message.success('删除成功！');
          this.search();
        })
        .catch(() => {});
    },
    // 分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.search({ pageNum: 1 });
    },
    handleCurrentChange(pageNum) {
      this.myTable.paging.page.pageNum = pageNum;
      this.search({ pageNum: pageNum });
    },
    // 查询table列表
    search(pageNum) {
      if (pageNum != undefined) {
        // this.$refs.myTable.search(pageNum)
      } else {
        // this.$refs.myTable.search()
      }
      this.fetchData();
    },
    refreshData() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.search();
    },
    fifterForm(params) {
      console.log(params,'555');
      this.filterFrom = Object.assign(this.filterFrom, params)
      this.search(1)
    }
  }
}
      this.filterFrom = Object.assign(this.filterFrom, params);
      this.search(1);
    },
  },
};
</script>

<style scoped>
.card {
    display: flex;
    flex-wrap: wrap;
    margin: 0px !important;
    .cm-item {
        width: 100%;
    }
    .cm-item /deep/ .el-card__body {
        padding: 10px;
    }
}
.card-data{
  position: relative;
  margin-top: 8px;
  .card-container{
    display: inline-block; 
    width: 70%;
    .hed-one{
      color: #2298EE;
      font-size: 18px;
    }
    .one-hed{
      margin-top: 5px;
      .box{
        display: inline-block;  
        margin-right: 20px;  
        margin-top: 10px;
      }
    }
    .span-two{
      color: #83919e;
      font-size: 14px;
    }
    .card-end{
      font-size: 14px;
      color: #3d3d3d;
      margin-top: 15px;
      display: flex;  
      flex-wrap: wrap; 
      .two-end{
        width: calc(33.33% - 20px); 
        margin-bottom: 15px; 
      }
    }
    
  }
  .card-but{
    position: absolute;
    right: 20px;
    top: 40%;
  }
  
}

<style scoped lang="scss">
@import url(../../index.scss);
</style>

 admin-web/src/views/stock/transfer/transferissue/detail.vue

New file
@@ -0,0 +1,128 @@
<template>
  <el-dialog
    title="详情"
    width="60%"
    :modal="true"
    :visible.sync="visible"
    :top="'15vh'"
    :close-on-click-modal="false"
    :append-to-body="true"
    :destroy-on-close="true"
    @close="close"
    class="stock-detail"
  >
    <el-row :gutter="20">
      <el-col :span="8">
        <span>调拨单号：</span>
        <span>{{ detail.businessFormCode }}</span>
      </el-col>
      <el-col :span="8">
        <span>调拨仓库：</span>
        <span>{{ detail.warehouseName }}</span>
      </el-col>
      <el-col :span="8">
        <span>所属机构：</span>
        <span>{{ detail.agencyId }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8">
        <span>状态：</span>
        <span>{{ detail.states == 1 ? '待调拨' : '已调拨' }}</span>
      </el-col>
      <el-col :span="8">
        <span>创建人：</span>
        <span>{{ detail.buyerName }}</span>
      </el-col>
      <el-col :span="8">
        <span>调拨时间：</span>
        <span>{{ detail.incomeTime | formatTime }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col class="img-row" :span="24">
        <span>调拨手续照片：</span>
        <div class="img-box"></div>
      </el-col>
    </el-row>
    <div class="goods-card" v-for="(goodsItem, goodsIndex) in detail.procureGoods" :key="goodsIndex">
      <el-row :gutter="20">
        <el-col :span="8">
          <span>物品分类：</span>
          <span>{{ goodsItem.baseCategoryId }}</span>
        </el-col>
        <el-col :span="8">
          <span>物品名称：</span>
          <span>{{ goodsItem.goodsTemplateName }}</span>
        </el-col>
        <el-col :span="8">
          <span>供货商：</span>
          <span>{{ goodsItem.supplier }}</span>
        </el-col>
      </el-row>
      <el-table :data="goodsItem.models" :stripe="true" style="margin-top: 20px">
        <el-table-column prop="baseGoodsModelsName" label="规格型号" align="center">
          <template slot-scope="scope">
            {{ scope.row.baseGoodsModelsName }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center">
          <template slot-scope="scope">
            {{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="现有库存" align="center">
          <template slot-scope="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="counts" label="调拨数量" align="center">
          <template slot-scope="scope">
            {{ scope.row.counts }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<script>
import { procureDetail } from '@/api/stock/procure/purchaseOrder';
import * as DateFormatter from '@/utils/DateFormatter';

export default {
  data() {
    return {
      visible: false,
      detail: {
        businessFormCode: '',
        goodsTemplateName: '',
        agencyId: '',
        states: '',
        createName: '',
        time: '',
        procureGoods: [{}, {}],
      },
    };
  },
  filters:{
    formatTime(time) {
      if(!time) return
      return DateFormatter.LongToDateTime(time)
    }
  },
  methods: {
    open(id) {
      this.visible = true;
      procureDetail({ id }).then((res) => {
        this.detail = res;
      });
    },
    close() {
      this.visible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import url(../../index.scss);
</style>

 admin-web/src/views/stock/transfer/transferissue/edit.vue

New file
@@ -0,0 +1,495 @@
<template>
  <win-md class="stock-edit" :title="`${setting.title}调拨调拨`" @close="close" :width="'800px'">
    <el-form class="form" ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
      <div class="main-w">
        <el-row :gutter="24" class="headerHeight">
          <el-col :span="12">
            <el-form-item label="调拨仓库" prop="warehouseId">
              <el-select v-model="formData.warehouseId" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in warehouses" :key="item.id" :label="item.warehouseName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调拨时间" prop="procureTime">
              <el-date-picker
                v-model="formData.procureTime"
                type="datetime"
                value="yyyy-MM-dd HH:mm:ss"
                value-format="yyyyMMddHHmmss"
                placeholder="请选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="headerHeight">
          <el-col :span="12">
            <el-form-item label="调拨手续" prop="procureDoc">
              <upload :settings="uploadSettings" @on-change="uploadChange"></upload>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="goods-card" v-for="(goodsItem, goodsIndex) in formData.procureGoods" :key="goodsIndex">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="物品分类"
                :prop="`procureGoods[${goodsIndex}].baseCategoryIds`"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change',
                }"
              >
                <el-cascader
                  v-model="goodsItem.baseCategoryIds"
                  :options="categoryOptions"
                  :props="{ value: 'id' }"
                  @change="categoryChange($event, goodsIndex)"
                  style="width: 100%"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="物品名称"
                :prop="`procureGoods[${goodsIndex}].baseGoodsTemplateId`"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change',
                }"
              >
                <el-select
                  v-model="goodsItem.baseGoodsTemplateId"
                  placeholder="请先择物品分类"
                  filterable
                  :disabled="!goodsItem.baseCategoryId"
                  style="width: 100%"
                  @change="goodsTemplateChange($event, goodsIndex)"
                >
                  <el-option
                    v-for="item in goodsItem.goodsOptions"
                    :key="item.id"
                    :label="item.goodsName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item
                label="规格型号"
                :prop="`procureGoods[${goodsIndex}].modelsIds`"
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change',
                }"
              >
                <el-select
                  v-model="goodsItem.modelsIds"
                  multiple
                  placeholder="请先择物品名称"
                  :disabled="!goodsItem.baseCategoryId"
                  @change="modelChange($event, goodsIndex)"
                  @remove-tag="modelRemoveTag($event, goodsIndex)"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in goodsItem.modelsOptions"
                    :key="item.id"
                    :label="item.modelName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-table :data="goodsItem.models" :stripe="true">
            <el-table-column prop="baseGoodsModelsId" label="规格型号" align="center">
              <template slot-scope="scope">
                {{ getGoodsModelsName(scope.row.baseGoodsModelsId) }}
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center">
              <template slot-scope="scope">
                {{ scope.row.unit }}
              </template>
            </el-table-column>
            <el-table-column prop="price" label="单价（元）" align="center">
              <template slot-scope="scope">
                <el-input type="number" v-model="scope.row.price"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="counts" label="调拨数量" align="center">
              <template slot-scope="scope">
                <el-input type="number" v-model="scope.row.counts"></el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="btn-group">
            <el-button
              v-if="formData.procureGoods.length > 1"
              name="移除"
              type="danger"
              plain
              size="mini"
              @click="removeGoods(goodsIndex)"
              >移除</el-button
            >
            <el-button
              v-if="formData.procureGoods.length - 1 == goodsIndex"
              name="新增物品"
              type="primary"
              plain
              size="mini"
              @click="addGoods"
              >新增物品</el-button
            >
          </div>
        </div>
      </div>
    </el-form>
    <div slot="footer" align="center" class="dialog-footer">
      <my-button name="取消" site="form" @click="close"/>
      <my-button name="保存" site="form" @click="handleSubmit"/>
    </div>
  </win-md>
</template>
<script>
import {
  goodsTemplate,
  procureAdd,
  procureEdit,
  selectTenantWarehouse,
  goodsModel,
  procureDetail,
} from '@/api/stock/procure/purchaseOrder';
import { getTree } from '@/api/foudation/classification';
import MyButton from '@/components/myButton/myButton';
import winMd from '@/components/win/win-md';
import upload from '@/components/upload/index';
import { getUploadUrl } from '@/utils/base';

import SettingIplatform from '../../../../../public/static/config';

export default {
  components: { MyButton, winMd, upload },
  props: {
    setting: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      buyTypeOptions:[{
        label:'集采',
        value: '1'
      },{
        label:'自采',
        value: '2'
      }],
      warehouses: [], // 调拨仓库列表
      categoryOptions: [], // 物品分类列表
      modelList: [], //型号列表
      formData: {
        warehouseId: '', // 调拨仓库id
        procureTime: '', // 调拨时间
        buyType: '2', // 调拨方式（1：集采；2=自采）
        procureGoods: [],
      },
      goodsItem: {
        whFormProcureId: '', // 调拨单ID
        baseCategoryIds: '', // 分类编号数组
        baseCategoryId: '', // 分类编号
        baseGoodsTemplateId: '', // 物品模版编号
        goodsTemplateName: '', // 物品模版名称
        supplier: '', // 供应商
        sort: '', // 显示顺序
        goodsOptions: [], // 物品列表select
        modelsOptions: [], //规格型号select
        models: [], // 物品名称
        modelsIds: [], //规格型号
      },
      modelsItem: {
        baseGoodsModelsId: '', // 规格型号编号
        price: 0, // 单价(调拨需要，调拨不需要)
        counts: 0, // 操作数量
        supplier: '', // 供应商
        unit: null, //单位
      },
      rules: {
        warehouseId: [{ required: true, message: '请选择', trigger: 'change' }],
        procureTime: [{ required: true, message: '请选择', trigger: 'change' }],
        buyType: [{ required: true, message: '请选择', trigger: 'change' }],

        // procureDoc: [{ required: true, message: '请上传', trigger: 'change' }],
        baseCategoryIds: [{ required: true, message: '请选择', trigger: 'change' }],
        baseGoodsTemplateId: [{ required: true, message: '请选择', trigger: 'change' }],
        modelsIds: [{ required: true, message: '请选择', trigger: 'change' }],
      },

      uploadSettings: {
        title: '上传',
        max: 20, // 最大大小，单位M
        num: 2, // 支持上传图片个数
        accept: '.jpg,.png', // 限制格式
        tip: '', // 提示 默认：`只能上传${this.defaultSettings.num}个${this.defaultSettings.accept}文件，且不超过${this.defaultSettings.max}kb`
        uploadUrl: getUploadUrl(), // 上传路径
        multiple: true, // 是否支持批量上传
        disabled: false, // 是否禁用
        type: 'text', // text/picture
      },
    };
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.getWarehouseList();
      this.getgoodsTemplate()
      this.getgoodsModel();
      // 获取物品分类列表
      const treeRes = await getTree();
      this.categoryOptions = this.removeEmptyChildren(treeRes);
      if (this.setting.id) {
        const detail = await procureDetail({ id:this.setting.id });
        this.formData = Object.assign(this.formData, detail);
        this.$set(this.formData,'buyType',this.formData.buyType.toString())
        this.formData.procureTime = this.formData.procureTime.toString();
        this.formData.procureGoods.map((item, index) => {
          // 根据子集ID拼接物品分类列表
          let pIds = this.findParentIds(this.categoryOptions, item.baseCategoryId);
          pIds = pIds.reverse();
          item.baseCategoryIds = [...pIds, item.baseCategoryId];
          this.$set(this.formData.procureGoods[index],'modelsIds',item.models.map((v) => v.baseGoodsModelsId))
          this.getgoodsTemplate(item.baseCategoryId, index);
          this.getgoodsModel(item.baseGoodsTemplateId, index);
          return item
        });
      } else {
        this.formData.procureGoods.push(JSON.parse(JSON.stringify(this.goodsItem)));
      }
      this.visible = true;
    },

    // 获取调拨仓库列表
    getWarehouseList() {
      selectTenantWarehouse()
        .then((res) => {
          this.warehouses = res;
          if (this.warehouses.length && !this.formData.warehouseId) {
            // 默认选中第一个仓库
            this.formData.warehouseId = this.warehouses[0].id;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    removeEmptyChildren(arr) {
      arr.forEach((item) => {
        if (!item.children || !item.children.length) {
          delete item.children;
        } else {
          this.removeEmptyChildren(item.children);
        }
      });
      return arr;
    },

    // 获取物品名称列表
    getgoodsTemplate(id, index) {
      goodsTemplate({ categoryId: id || '' }).then((res) => {
        if (index || index == 0) {
          this.$set(this.formData.procureGoods[index], 'goodsOptions', res);
        }else {
          this.goodsTemplatelAll = res;
        }
      });
    },

    // 规格型号
    getgoodsModel(id, index) {
      goodsModel({ goodsTemplatesId: id || '' }).then((res) => {
        if (index || index == 0) {
          this.$set(this.formData.procureGoods[index], 'modelsOptions', res);
        } else {
          this.goodsModelAll = res;
        }
      });
    },

    // 根据物品名称id获取名字
    getGoodsTemplateName(id) {
      let item = this.goodsTemplatelAll.find((v) => v.id == id);
      if (item) {
        return item.goodsName;
      }
      return;
    },

    // 根据规格型号id获取名字
    getGoodsModelsName(id) {
      let item = this.goodsModelAll.find((v) => v.id == id);
      if (item) {
        return item.modelName;
      }
      return;
    },

    // 物品分类选择
    categoryChange(e, index) {
      this.formData.procureGoods[index].goodsOptions = []
      this.formData.procureGoods[index].baseGoodsTemplateId = ''
      this.formData.procureGoods[index].goodsTemplateName = ''
      this.formData.procureGoods[index].modelsOptions = []
      this.formData.procureGoods[index].modelsIds = []
      this.formData.procureGoods[index].models = []

      this.formData.procureGoods[index].baseCategoryId = e[e.length - 1];
      // 根据选中分类请求物品名称列表
      this.getgoodsTemplate(e[e.length - 1], index);
    },

    // 物品名称列表
    goodsTemplateChange(e, index) {
      this.formData.procureGoods[index].modelsOptions = []
      this.formData.procureGoods[index].modelsIds = []
      this.formData.procureGoods[index].models = []

      this.formData.procureGoods[index].goodsTemplateName = this.getGoodsTemplateName(e)
      // 根据选中物品名称id获取规格型号列表
      this.getgoodsModel(e, index);
    },

    // 规格型号选择
    modelChange(e, index) {
      let arr = [...this.formData.procureGoods[index].models];
      let str = JSON.stringify(arr);
      e.forEach((item) => {
        if (str.indexOf(item) == -1) {
          let temp = this.goodsModelAll.find((v) => v.id == item);
          arr.push({ ...this.modelsItem, baseGoodsModelsId: item, unit: temp.unit });
        }
      });
      this.formData.procureGoods[index].models = arr;
    },

    // 规格型号移除
    modelRemoveTag(e, index) {
      let arr = this.formData.procureGoods[index].models;
      let delIndex = arr.findIndex((v) => v.baseGoodsModelsId == e);
      this.formData.procureGoods[index].models.splice(delIndex, 1);
    },

    // 上传
    uploadChange(e) {
      console.log('uploadChange', e);
    },

    // 点击新增物品
    addGoods() {
      this.formData.procureGoods.push(JSON.parse(JSON.stringify(this.goodsItem)));
    },

    // 点击移除
    removeGoods(index) {
      this.formData.procureGoods.splice(index, 1);
    },

    // 提交
    handleSubmit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log('this.formData', this.formData);
          if (this.setting.id) {
            procureAdd(this.formData)
              .then((res) => {
                this.$message.success('保存成功！');
                this.close();
                this.$emit('search');
              })
              .catch((err) => {
                console.log('create err', err);
                this.$message.error('保存失败');
              });
          } else {
            procureEdit(this.formData)
              .then((res) => {
                this.$message.success('保存成功！');
                this.close();
                this.$emit('search');
              })
              .catch((err) => {
                console.log('edit err', err);
                this.$message.error('保存失败');
              });
          }
        } else {
          this.$message.error('校验未通过，请检查。');
        }
      });
    },

    close() {
      this.formData ={
        warehouseId: '', // 调拨仓库id
        procureTime: '', // 调拨时间
        procureGoods: [],
      }
      this.$emit('close')
    },

    // 通过子集id查到所以相关父级id并返回数组
    findParentIds(dataSource, nodeId) {
      const parentIds = []; // 用于存储所有父节点ID的数组

      // 定义一个递归函数，用于遍历整棵树并查找子节点的所有父节点
      function traverse(node, nodeId) {
        if (node.id === nodeId) {
          // 如果当前节点的ID等于子节点的ID，则表示已经找到了子节点，可以开始向上查找父节点
          return true; // 返回true表示已经找到了子节点
        }

        if (node.children) {
          // 如果当前节点有子节点，则继续遍历子节点
          for (const childNode of node.children) {
            if (traverse(childNode, nodeId)) {
              // 如果在子节点中找到了子节点的父节点，则将当前节点的ID添加到父节点ID数组中，并返回true表示已经找到了子节点
              parentIds.push(node.id);
              return true;
            }
          }
        }

        return false; // 如果当前节点不是子节点的父节点，则返回false
      }

      // 从根节点开始遍历整棵树，并调用递归函数查找子节点的所有父节点
      for (const node of dataSource) {
        if (traverse(node, nodeId)) {
          // 如果在当前节点的子树中找到了子节点的父节点，则直接退出循环
          break;
        }
      }

      return parentIds; // 返回所有父节点ID的数组
    },
  },
};
</script>
<style scoped lang="scss">
@import url(../../index.scss);
</style>

 admin-web/src/views/stock/transfer/transferissue/index.vue

@@ -1,125 +1,84 @@
<template>
  <div class="app-container">
  <div class="app-container stock-container">
    <el-container>
      <el-container>
        <el-card class="box-card" style="width: 100%" shadow="never">
          <!--搜索条件-->
          <div class="filter-container">
            <my-search ref="searchBar" :items="items" @search="fifterForm"></my-search>
          </div>
          <el-row style="margin-top: 15px">
            <el-col>
              <!--列表-->
              <my-button name="新增" @click="addtable" site="form" />
              <div :style="{'overflow-y': 'auto', height:`${clientHeight - 320}px`}">
                    <el-row class="card"
                            :gutter="5">
                        <el-col v-for="(item, index) in proData" :key="index" class="cm-item">
                          <el-card class="card-data">
                            <div class="card-container">
                              <div class="hed-one"> <span>调拨单号：{{ item.order_no }}</span><span style="margin-left: 20px;"><el-button type="warning" plain size="mini">待接收</el-button></span></div>
                              <div class="one-hed">
                                <div class="box"><span class="span-two">接受机构：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">申请人：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">申请调拨时间：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">接收时间：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">调拨时间：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">接受人：</span>{{ item.customer_name }}</div>
                                <div class="box"><span class="span-two">接受时间：</span>{{ item.customer_name }}</div>
                              </div>
                              <div class="card-end">
                                <div v-for="(just, index) in item.data" class="two-end">
                                  <div class="item"><span>{{ just.order_no }}：</span>{{ just.customer_name }}</div>
                                </div>
                              </div>
      <el-card class="box-card" style="width: 100%" shadow="never">
        <!--搜索条件-->
        <div class="filter-container">
          <my-search ref="searchBar" :items="items" @search="fifterForm"></my-search>
        </div>
        <el-row style="margin-top: 15px">
          <el-col>
            <!--列表-->
            <div :style="{ 'overflow-y': 'auto', height: `${clientHeight - 320}px` }" v-loading="loading">
              <el-row class="card" :gutter="5">
                <el-col v-for="(item, index) in list" :key="index" class="cm-item">
                  <el-card class="card-data">
                    <div class="card-container">
                      <div class="card-header">
                        <div class="card-header-left">
                          <span>调拨单号：</span>
                          <span class="value">{{ item.businessFormCode }}</span>
                        </div>
                        <div class="card-header-right">
                            <el-button site="form" type="success" size="mini" @click="handleExport(item)"
                              >导出调拨单</el-button
                            >
                          <el-button name="查看详情" site="form" type="info" size="mini" @click="handleDetail(item)"
                            >查看详情</el-button
                          >
                        </div>
                      </div>
                      <div class="one-hed">
                        <div class="box"><span class="span-two">接收机构：</span>{{ item.agencyId }}</div>
                        <div class="box"><span class="span-two">申请人：</span>{{ item.buyerName }}</div>
                        <div class="box">
                          <span class="span-two">申请调拨时间：</span>{{ item.procureTime | formatTime }}
                        </div>
                        <div class="box">
                          <span class="span-two">接收时间：</span>{{ item.procureTime | formatTime }}
                        </div>
                      </div>
                      <div class="one-hed">
                        <div class="box"><span class="span-two">调拨机构：</span>{{ item.agencyId }}</div>
                        <div class="box"><span class="span-two">调拨人：</span>{{ item.buyerName }}</div>
                        <div class="box">
                          <span class="span-two">调拨时间：</span>{{ item.procureTime | formatTime }}
                        </div>
                      </div>
                      <div class="card-end">
                        <div v-for="(just, index) in item.fromProcureTemplateInfoList" :key="index" class="item">
                          <div class="name">{{ just.goodsTemplateName }}</div>
                          <div class="value-box">
                            <div class="value-box-item">
                              <span class="label">数量：</span>
                              <span class="value">{{ just.count }}</span>
                              <span class="unit">{{ just.unit }}</span>
                            </div>
                            <div class="card-but">
                              <div  style="margin-top: 10px;">
                                <my-button style="width: 120px;" name="删除"   site="form" />
                                <my-button style="width: 120px;" name="查看详情" site="form" />
                              </div>
                            </div>
                            
                          </el-card>
                        </el-col>
                    </el-row>
              </div>
              <el-pagination
                :small="false"
                :current-page="1"
                :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400, 500]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="0"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </el-col>
          </el-row>
          <!--添加/编辑弹窗-->
          <el-dialog title="新增出库"  :close-on-click-modal="false" :visible.sync="adddialog" width="60%" >
            <el-form ref="ruleForm" :model="formData" class="demo-ruleForm" label-width="100px">
              <el-row :gutter="24" class="headerHeight">
                  <el-col :span="12">
                    <el-form-item label="仓库名称" prop="name">
                      <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="仓库名称" prop="name">
                      <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24" class="headerHeight">
                  <el-col :span="24">
                    <el-form-item label="出库手续" prop="name">                      
                      仅允许导入xls、xlsx格式文件
                    </el-form-item>
                  </el-col>
                </el-row>
                <div style="position: relative;">
                  <div style="background-color: #F9F9F9;width: 90%;">
                  <el-row :gutter="24" class="">
                    <el-col :span="12">
                      <el-form-item label="仓库名称" prop="name">
                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="仓库名称" prop="name">
                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24" class="">
                    <el-col :span="12">
                      <el-form-item label="仓库名称" prop="name">
                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-table :data="formData.tableData" height="100%"  :stripe="true">
                    <el-table-column prop="projectName" label="规格型号" align="center"> </el-table-column>
                    <el-table-column prop="time1" label="单位"  align="center"> </el-table-column>
                    <el-table-column prop="unit" label="现有库存" align="center"> </el-table-column>
                    <el-table-column prop="time2" label="出库数量"  align="center"> </el-table-column>
                  </el-table>
                  </div>
                  <div style="position: absolute;right: 0;top: 152px;">
                    <my-button style="display: block;margin-left: 10px;margin-bottom: 5px;" name="移除" site="form"/>
                    <my-button name="新增物品" site="form"/>
                  </div>
                </div>
            </el-form>
            <div slot="footer" align="center" class="dialog-footer">
              <my-button name="确定" site="form" />
              <my-button name="取消" site="form" @click="adddialog = false"/>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-dialog>
        </el-card>
      </el-container>
            <el-pagination
              :small="false"
              :current-page="pageNum"
              :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400, 500]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </el-card>
    </el-container>
    <!--添加/编辑弹窗-->
    <edit v-if="editSetting.show" :setting="editSetting" ref="editRef" @close="editSetting.show=false" @search="refreshData"></edit>
    <detail ref="detailRef"></detail>
    <my-import
      :import-setting="importSetting"
      :dialog-show="importSetting.dialogShow"
@@ -129,196 +88,87 @@
</template>

<script>
import MyButton from "@/components/myButton/myButton";
import { procureList, procureDel, procureIncome } from '@/api/stock/procure/purchaseOrder';
import MyButton from '@/components/myButton/myButton';
import SettingIplatform from '@/utils/settingIplatform';
import myImport from '@/views/components/myImport'
import {getBaseUrl} from '@/utils/base';
import myImport from '@/views/components/myImport';
import edit from './edit';
import detail from './detail';
import { getBaseUrl } from '@/utils/base';
import * as DateFormatter from '@/utils/DateFormatter';

export default {
  name: "index",
  components: {MyButton, myImport},
  name: 'index',
  components: { MyButton, myImport, edit, detail },
  data() {
    return {
      
      loading: false,
      adddialog: false,
      formData:{
        tableData:[
          {
            projectName:'555'
          },
          {
            projectName:'444'
          }
        ],
      },
      list: [],
      // 搜索框
      items: [
        {
          type: 'text',
          dataIndex: 'name',
          label: '出库单号',
          dataIndex: 'businessFormCode',
          label: '调拨单号',
          placeholder: '请输入',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'text',
          dataIndex: 'name',
          dataIndex: 'goodsTemplateName',
          label: '物品名称',
          placeholder: '可模糊搜索',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'select',
          dataIndex: 'name',
          label: '机构',
          placeholder: '请选择',
          defaultValue: '',
          options: [],
        },
        {
          type: 'text',
          dataIndex: 'name',
          dataIndex: 'buyerName',
          label: '创建人',
          placeholder: '请输入',
          defaultValue: ''
          defaultValue: '',
        },
        {
          type: 'select',
          dataIndex: 'states',
          label: '状态',
          placeholder: '请选择',
          defaultValue: '',
          options: [
            {
              label: '全部',
              value: '',
            },
            {
              label: '待调拨',
              value: '1',
            },
            {
              label: '已调拨',
              value: '2',
            },
          ],
        },
        {
          type: 'date-picker',
          dataIndex: 'val1',
          label: '出库时间',
          defaultValue: ''
          label: '调拨时间',
          defaultValue: '',
        },
        {
          type: 'date-picker',
          dataIndex: 'val2',
          label: '至',
          defaultValue: ''
          defaultValue: '',
        },
        // {
        //   type: 'select',
        //   dataIndex: 'status',
        //   label: '状态',
        //   placeholder: '请选择',
        //   defaultValue: '1',
        //   options: [
        //     {
        //       label: '启用',
        //       value: '1'
        //     },
        //     {
        //       label: '禁用',
        //       value: '0'
        //     }
        //   ]
        // }
      ],
      proData: [
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
        },
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'郑州市邮政分公司'
            },
          ]
        },
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
        },
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        },
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        },
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        },
        {
          order_no:'55555',
          customer_name:'郑州市邮政分公司',
          data:[
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'20件'
            },
            {
              order_no:'石勒芬褐色碳粉',
              customer_name:'666'
            },
          ]
          
        }
      ],
      // 树数据
      treeDataList: [],
@@ -327,25 +177,25 @@
        tenantId: null,
        userName: null,
        userPhone: null,
        status: 1
        states: null,
      },
      // 导入
      importSetting: {
          dialogTitle: '导入',
          dialogShow: false,
          fileSettings: {
              data: {},
              uploadUrl: getBaseUrl()+"/pc/fin/sys/tenant/import", // 上传地址
              accept: '.xls', // 格式
              type: 'text', // 回显形式
              loading: false // 导入效果
          },
          /* 模板下载 */
          templateSettings: {
              templateName: '导入模板.xls', // 名称
              templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate' // 下载地址
          },
          onSuccess: null
        dialogTitle: '导入',
        dialogShow: false,
        fileSettings: {
          data: {},
          uploadUrl: getBaseUrl() + '/pc/fin/sys/tenant/import', // 上传地址
          accept: '.xls', // 格式
          type: 'text', // 回显形式
          loading: false, // 导入效果
        },
        /* 模板下载 */
        templateSettings: {
          templateName: '导入模板.xls', // 名称
          templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate', // 下载地址
        },
        onSuccess: null,
      },
      editSetting: {
        title: '',
@@ -353,105 +203,121 @@
        orgId: '',
        show: false,
      },
    }
      pageNum: 1,
      pageSize: 10,
      total: 0,
    };
  },
  computed: {
    clientHeight () {
      return document.documentElement.clientHeight
    clientHeight() {
      return document.documentElement.clientHeight;
    },
  },
  filters: {
    formatTime(time) {
      if (!time) return;
      return DateFormatter.LongToDateTime(time);
    },
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSizeChange(){},
    handleCurrentChange(){},
    fetchData() {
      this.loading = true;
      procureList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.filterFrom,
      }).then((res) => {
        this.list = res.datas;
        this.total = res.totalRows;
        this.loading = false;
        console.log(this.list);
      });
    },
    //导入
    importOrg() {
        this.importSetting.dialogShow = true
        this.importSetting.onSuccess = (response, callBack) => {
            if (response.code===1){
              this.$message.success(response.msg)
              this.search(1)
            }else{
              this.$message.warning(response.msg)
            }
            callBack()
      this.importSetting.dialogShow = true;
      this.importSetting.onSuccess = (response, callBack) => {
        if (response.code === 1) {
          this.$message.success(response.msg);
          this.search(1);
        } else {
          this.$message.warning(response.msg);
        }
        callBack();
      };
    },
   
    addtable() {
      this.adddialog = true
    // 导出
    handleExport() {},
    // 新增
    handleAdd() {
      this.editSetting.id = null;
      this.editSetting.info = null;
      this.editSetting.title = '新增';
      this.editSetting.show = true;
    },
    // 编辑
    handleEdit(row) {
      this.editSetting.id = row.id;
      this.editSetting.info = null;
      this.editSetting.title = '编辑';
      this.editSetting.show = true;
    },
    // 详情
    handleDetail(row) {
      this.$refs.detailRef.open(row.id);
    },
    // 调拨
    handleIncome(row) {
      this.$confirm(`您确定 单号：${row.businessFormCode}  调拨吗?`, '调拨调拨')
        .then(function () {
          procureIncome({ id: row.id }).then((res) => {
            this.$message.success('调拨成功！');
            this.search();
          });
        })
        .catch(() => {});
    },
    del(row) {
      this.$modal
        .confirm('是否确认删除调拨单号为"' + row.businessFormCode + '"的数据吗？')
        .then(function () {
          procureDel({ id: row.id }).then((res) => {});
        })
        .then((res) => {
          this.$message.success('删除成功！');
          this.search();
        })
        .catch(() => {});
    },
    // 分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.search({ pageNum: 1 });
    },
    handleCurrentChange(pageNum) {
      this.myTable.paging.page.pageNum = pageNum;
      this.search({ pageNum: pageNum });
    },
    // 查询table列表
    search(pageNum) {
      if (pageNum != undefined) {
        // this.$refs.myTable.search(pageNum)
      } else {
        // this.$refs.myTable.search()
      }
      this.fetchData();
    },
    refreshData() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.search();
    },
    fifterForm(params) {
      console.log(params,'555');
      this.filterFrom = Object.assign(this.filterFrom, params)
      this.search(1)
    }
  }
}
      this.filterFrom = Object.assign(this.filterFrom, params);
      this.search(1);
    },
  },
};
</script>

<style scoped>
.card {
    display: flex;
    flex-wrap: wrap;
    margin: 0px !important;
    .cm-item {
        width: 100%;
    }
    .cm-item /deep/ .el-card__body {
        padding: 10px;
    }
}
.card-data{
  position: relative;
  margin-top: 8px;
  .card-container{
    display: inline-block; 
    width: 70%;
    .hed-one{
      color: #2298EE;
      font-size: 18px;
    }
    .one-hed{
      margin-top: 5px;
      .box{
        display: inline-block;  
        margin-right: 20px;  
        margin-top: 10px;
      }
    }
    .span-two{
      color: #83919e;
      font-size: 14px;
    }
    .card-end{
      font-size: 14px;
      color: #3d3d3d;
      margin-top: 15px;
      display: flex;  
      flex-wrap: wrap; 
      .two-end{
        width: calc(33.33% - 20px); 
        margin-bottom: 15px; 
      }
    }
    
  }
  .card-but{
    position: absolute;
    right: 20px;
    top: 40%;
  }
  
}

<style scoped lang="scss">
@import url(../../index.scss);
</style>