采购单，物品分类

haoyahui

2023-11-09 8f24fea6ef79a68bbda4991bd9bd7a60402ad033

采购单，物品分类

 admin-web/src/api/baseSetting/finsystenant.js

@@ -9,9 +9,7 @@
export function getTree(parameter) {
  return request.get(SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/select/tree_fin_tenant', {params: parameter})
}
// export function getTree(parameter) {
//   return request.get(SettingIplatform.apiBaseURL + '/pc/base/category/select/tree', {params: parameter})
// }


/**
 * @Description 根据首字母查询区划列表

 admin-web/src/api/foudation/classification.js

New file
@@ -0,0 +1,13 @@
import request from '@/utils/request'
import SettingIplatform from '@/utils/settingIplatform';

export function getTree(parameter) {
  return request.get(SettingIplatform.apiBaseURL + '/pc/base/category/select/tree', {params: parameter})
}
export function getCategoryDetail(params) {
  return request({
    url: '/pc/base/category/detail',
    method: 'get',
    params
  })
}

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

New file
@@ -0,0 +1,81 @@
import request from '@/utils/request';

// 仓库选择列表
export function selectTenantWarehouse(params) {
  return request({
    url: '/pc/base/warehouse/select/tenant_warehouse',
    method: 'get',
    params,
  });
}

// 物品分类列表
export function getCategoryDetail(params) {
  return request({
    url: '/pc/base/category/detail',
    method: 'get',
    params,
  });
}

// 物品列表
export function goodsTemplate(params) {
  return request({
    url: '/pc/base/goods/template/query/goodsTemplate',
    method: 'get',
    params,
  });
}
// 规格型号
export function goodsModel(params) {
  return request({
    url: '/pc/base/goods/models/query/goodsModel',
    method: 'get',
    params,
  });
}

// 采购单
export function procureAdd(data) {
  return request({
    url: '/pc/whForm/procure/add',
    method: 'post',
    data,
  });
}
export function procureEdit(data) {
  return request({
    url: '/pc/whForm/procure/edit',
    method: 'post',
    data,
  });
}
export function procureList(params) {
  return request({
    url: '/pc/whForm/procure/list',
    method: 'get',
    params,
  });
}
export function procureDetail(params) {
  return request({
    url: '/pc/whForm/procure/detail',
    method: 'get',
    params,
  });
}
export function procureDel(data) {
  return request({
    url: '/pc/whForm/procure/del',
    method: 'delete',
    data,
  });
}
// 入库
export function procureIncome(data) {
  return request({
    url: '/pc/whForm/procure/income',
    method: 'post',
    data,
  });
}

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

@@ -1,25 +1,34 @@
<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="fatherCategoryId">
        <el-input v-model="formData.fatherCategoryId" clearable maxlength="20" show-word-limit style="width: 100%"/>
      <el-form-item label="上级分类" prop="fatherCategoryName" :key="key">
        <el-input
          v-model="formData.fatherCategoryName"
          clearable
          maxlength="20"
          show-word-limit
          style="width: 100%"
          disabled
        />
      </el-form-item>
      <el-form-item label="分类名称" prop="categoryName">
        <el-input v-model="formData.categoryName" clearable maxlength="20" show-word-limit style="width: 100%"/>
        <el-input v-model="formData.categoryName" clearable maxlength="20" show-word-limit style="width: 100%" />
      </el-form-item>
      <el-form-item label="类别" prop="classification">
        <!-- <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/> -->
      <!-- 只有第三级分类信息维护时需要选类别 -->
      <el-form-item label="类别" prop="classification" v-if="plevels==2">
        <el-select v-model="formData.classification" placeholder="" clearable style="width: 100%">
          <el-option
            v-for="item in options"
            :key="item.code"
            :label="item.label"
            :value="item.code">
          </el-option>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="顺序" prop="orderNumber">
        <el-input v-model="formData.orderNumber" clearable maxlength="20" show-word-limit style="width: 100%"/>
        <el-input
          type="number"
          v-model="formData.orderNumber"
          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">
@@ -29,105 +38,108 @@
      </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';
import { getDicts } from '@/api/system/dict/data';
import { getCategoryDetail } from '@/api/foudation/classification';
export default {
  components: {winSm, myButton},
  components: { winSm, myButton },
  props: {
    setting: {
      type: Object,
      default: () => {
      }
    }
      default: () => {},
    },
  },
  data() {
    return {
      checkAll: false,
      checkedList: [],
      options:[
        {
          code: 'A',
          label:'A'
        },
        {
          code: "B",
          label:'B'
        },
        {
          code: 'c',
          label:'C'
        }
      ],
      options: [], // 类别列表
      formData: {
        code: '',
        name: '',
        states: '',
        summary: '',
        planTypeCode:''
        fatherCategoryId: '', // 上级分类
        fatherCategoryName: '',
        categoryName: '', //分类名称
        classification: '', //类别
        orderNumber: '', // 顺序
        states: 1, // 状态
      },
      rules: {
        fatherCategoryId: [
          {required: true, message: '请输入', trigger: 'blur'}
        ],
        categoryName: [
          {required: true, message: '请输入', trigger: 'blur'}
        ]
      }
    }
        fatherCategoryName: [{ required: true, message: '请输入', trigger: 'blur' }],
        categoryName: [{ required: true, message: '请输入', trigger: 'blur' }],
        classification: [{ required: true, message: '请选择', trigger: 'change' }],
        orderNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      key: Math.random(),
      plevels:1
    };
  },
  created() {
    if(this.setting.info){
      this.formData = Object.assign({},JSON.parse(this.setting.info))
    if (this.setting.title == '编辑') {
      this.formData = Object.assign({}, JSON.parse(this.setting.info));
    } else {
      this.formData.fatherCategoryId = this.setting.pid;
    }
    this.getCategoryName();
    getDicts('GOODS_PRICE').then((res) => {
      this.options = res.map((v) => {
        v.label = v.dict_label;
        v.value = v.dict_value;
        return v;
      });
    });
  },
  methods: {
    getEditInfo(id){

    getEditInfo(id) {},
    // 分类名称获取
    getCategoryName() {
      getCategoryDetail({ id: this.formData.fatherCategoryId }).then((res) => {
        this.formData.fatherCategoryName = res.categoryName;
        this.key = Math.random();
        this.plevels = res.levels
      });
    },
    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) {
            debugger;
            // 编辑接口
            finsystenant.edit(params).then(res => {
              if (res) {
                this.$message.success('保存成功！')
                this.close()
                this.$emit('search')
              } else {
                this.$message.error('保存失败')
              }
            })
          }else{
            params.orgId = this.setting.orgId
            finsystenant.add(params).then(res => {
              if (res) {
                this.$message.success('保存成功！')
                this.close()
                this.$emit('search')
              } else {
                this.$message.error('保存失败')
              }
            })
            finsystenant.edit(params).then((res) => {
              this.$message.success('保存成功！');
              this.close();
              this.$emit('search');
            });
          } else {
            params.orgId = this.setting.orgId;
            console.log(params);
            finsystenant
              .add(params)
              .then((res) => {
                this.$message.success('保存成功！');
                this.close();
                this.$emit('search');
              })
              .catch((err) => {
                console.log('err', err);
              });
          }
        } else {
          this.$message.error('校验未通过，请检查。')
          this.$message.error('校验未通过，请检查。');
        }
      })
    }
  }
}
      });
    },
  },
};
</script>

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

@@ -1,7 +1,7 @@
<template>
  <div class="app-container">
    <el-container>
      <el-card shadow="never" style="width: 240px;margin-right: 15px">
      <el-card shadow="never" style="width: 240px; margin-right: 15px">
        <my-tree ref="searchTree" :tree-list="treeDataList" @setNode="nodeClick" @search="search"></my-tree>
      </el-card>
      <el-container>
@@ -13,11 +13,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"/>
          <edit v-if="editSetting.show" :setting="editSetting" @close="editSetting.show = false" @search="refreshData" />
        </el-card>
      </el-container>
    </el-container>
@@ -30,19 +30,22 @@
</template>

<script>
import myTree from '@/components/myTree/index'
import MyTableV2 from "@/components/myTable/myTableV2";
import MyButton from "@/components/myButton/myButton";
import myTree from '@/components/myTree/index';
import MyTableV2 from '@/components/myTable/myTableV2';
import MyButton from '@/components/myButton/myButton';
import SettingIplatform from '@/utils/settingIplatform';
import items from './items'
import edit from './edit'
import * as finsystenant from '@/api/baseSetting/finsystenant'
import myImport from '@/views/components/myImport'
import {getBaseUrl} from '@/utils/base';
import items from './items';
import edit from './edit';
import * as finsystenant from '@/api/baseSetting/finsystenant';
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'

export default {
  name: "index",
  components: {MyButton, MyTableV2, edit, myTree, myImport},
  name: 'index',
  components: { MyButton, MyTableV2, edit, myTree, myImport },
  data() {
    return {
      // 搜索框
@@ -54,25 +57,25 @@
        tenantId: null,
        userName: null,
        userPhone: null,
        states: 1
        states: 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: '',
@@ -87,11 +90,13 @@
        url: SettingIplatform.apiBaseURL + '/pc/base/category/list', // 请求地址
        // 工具条
        tools: {
          columnsCtrl: {// 列控制按钮
            show: false
          columnsCtrl: {
            // 列控制按钮
            show: false,
          },
          generalExport: {// 通用导出按钮
            show: false
          generalExport: {
            // 通用导出按钮
            show: false,
          },
          // 自定义工具条按钮
          custom: [
@@ -101,40 +106,41 @@
                this.showAdd(null);
              },
            },
          ]
          ],
        },
        // 列信息
        columns: [
          {title: '分类名称', field: 'categoryName', align: 'center'},
          {title: '类别', field: 'classification', align: 'left'},
          {title: '显示顺序', field: 'orderNumber', align: 'center', width: '80px'},
          { title: '分类名称', field: 'categoryName', align: 'center' },
          { title: '类别', field: 'classification', align: 'left' },
          { title: '显示顺序', field: 'orderNumber', align: 'center', width: '80px' },
          {
            field: 'states',
            title: '状态',
            align: 'center',
            width: 100,
            switch: row => {
              const result = {}
            switch: (row) => {
              const result = {};
              if (row.states == 1) {
                Object.assign(result, {
                  value: true, // 开
                  label: '是', // 开的描述
                  click: () => { // 点击事件
                    this.updState(row)
                  }
                })
                  click: () => {
                    // 点击事件
                    this.updState(row);
                  },
                });
              } else {
                Object.assign(result, {
                  value: false, // 关
                  label: '否', // 关的描述
                  click: () => {
                    this.updState(row)
                  }
                })
                    this.updState(row);
                  },
                });
              }
              return result
            }
          }
              return result;
            },
          },
        ],
        // 操作信息
        operation: {
@@ -152,7 +158,7 @@
              events: (row) => {
                this.del(row);
              },
            }
            },
          ],
        },
        paging: {
@@ -162,81 +168,88 @@
            small: false,
            pageNum: 1,
            pageSize: 10,
            total: 0
          }
        }
            total: 0,
          },
        },
      },
    }
    };
  },
  created() {
    // 获取机构树
    this.initTreeData()
    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
      })
    })
  },
  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 => {
      getTree().then((res) => {
        console.log(res, 'restree');
        console.log(this.importSetting,'this.importSetting');
        const content = res || []
        console.log(this.importSetting, 'this.importSetting');
        const content = res || [];
        // this.treeDataList.splice(0, this.treeDataList.length)
        this.treeDataList = content
        this.treeDataList = content;
        // if (content.length > 0) {
        //   this.importSetting.fileSettings.data = {pid: content[0].id}
        // }
      })
      });
    },
    updState(row) {
      let vm = this
      let text = row.states == 0 ? "启用" : "禁用";
      let vm = this;
      let text = row.states == 0 ? '启用' : '禁用';
      vm.$modal.confirm('确认要' + text + '"' + row.categoryName + '"吗？').then(function () {
        let params = Object.assign({}, row)
        params.states = row.states == 1 ? 0 : 1
        finsystenant.edit(params).then(res => {
        let params = Object.assign({}, row);
        params.states = row.states == 1 ? 0 : 1;
        finsystenant.edit(params).then((res) => {
          if (res) {
            row.states = row.states === 1 ? 0 : 1
            vm.$modal.msgSuccess(text + "成功");
            vm.search()
            row.states = row.states === 1 ? 0 : 1;
            vm.$modal.msgSuccess(text + '成功');
            vm.search();
          }
        })
      })
        });
      });
    },
    del(row) {
      this.$modal
        .confirm('是否确认删除名称为"' + row.categoryName + '"的机构吗？')
        .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;
      // }
      if (!this.editSetting.orgId) {
        this.$message.warning('请先选择左侧机构')
      } else {
      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;
@@ -246,37 +259,42 @@
    },
    nodeClick(param) {
      console.log(param, '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.fatherCategoryId = this.p.id;
        this.editSetting.orgId = this.p.id;
      } else {
        this.filterFrom.tenantId = null
        this.editSetting.orgId = null
        this.filterFrom.fatherCategoryId = 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();
      }
    },
    refreshData() {
      this.initTreeData()
      this.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/foundation/classification/items.js

@@ -12,20 +12,7 @@
    label: '类别',
    placeholder: '请选择',
    defaultValue: '',
    options: [
      {
        label: 'A',
        value: 'A'
      },
      {
        label: 'B',
        value: 'B'
      },
      {
        label: 'C',
        value: 'C'
      }
    ]
    options: []
  },
  {
    type: 'select',

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

New file
@@ -0,0 +1,147 @@
<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"
  >
    <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>
.img-row {
  display: flex;
  align-content: center;
}
.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;
  }
}
</style>

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

New file
@@ -0,0 +1,511 @@
<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"
  >
    <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].baseCategoryId = ''

      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 = []

      // 根据选中物品名称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">
.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;
    }
  }
}
</style>

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

@@ -1,126 +1,92 @@
<template>
  <div class="app-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>
                              <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>
            <!--列表-->
            <my-button name="新增" @click="addtable" site="tools" size="medium" />
            <my-button name="导入" @click="importSetting.dialogShow = true" site="tools" size="medium" />
            <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-income'">{{ item.states == 1 ? '待入库' : '已入库' }}</div>
                        </div>
                        <div class="card-header-right">
                          <template v-if="item.states == 1">
                            <el-button name="编辑" site="form" type="success" size="mini" @click="handleEdit(item)"
                              >编辑</el-button
                            >
                            <el-button name="入库" site="form" type="primary" size="mini" @click="handleIncome(item)"
                              >入库</el-button
                            >
                            <el-button name="删除" site="form" type="danger" size="mini" @click="del(item)"
                              >删除</el-button
                            >
                          </template>
                          <template v-if="item.states != 1">
                            <el-button site="form" type="success" size="mini" @click="handleExport(item)"
                              >导出入库单</el-button
                            >
                          </template>
                          <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>
                      <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>
                            </div>
                            <div class="card-but">
                              <div>
                                <my-button style="width: 120px;" name="编辑"   site="form" />
                                <my-button style="width: 120px;" name="入库"   site="form" />
                              </div>
                              <div  style="margin-top: 10px;">
                                <my-button style="width: 120px;" name="删除"   site="form" />
                                <my-button style="width: 120px;" name="查看详情" site="form" />
                              </div>
                            <div class="value-box-item">
                              <span class="label">金额：</span>
                              <span class="value">{{ just.price }}</span>
                            </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"
@@ -130,196 +96,96 @@
</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:[
      list: [],
      formData: {
        tableData: [
          {
            projectName:'555'
            projectName: '555',
          },
          {
            projectName:'444'
          }
            projectName: '444',
          },
        ],
      },
      // 搜索框
      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: [],
@@ -328,25 +194,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: '',
@@ -354,104 +220,223 @@
        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;
    }
<style scoped lang="scss">
.ml-20 {
  margin-left: 20px;
}
.card-data{
.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{
    display: inline-block; 
    width: 70%;
    .hed-one{
      color: #2298EE;
      font-size: 18px;
  .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;
    }
    .one-hed{
      margin-top: 15px;
      .box{
        display: inline-block;  
        margin-right: 20px;  
    .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;
      }
    }
    .span-two{
      color: #83919e;
      font-size: 14px;
    .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{
    .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; 
      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;
            }
          }
        }
      }
    }
    
  }
  .card-but{
    position: absolute;
    right: 20px;
    top: 40%;
  }
  
}

</style>

 admin-web/src/views/systemManger/server/user/edit.vue

@@ -138,6 +138,7 @@
            // 获取所有角色
            getAllRole() {
              const user = this.$store.getters.userInfo
              this.data_scope = 1
              if (user.lv == 1) {
                this.data_scope = 1
              }