~admin/ERP_override.git

 
 
<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-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-form>
 
<div>
  <el-button class="mt-4" style="width: 10%" @click="onAddItem"
  >添加</el-button>
  <el-table :data="tableData" style="width: 100%" height="520" border>
    <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>
      </template>
    </el-table-column>
    <el-table-column fixed prop="wlcode" label="物料编码" width="150" />
    <el-table-column prop="wlname" label="物料名称" width="200" />
    <el-table-column prop="cd" label="产地" width="120" />
    <el-table-column prop="kd" label="宽度" width="60" />
    <el-table-column prop="gd" label="高度" width="60" />
    <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="120" />
    <el-table-column prop="hd" label="单价" width="60" />
    <el-table-column prop="hd" label="总数量" width="90" />
    <el-table-column prop="hd" label="总面积" width="90" />
    <el-table-column prop="hd" label="总金额" width="90" />
    <el-table-column prop="hd" label="备注" width="120" />
 
  </el-table>
 
</div>
</div>
</template>
 
<script setup>
import { ref,reactive } from 'vue'
 
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  supplier:'',
  buyer:'',
  buyItem:'',
  buyType:''
 
})
 
const onSubmit = () => {
  console.log('submit!')
}
const buyerOptions = [
  {value: '0', label: '供应商1'},
  {value: '1', label: '供应商2'},
  {value: '2', label: '供应商3'},
  {value: '3', label: '供应商4'},
  {value: '4', label: '供应商5'},
  {value: '5', label: '供应商6'},
]
 
 
 
const value = ref('')
const cgBuMen = ref('')
 
const CGTypeOptions = [
  {
    value: '1',
    label: '标准类型',
  },
  {
    value: '2',
    label: '非标准类型',
  },
  {
    value: '3',
    label: '追加采购',
  },
 
]
 
 
const CGBuMenOptions=[
  {
    value: '0',
    label: '采购华北部',
  },
  {
    value: '1',
    label: '采购东南部',
  },
  {
    value: '2',
    label: '采购西北部',
  },
  {
    value: '3',
    label: '采购中原部',
  },
  {
    value: '4',
    label: '采购外国部',
  },
 
]
 
const BuyerOptions=[
  {
    value: '0',
    label: '采购员1',
  },
  {
    value: '1',
    label: '采购员2',
  },
  {
    value: '2',
    label: '采购员3',
  },
  {
    value: '3',
    label: '采购员4',
  },
  {
    value: '4',
    label: '采购员5',
  },
 
]
 
import dayjs from 'dayjs'
 
const now = new Date()
 
const tableData = ref([
  {
    wlcode: '202305010000001',
    wlname: '这是一个物料名称',
    cd: '产地12',
    hd: '8',
    gd: '2440',
    kd: '3660',
    xh:'CN10P'
  },
  {
    wlcode: '202305010000001',
    wlname: '这是一个物料名称',
    cd: '产地1',
    gd: '2440',
    kd: '3660',
    hd: '5',
    xh:'CN10P'
  },
  {
    wlcode: '202305010000001',
    wlname: '这是一个物料名称',
    cd: '产地13',
    hd: '12',
    gd: '2440',
    kd: '3660',
    xh:'CN10P'
  },
])
 
 
 
const onAddItem = () => {
  now.setDate(now.getDate() + 1)
  tableData.value.push({
    wlcode: dayjs(now).format('YYYYMMDDHHmms')+'01',
    wlname: '这是一个物料名称',
    cd: '产地1',
    hd: '6',
    xh:'CN10P',
    gd: '2440',
    kd: '3660',
  })
}
 
/*const deleteRow = (index: number) => {
  tableData.value.splice(index, 1)
}*/
 
</script>
 
 
<style scoped>
.custom-header {
  .el-checkbox {
    display: flex;
    height: unset;
  }
}
.item-style{
  width:300px;
}
</style>