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

guoyuji

2024-01-08 d5868d38cd7d46c52da971d7d0388d229495d729

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

@@ -1,10 +1,22 @@
<template>
  <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">
          <el-form-item label="采购类型" class="item-style">
            <el-select v-model="form.buyType" class="m-2" placeholder="选择采购类型" clearable>
    <el-descriptions
        class="margin-top"
        title=""
        :column="4"
        :size="'default'"
        border
        :rules="rules"
        :model="ruleForm"
    >

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy" prop="name">
        <template #label>
          <span style="color:red">*</span>
          采购类型
        </template>
<!--        <el-select v-model="form.buyType" class="m-2" placeholder="选择采购类型" clearable>-->
        <el-select v-model="ruleForm.name" class="m-2" placeholder="选择采购类型" clearable>
              <el-option
                  v-for="item in CGTypeOptions"
                  :key="item.value"
@@ -12,22 +24,21 @@
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <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-descriptions-item >

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          <span style="color:red">*</span>
          采购组织
        </template>
        <el-input v-model="ruleForm.name" placeholder="采购组织" clearable prop="name"></el-input>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          <span style="color:red">*</span>
          供应商
        </template>
            <el-cascader
                placeholder="选择供应商"
                :options="buyerOptions"
@@ -37,11 +48,31 @@
                :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-descriptions-item>

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          <span style="color:red">*</span>
          采购部门
        </template>
        <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-descriptions-item>



      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          <span style="color:red">*</span>
          采购员
        </template>
        <el-select v-model="form.buyer" class="m-2" placeholder="选择采购员" clearable>
              <el-option
                  v-for="item in BuyerOptions"
                  :key="item.value"
@@ -49,33 +80,24 @@
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-descriptions-item>

      </el-row>

      <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">

      <el-descriptions-item label-class-name="label-diy" class-name="content-diy"
      >
        <template #label>
          <span style="color:red">*</span>
          制表日期
        </template>
            <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="选择制表日期"
                style="width: 100%"

            />
      </el-descriptions-item>

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

      </el-row>
    </el-form>
      <el-descriptions-item label-class-name="label-diy" class-name="content-diy"></el-descriptions-item>
    </el-descriptions>

  </el-header>

@@ -91,7 +113,7 @@
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"
        @="gridEvents"
    >

      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
@@ -115,7 +137,7 @@
      <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)"/>
            <el-input v-model="option.data" @input="changeFilterEvent($event, option, $panel)" />
          </div>
        </div>
      </template>
@@ -125,8 +147,10 @@

</template>

<script setup>
<script lang="ts" setup>
import {ref, reactive} from 'vue'
import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";

let router = useRouter()

@@ -163,7 +187,7 @@
    //{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},
    //{type: 'expand', title: '详情', fixed: "left", slots: {content: 'content'}, width: 50},
    {
      field: 'cgdh',
      width: '10%',
@@ -203,7 +227,8 @@
      width: '8%',
      title: '高度', /*filters: [{data: ''}], slots: {filter: 'num1_filter'},*/
      editRender: {name: 'input', attrs: {placeholder: ''}},
      sortable: true
      sortable: true,
      type: 'number'
    },
    {
      field: 'h',
@@ -310,12 +335,12 @@
        'name': '入库',
        status: 'primary',
        'code': 'Storage'
      },
      }/*,
      {
        'name': '退货',
        status: 'primary',
        'code': 'Return'
      }/*,
      },
      {
        'name': '返回查询',

@@ -356,7 +381,8 @@
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'Add': {//新增
//新增
        case 'Add': {
          const record = {
            checked: false
          }
@@ -365,83 +391,57 @@
          })
          break
        }
        case 'Remove': {//移除
//移除
        case 'Remove': {
          if ($grid.getCheckboxRecords().length === 0) {
            openAlert({type: 'message', content: '请选择至少一条数据', status: 'warning'})
            //VXETable.modal.message( '请选择一条数据！')
            MessageShow('请选择至少一条数据','warning');
            return
          } else {
            const type = VXETable.modal.confirm('您移除了' + $grid.getCheckboxRecords().length + '条数据！');
            //openAlert({type:'alert', content: '成功入库'+$grid.getCheckboxRecords().length+'条数据！', status: 'success' })
            //VXETable.modal.message( '请选择一条数据！')
            return

            MessageConfirmShow('移除','是否确认移除选中的' + $grid.getCheckboxRecords().length + '条数据！');

          }
          break
        }
        case 'Save': {//保存


          if (form.buyItem === null || form.buyItem === '') {
            openAlert({type: 'message', content: '采购组织不可为空', status: 'warning'})
//保存
        case 'Save': {
          /*if (form.buyItem === null || form.buyItem === '') {
            MessageShow('采购组织不可为空','warning');
            return;
          }

          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( '请选择一条数据！')
          //选中数据
          /* const $table = this.$refs.xTable
           const selectRecords = $table.getCheckboxRecords()*/
//+$grid.rows.number
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据','warning');
            return
          } else {


            MessageConfirmShow('保存订单','是否确定保存当前订单信息');
          }
          break
        }
//入库
        case 'Storage': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据','warning');
            return
          } else {
            MessageConfirmShow('入库','您选择了' + $grid.getCheckboxRecords().length + '条数据！,是否确认入库？')
          }
          break
        }
//退库
        case 'Return': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据','warning');
            return
          } else {


          }
          break
        }
@@ -463,14 +463,88 @@
}


const openAlert = (options) => {
  if (options.type === 'message') {
    VXETable.modal.message(options)
  } else {
    VXETable.modal.alert(options)
  }
import type { FormInstance, FormRules } from 'element-plus'




interface RuleForm {
  name: string
  region: string
  count: string
  date1: string
  date2: string
  delivery: boolean
  type: string[]
  resource: string
  desc: string
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})


const form = reactive({
@@ -487,10 +561,6 @@
  buyType: ''

})

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

//供应商
const buyerOptions = [
@@ -573,23 +643,82 @@

]

import dayjs from 'dayjs'
import {VXETable} from "vxe-table";
import {useRouter} from "vue-router";
//页面逻辑代码执行
function logicExecute(type){
  const $grid = xGrid.value
  switch (type) {
    case '入库':
      //入库逻辑代码TODO
      MessageShow('入库成功！', 'success');
      break;
    case '退货':
      //退货逻辑代码TODO
      MessageShow('退货成功！', 'success');
      break;
    case '保存订单':
      //保存订单逻辑代码TODO
      const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
          if (valid) {
            console.log('submit!')
          } else {
            console.log('error submit!', fields)
          }
        })
      }
      MessageShow('订单保存成功！', 'success');
      break;
    case '移除':
      $grid.removeCheckboxRow();
      break;
    default:
      MessageShow('未知操作！', 'error');
      break;
  }
  return true;

}

//提示信息
const MessageShow = (content, type ) => {

  ElMessage({
    message: content,
    type: type,
    showClose: true,
  })
}

//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title='操作确认提示', type='warning') => {

  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {
        return logicExecute(czType);
      })
      //点击了取消
      .catch(() => {
        return false;
      })
}


</script>


<style scoped>
.custom-header {
  .el-checkbox {
    display: flex;
    height: unset;
  }
}

.item-style {
  width: 300px;
:deep(.el-descriptions__table .label-diy) {
  text-align: center;
  width: 100px;
  /*font-size: large;*/
}
</style>