Merge branch 'master' of http://10.153.19.25:10101/r/ERP_override

guoyuji

2023-12-25 729857291aab73cfd0d61056887ce92657792ca0

 north-glass-erp/northglass-erp/src/views/mm/purchaseOrder/Create.vue

@@ -1,130 +1,393 @@


<template>
<div>
  <el-form label-width="100px"   :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="采购类型" class="item-style" >
      <el-select v-model="form.buyType" class="m-2" placeholder="选择采购类型" clearable >
        <el-option
            v-for="item in CGTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="采购部门" class="item-style" >
      <el-select v-model="cgBuMen" class="m-2" placeholder="选择采购部门" clearable >
        <el-option
            v-for="item in CGBuMenOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="供应商" class="item-style" >
      <el-cascader
          placeholder="选择供应商"
          :options="buyerOptions"
          filterable
          clearable
          empty-text="empty-text"
          :v-model="form.supplier"
      >
      </el-cascader>
    </el-form-item>


    <el-form-item label="采购员" class="item-style" >
      <el-select v-model="form.buyer" class="m-2" placeholder="选择采购部门" clearable >
        <el-option
            v-for="item in BuyerOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="采购组织" class="item-style" >
     <el-input v-model="form.buyItem" placeholder="采购组织" clearable ></el-input>
    </el-form-item>

    <el-form-item label="制表日期" class="item-style" >

        <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择制表日期"
            style="width: 100%"
        />

    </el-form-item>
    <el-form-item class="item-style" >
  <el-header height="auto">
    <el-form label-width="100px" :inline="true" :model="formInline" class="demo-form-inline">
      <el-row :gutter="10">

        <el-col :span="6" :offset="6">
          <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-col :span="6">
          <el-form-item label="采购类型" class="item-style">
            <el-select v-model="form.buyType" class="m-2" placeholder="选择采购类型" clearable>
              <el-option
                  v-for="item in CGTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-button>取消</el-button>
        <el-col :span="6">
          <el-form-item label="采购部门" class="item-style">
            <el-select v-model="cgBuMen" class="m-2" placeholder="选择采购部门" clearable>
              <el-option
                  v-for="item in CGBuMenOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>



        <el-col :span="6">
          <el-form-item label="供应商" class="item-style">
            <el-cascader
                placeholder="选择供应商"
                :options="buyerOptions"
                filterable
                clearable
                empty-text="empty-text"
                :v-model="form.supplier"
            >
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="采购员" class="item-style">
            <el-select v-model="form.buyer" class="m-2" placeholder="选择采购部门" clearable>
              <el-option
                  v-for="item in BuyerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form-item>
  </el-form>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="采购组织" class="item-style">
            <el-input v-model="form.buyItem" placeholder="采购组织" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="制表日期" class="item-style">

<div>
  <el-button class="mt-4" style="width: 10%" @click="onAddItem"
  >添加</el-button>
  <el-table :data="tableData" style="width: 98%" max-height="500" border show-summary
            sum-text=" ">
    <el-table-column fixed="left" label="操作" width="60">
      <template #default="scope">
        <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
        >
          删除
        </el-button>
            <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="选择制表日期"
                style="width: 100%"
            />

          </el-form-item>
        </el-col>
<!--        <el-col :span="6">
          <el-form-item class="item-style">
            <el-row :gutter="10">

              <el-col :span="6" :offset="6">
                <el-button type="primary" @click="onSubmit">保存</el-button>
              </el-col>
              <el-col :span="6" :offset="6">
                <el-button>返回订单查询</el-button>
              </el-col>


            </el-row>

          </el-form-item>
        </el-col>-->
        <el-col :span="6"></el-col>

      </el-row>


    </el-form>

  </el-header>

  <el-main style="padding-top: 5px;height:100%">
<!--    <el-button class="mt-4" style="width: 10%" @click="onAddItem"
    >添加
    </el-button>-->

    <vxe-grid

        max-height="500"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"
    >

      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{ key + ':  ' }}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>
    </el-table-column>
    <el-table-column fixed prop="wlcode" label="物料编码" width="150" />
    <el-table-column prop="wlname" label="物料名称" width="180" />
    <el-table-column prop="cd" label="产地" width="100" />
    <el-table-column prop="kd" label="宽度" width="70" />
    <el-table-column prop="gd" label="高度" width="70" />
    <el-table-column prop="hd" label="厚度" width="60" />
    <el-table-column prop="xh" label="型号" width="80" />
    <el-table-column prop="hd" label="单位数量" width="100" />
    <el-table-column prop="hd" label="单位" width="60" />
    <el-table-column prop="hd" label="箱数" width="60" />
    <el-table-column prop="hd" label="单片面积" width="100" />
    <el-table-column prop="hd" label="单价" width="60" />
    <el-table-column prop="hd" label="总数量" width="80" />
    <el-table-column prop="hd" label="总面积" width="80" />
    <el-table-column prop="hd" label="总金额" width="80" />
    <el-table-column prop="hd" label="备注" width="120" />

  </el-table>
      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <!--          <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>-->
        <!--          <el-button @click="cellClickEvent" link type="primary" size="small">详情</el-button>-->
      </template>

