From cb611a0c2ba672e23aedb6f95635deb4f922b79b Mon Sep 17 00:00:00 2001
From: NNowhZzU <1539353356@qq.com>
Date: 星期五, 05 一月 2024 17:03:46 +0800
Subject: [PATCH] 新增采购订单详情页，部分消息提示，修改采购订单功能部分

---
 north-glass-erp/northglass-erp/src/views/mm/purchaseOrder/Create.vue |  471 +++++++++++++++++++++++++++++++++++++---------------------
 1 files changed, 300 insertions(+), 171 deletions(-)

diff --git a/north-glass-erp/northglass-erp/src/views/mm/purchaseOrder/Create.vue b/north-glass-erp/northglass-erp/src/views/mm/purchaseOrder/Create.vue
index 932c4b1..0fc1826 100644
--- a/north-glass-erp/northglass-erp/src/views/mm/purchaseOrder/Create.vue
+++ b/north-glass-erp/northglass-erp/src/views/mm/purchaseOrder/Create.vue
@@ -1,81 +1,103 @@
 <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-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">
-          <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-descriptions
+        class="margin-top"
+        title=""
+        :column="4"
+        :size="'default'"
+        border
+        :rules="rules"
+        :model="ruleForm"
+    >
 
-      </el-row>
+      <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"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-descriptions-item >
 
-      <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-input v-model="ruleForm.name" placeholder="閲囪喘缁勭粐" clearable prop="name"></el-input>
+      </el-descriptions-item>
 
-            <el-date-picker
-                v-model="form.date"
-                type="date"
-                placeholder="閫夋嫨鍒惰〃鏃ユ湡"
-                style="width: 100%"
-            />
+      <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"
+            filterable
+            clearable
+            empty-text="empty-text"
+            :v-model="form.supplier"
+        >
+        </el-cascader>
+      </el-descriptions-item>
 
-          </el-form-item>
-        </el-col>
-        <el-col :span="6"></el-col>
+      <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-row>
-    </el-form>
+
+
+      <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"
+              :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-date-picker
+            v-model="form.date"
+            type="date"
+            placeholder="閫夋嫨鍒惰〃鏃ユ湡"
+
+        />
+      </el-descriptions-item>
+
+      <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>
\ No newline at end of file

--
Gitblit v1.8.0