</div>
</div>
      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </div>
      </template>
    </vxe-grid>

  </el-main>

</template>

<script setup>
import { ref,reactive } from 'vue'
import {ref, reactive} from 'vue'
let router = useRouter()

// do not use same name with ref
//组件接收参数
const gridOptions = reactive({
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY: {enabled: true},//开启虚拟滚动
  showOverflow: true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  columns: [
    //{title: '操作', width: '8%', slots: {default: 'button_slot'}, fixed: "left"},
    {type: 'seq', fixed: "left", title: ' ', width: 50},
    {type: 'checkbox',fixed:"left", title: '', width: 50 },
    {type: 'expand', title:'详情', fixed: "left", slots: {content: 'content'}, width: 50},
    {field: 'cgdh', width: '10%', title: '物料编码', filters: [{data: ''}], slots: {filter: 'num1_filter'}, editRender: { name: 'input', attrs: { placeholder: '' } },sortable: true},
    {field: 'cgzt', width: '10%', title: '物料名称', filters: [{data: ''}], slots: {filter: 'num1_filter'},editRender: { name: 'input', attrs: { placeholder: '' } }, sortable: true},
    {field: 'gys', width: '10%',title: '产地', filters: [{data: ''}], slots: {filter: 'num1_filter'}, editRender: { name: 'input', attrs: { placeholder: '' } },sortable: true},
    {field: 'w', width: '8%',title: '宽度', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/  editRender: { name: 'input', attrs: { placeholder: '' } }, sortable: true},
    {field: 'g', width: '8%',title: '高度', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/  editRender: { name: 'input', attrs: { placeholder: '' } },sortable: true},
    {field: 'h', width: '8%',title: '厚度', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/  editRender: { name: 'input', attrs: { placeholder: '' } },sortable: true},
    {field: 'xh', width: '8%',title: '型号',/*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/  editRender: { name: 'input', attrs: { placeholder: '' } },sortable: true},
    {field: 'dw', width: '8%',title: '单位', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/ editRender: { name: 'input', attrs: { placeholder: '' } },sortable: true},
    {field: 'sl', width: '8%',title: '数量', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/ editRender: { name: 'input', attrs: { placeholder: '' } },sortable: true},
    {field: 'sl', width: '8%',title: '操作数量', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/ editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'sl', width: '12%',title: '箱数',    /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/ editRender: { name: 'input', attrs: { placeholder: '' } },sortable: true},
    {field: 'je', width: '8%',title: '单片面积', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/  editRender: { name: 'input', attrs: { placeholder: '' } },sortable: true},
    {field: 'je', width: '12%',title: '单价',   /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/   editRender: { name: 'input', attrs: { placeholder: '' } },sortable: true},
    {field: '6', width: '8%',title: '总数量',   /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/  editRender: { name: 'input', attrs: { placeholder: '' } },sortable: true},
    {field: 'sl', width: '8%',title: '总面积', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/   editRender: { name: 'input', attrs: { placeholder: '' } },sortable: true},
    {field: 'yl', width: '10%',title: '总金额',/*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/   editRender: { name: 'input', attrs: { placeholder: '' } },sortable: true},
    {field: 'yl', width: '10%',title: '备注', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/   editRender: { name: 'input', attrs: { placeholder: '' } }, sortable: true}
  ],//表头参数
  toolbarConfig: {
    buttons: [
        {type:'text'},
      {
      'name': '新增',

      'code':'Add',
    },
      {
        'name': '移除',

        'code':'Remove'
      },
      {
        'name': '保存订单',
        status:'primary',
        'code':'Save'
      },{
        'name': '入库',
        status:'primary',
        'code':'Storage'
      },
      {
        'name': '退货',
        status:'primary',
        'code':'Return'
      },
      {
        'name': '返回查询',

        'code':'GoSelect'
      }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    tools: [

    ],

  },//表头按钮
  /*data: [{},{},{},{},{},{}],//table body实际数据*/
  data: [{},{},{}],//table body实际数据
  mergeFooterItems: [
    {row: 0, col: 0, rowspan: 1, colspan: 4}
  ],//合并脚
  footerMethod({columns, data}) {//页脚函数
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        /* if (props.tableProp.footList.includes(column.field)) {
           return sumNum(data, column.field)
         }*/
        return ''
      })
    ]
  },

})

const xGrid = ref()
const gridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'Add': {//新增
          const record = {
            checked: false
          }
          $grid.insertAt(record, 0).then(({row}) => {
            $grid.setEditRow(row)
          })
          break
        }
        case 'Remove': {//移除
          if ($grid.getCheckboxRecords().length === 0) {
            openAlert({type: 'message', content: '请选择至少一条数据', status: 'warning'})
            //VXETable.modal.message( '请选择一条数据！')
            return
          } else {
            const type = VXETable.modal.confirm('您移除了' + $grid.getCheckboxRecords().length + '条数据！');
            //openAlert({type:'alert', content: '成功入库'+$grid.getCheckboxRecords().length+'条数据！', status: 'success' })
            //VXETable.modal.message( '请选择一条数据！')
            return
          }
          break
        }
        case 'Save': {//保存


          if(form.buyItem === null || form.buyItem === ''){
            openAlert({type: 'message', content: '采购组织不可为空', status: 'warning'})
          }

return

          if(buyerOptions.values() <= 0){

          }

            const type = VXETable.modal.confirm('是否确定保存当前订单信息？');
          openAlert({type: 'message', content: $grid.rows.number+'', status: 'warning'})
            return

          break
        }
        case 'GoSelect':{

          router.push({path: '/main/purchaseOrder/SelectPurchaseOrder'})
          break
        }

        case 'Storage': {//入库
          if ($grid.getCheckboxRecords().length === 0) {
            openAlert({type: 'message', content: '请选择至少一条数据', status: 'warning'})
            //VXETable.modal.message( '请选择一条数据！')
            return
          } else {
            const type = VXETable.modal.confirm('您选择了' + $grid.getCheckboxRecords().length + '条数据！,是否确认入库？');
            //openAlert({type:'alert', content: '成功入库'+$grid.getCheckboxRecords().length+'条数据！', status: 'success' })
            //VXETable.modal.message( '请选择一条数据！')
            return
          }
          break
        }
        case 'Return': {//退库
          if ($grid.getCheckboxRecords().length === 0) {
            openAlert({type: 'message', content: '请选择至少一条数据', status: 'warning'})
            //VXETable.modal.message( '请选择一条数据！')
            return
          } else {
            /*            async ()=>{
              const type = await.VXETable.modal.confirm('您选择了'+$grid.getCheckboxRecords().length+'条数据！,是否确认退库？');
            }*/
            const type = VXETable.modal.confirm('您选择了' + $grid.getCheckboxRecords().length + '条数据！,是否确认退库？');


            /* if(VXETable.modal.confirm('您选择了'+$grid.getCheckboxRecords().length+'条数据！,是否确认退库？' )){
              //openAlert({type:'message', content: '成功退库'+$grid.getCheckboxRecords().length+'条数据！', status: 'success',lockView: false, mask: false })


            }*/

            /* if(type==='confirm'){
              openAlert({type:'message', content: '成功退库'+$grid.getCheckboxRecords().length+'条数据！', status: 'success' })
            }

*/
            //openAlert({type:'alert', content: '成功退库'+$grid.getCheckboxRecords().length+'条数据！', status: 'success' })
            //VXETable.modal.message( '请选择一条数据！')
            return
          }
          break
        }

      }
    }
  },
  toolbarToolClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'myPrint': {
          $grid.print()
          break
        }
      }
    }
  },
}


const openAlert = (options) => {
  if(options.type==='message'){
    VXETable.modal.message(options)
  }else{
    VXETable.modal.alert(options)
  }

}





const form = reactive({
  name: '',
  region: '',
@@ -133,16 +396,18 @@
  type: [],
  resource: '',
  desc: '',
  supplier:'',
  buyer:'',
  buyItem:'',
  buyType:''
  supplier: '',
  buyer: '',
  buyItem: '',
  buyType: ''

})

const onSubmit = () => {
  console.log('submit!')
}

//供应商
const buyerOptions = [
  {value: '0', label: '供应商1'},
  {value: '1', label: '供应商2'},
@@ -153,10 +418,10 @@
]



const value = ref('')
const cgBuMen = ref('')

//采购类型
const CGTypeOptions = [
  {
    value: '1',
@@ -173,8 +438,8 @@

]


const CGBuMenOptions=[
//采购部门
const CGBuMenOptions = [
  {
    value: '0',
    label: '采购华北部',
@@ -198,7 +463,8 @@

]

const BuyerOptions=[
//采购人
const BuyerOptions = [
  {
    value: '0',
    label: '采购员1',
@@ -223,6 +489,8 @@
]

import dayjs from 'dayjs'
import {VXETable} from "vxe-table";
import {useRouter} from "vue-router";

const now = new Date()

@@ -234,7 +502,7 @@
    hd: '8',
    gd: '2440',
    kd: '3660',
    xh:'CN10P'
    xh: 'CN10P'
  },
  {
    wlcode: '202312305101',
@@ -243,7 +511,7 @@
    gd: '2440',
    kd: '3660',
    hd: '5',
    xh:'CN10P'
    xh: 'CN10P'
  },
  {
    wlcode: '202312405101',
@@ -252,20 +520,19 @@
    hd: '12',
    gd: '2440',
    kd: '3660',
    xh:'CN10P'
    xh: 'CN10P'
  },
])



const onAddItem = () => {
  now.setDate(now.getDate() + 1)
  tableData.value.push({
    wlcode: dayjs(now).format('YYYYMMDDss')+'01',
    wlcode: dayjs(now).format('YYYYMMDDss') + '01',
    wlname: '这是一个物料名称',
    cd: '产地1',
    hd: '6',
    xh:'CN10P',
    xh: 'CN10P',
    gd: '2440',
    kd: '3660',
  })
@@ -285,7 +552,8 @@
    height: unset;
  }
}
.item-style{
  width:300px;

.item-style {
  width: 300px;
}
</style>