From 9e9e7b3bd346f5189becc20fb6ac127c320ec1ee Mon Sep 17 00:00:00 2001 From: wang <3597712270@qq.com> Date: 星期二, 26 三月 2024 13:31:38 +0800 Subject: [PATCH] 前端页面 --- UI-Project/src/views/mm/purchaseOrder/Select.vue | 1393 ++++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 874 insertions(+), 519 deletions(-) diff --git a/UI-Project/src/views/mm/purchaseOrder/Select.vue b/UI-Project/src/views/mm/purchaseOrder/Select.vue index 29b29e8..4b42baf 100644 --- a/UI-Project/src/views/mm/purchaseOrder/Select.vue +++ b/UI-Project/src/views/mm/purchaseOrder/Select.vue @@ -1,257 +1,753 @@ -<template> - <el-container> - <el-header class="m-header" style="height: auto"> - <el-row :gutter="10" style="margin-bottom: 5px"> - <el-col :span="7"> - <el-date-picker - v-model="datevalue" - type="daterange" - unlink-panels - range-separator="鍒�" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - :shortcuts="shortcuts" - :size="size" - format="YYYY/MM/DD" - value-format="YYYY-MM-DD" - /> - - </el-col> - - <el-col :span="2"> - <el-button - id="select" - type="primary" - :icon="Search" - @click="BtnSearchPurchaseOrder">鏌ヨ - </el-button> - </el-col> - </el-row> - </el-header> - - <el-main style="padding-top: 5px;height:100%"> - <vxe-grid - max-height="600" - @filter-change="filterChanged" - class="mytable-scrollbar" - ref="xGrid" - v-bind="gridOptions" - v-on="gridEvents" - @cell-dblclick="cellClickEvent" - > - - <!-- 涓嬫媺鏄剧ず鎵�鏈変俊鎭彃妲�--> - <template #content="{ row }"> - <ul class="expand-wrapper"> - <li v-for="(item,index) in gridOptions.columns" v-show="item.field!==undefined "> - <span style="font-weight: bold">{{item.title+': '}}</span> - <span>{{ row[item.field] }}</span> - </li> - </ul> - </template> - - <!--宸﹁竟鍥哄畾鏄剧ず鐨勬彃妲�--> - <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> - - - <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> - - <!-- 璇︽儏妗� 閮ㄥ垎1--> - <vxe-modal v-model="showDetails" title="鏌ョ湅璇︽儏" width="600" height="80%" :mask="false" :lock-view="false" - resize> - <el-container> - <el-header height="35px" - style="margin: 0;padding: 0"> - - <el-input v-model="showCGDH" placeholder="閲囪喘鍗曞彿" disabled> - <template #prepend>閲囪喘鍗曞彿锛�</template> - </el-input> - </el-header> - <el-main> - <template #default> - <vxe-table - border="inner" - auto-resize - show-overflow - max-height="400" - :row-config="{isHover: true}" - :show-header="false" - :sync-resize="showDetails" - :data="detailData"> - <vxe-column field="label" width="30%" class-name="v-column-label"></vxe-column> - <vxe-column field="value"></vxe-column> - </vxe-table> - </template> - </el-main> - <el-footer height="40px"> - <el-row> - <el-col :offset="20" :span="4"> - <el-button - id="Sure" - type="primary" - @click="logicExecute('缂栬緫')" - >缂栬緫 - </el-button> - </el-col> - - </el-row> - </el-footer> - </el-container> - </vxe-modal> - <!-- 璇︽儏妗� 閮ㄥ垎1 缁撴潫--> - - - </el-main> - </el-container> -</template> - - <script setup> -import {ref} from "vue"; -import {reactive} from "vue"; -import {useRouter} from 'vue-router' import {Search} from "@element-plus/icons-vue"; -import dayjs from "dayjs"; -import {ElMessage} from "element-plus"; +import {reactive} from "vue"; +import {useRouter} from "vue-router" +const router = useRouter() - - -let router = useRouter() -const getTableRow = (row, type) => { - switch (type) { - case 'edit' : { - //alert('鎴戞帴鏀跺埌瀛愮粍浠朵紶閫佺殑缂栬緫淇℃伅') - router.push({path: '/main/purchaseOrder/CreatePurchaseOrder', query: {id: row.id}}) - break - } - case 'delete': { - - - alert('鎴戞帴鏀跺埌瀛愮粍浠朵紶閫佺殑鍒犻櫎淇℃伅' + row.id) - break - } +import { ref } from 'vue' +import { ElMessage, ElMessageBox } from 'element-plus' +const dialogFormVisible = ref(false) +const dialogFormVisiblea = ref(false) +const box = ref(true) +const boxa = ref(false) +const boxb = ref(false) +const tableData = [ + { + id: '1', + long: '1005', + wide: '183.6', + thick: '1991', + type: '寰呰瘑鍒�', + typea: '1', + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' + }, + { + id: '2', + long: '105', + wide: '183', + thick: '191', + typea: '1', + type: '寰呰瘑鍒�' } -} - -const xGrid = ref() -const gridEvents = { - toolbarButtonClick({code}) { - const $grid = xGrid.value - if ($grid) { - switch (code) { - case 'Add': {//鏂板 - router.push({path: '/main/purchaseOrder/CreatePurchaseOrder'}) - break - } - case 'AddNo': {//鏃犲崟鏂板 - - MessageShow('鐐瑰嚮浜嗘棤鍗曟柊澧�', 'success'); - break - } - - } - } +] +const tableDataa = [ + { + ida: '3', + longa: '1005', + widea: '183.6', + thicka: '1991', }, - toolbarToolClick({code}) { - const $grid = xGrid.value - if ($grid) { - switch (code) { - case 'myPrint': { - $grid.print() - break - } - } + { + ida: '4', + longa: '105', + widea: '183', + thicka: '191', + } +] +const open = () => { + ElMessageBox.confirm( + '鏄惁鍒犻櫎璇ユ潯淇℃伅?', + '鎻愮ず', + { + confirmButtonText: '鏄�', + cancelButtonText: '鍙栨秷', + type: 'warning', } - }, -} - -const BtnSearchPurchaseOrder = () => { - for (let i = 1; i < 6; i++) { - const randomInt = Math.floor(Math.random() * 999) + 1000;//4浣嶆暟闅忔満鏁� - const randomSumInt = Math.floor(Math.random() * 99) + 10;//2浣嶆暟闅忔満鏁� - const randomOrderInt = Math.floor(Math.random() * 99) + 100;//3浣嶆暟闅忔満鏁� - const t = i % 2 === 0 ? 5 : 6; - const s = i % 2 === 0 ? '鍏ュ簱' : i % 3 === 0 ? '寰呭鏍�' : i % 5 === 0 ? '宸查噰璐�' : '閫�搴�'; - const CGNo = 'NGCG231200' + randomOrderInt;//閲囪喘缂栧彿 - const wlNo = 'NGWL1000' + randomInt; - const xh = 'NGXH' + randomSumInt; - const wlmc = 'WLMC' + randomInt; - const gys = '渚涘簲鍟�' + randomSumInt; - const xhdh = 'NG231200' + randomOrderInt; - const w = i % 2 === 0 ? '3300' : i % 3 === 0 ? '3660' : i % 4 === 0 ? '2250' : '2580'; - const h = i % 2 === 0 ? '2440' : i % 3 === 0 ? '2440' : i % 4 === 0 ? '2000' : '2300'; - const dw = i % 2 === 0 ? '鐗�' : i % 3 === 0 ? '骞崇背' : i % 4 === 0 ? '鍖�' : '鍚�'; - now.setDate(now.getDate() + 1); - gridOptions.data.push({ - cgdh: CGNo, - h: t, - xh: xh, - wlbh: wlNo, - wlmc: wlmc, - gys: gys, - w: w, - g: h, - dw: dw, - cgzt: s, - rq: dayjs(now).format('YYYY-MM-DD'), - yl: randomSumInt, - sl: randomOrderInt, - xsdh: xhdh, - je: randomInt, - 6: '139xxxxxxxx', - + ) + .then(() => { + ElMessage({ + type: 'success', + message: '鍒犻櫎鎴愬姛锛�', + }) }) - } - + .catch(() => { + ElMessage({ + type: 'info', + message: '鍒犻櫎澶辫触', + }) + }) } - - -//椤甸潰閫昏緫浠g爜鎵ц -function logicExecute(type) { - const $grid = xGrid.value +const getTableRow = (row,type) =>{ switch (type) { - case '缂栬緫': - //MessageShow('鎿嶄綔鎴愬姛锛�', 'success'); - //缂栬緫閫昏緫浠g爜TODO - router.push({path: '/main/purchaseOrder/CreatePurchaseOrder'}) - break; - case '閫�璐�': - //鍗曢��璐ч�昏緫浠g爜TODO - MessageShow('鎿嶄綔鎴愬姛锛�', 'success'); - break; - default: - MessageShow('鏈煡鎿嶄綔锛�', 'error'); - break; + case 'edit' :{ + //alert('鎴戞帴鏀跺埌瀛愮粍浠朵紶閫佺殑缂栬緫淇℃伅') + router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }}) + break + } + case 'delete':{ + alert('鎴戞帴鏀跺埌瀛愮粍浠朵紶閫佺殑鍒犻櫎淇℃伅') + break + } } - return true; } -//缁勪欢鎺ユ敹鍙傛暟 +const dialogForm = () => { + ElMessageBox.confirm( + '鏄惁鍒囨崲鐗堝浘?', + '鎻愮ず', + { + confirmButtonText: '鏄�', + cancelButtonText: '鍙栨秷', + type: 'warning', + } + ) + .then(() => { + // this.boxa = true + // this.box = false + + }) +} +const selectedRows = ref([]); +const handleSelectionChange = (selection) => { + selectedRows.value = selection; +}; +const showMessage = () => { + if (selectedRows.value.length === 0) { + ElMessage('璇疯嚦灏戦�夋嫨涓�涓�夐」') + } else{ + ElMessage({ + message: '閲嶆柊璇嗗埆鎴愬姛锛�', + type: 'success', + }) + + } +}; +const pick = () => { + if (selectedRows.value.length === 0) { + ElMessage('璇疯嚦灏戦�夋嫨涓�涓�夐」') + } else{ + ElMessage({ + message: '浜哄伐鍖归厤鎴愬姛锛�', + type: 'success', + }) + + } +}; +const remove = () => { + if (selectedRows.value.length === 0) { + ElMessage('璇疯嚦灏戦�夋嫨涓�涓�夐」') + } else{ + ElMessage({ + message: '鎿嶄綔鎴愬姛锛�', + type: 'success', + }) + + } +}; + const gridOptions = reactive({ - border: "full",//琛ㄦ牸鍔犺竟妗� + border: "full",//琛ㄦ牸鍔犺竟妗� keepSource: true,//淇濇寔婧愭暟鎹� align: 'center',//鏂囧瓧灞呬腑 - stripe: true,//鏂戦┈绾� - rowConfig: {isCurrent: true, isHover: true, height: 50},//榧犳爣绉诲姩鎴栭�夋嫨楂樹寒 - id: 'CustomerList', + stripe:true,//鏂戦┈绾� + rowConfig: {isCurrent: true, isHover: true,height: 50},//榧犳爣绉诲姩鎴栭�夋嫨楂樹寒 + id: 'OrderList', showFooter: true,//鏄剧ず鑴� printConfig: {}, importConfig: {}, exportConfig: {}, - scrollY: {enabled: true},//寮�鍚櫄鎷熸粴鍔� - showOverflow: true, + scrollY:{ enabled: true },//寮�鍚櫄鎷熸粴鍔� + showOverflow:true, columnConfig: { resizable: true, useKey: true @@ -267,296 +763,155 @@ mode: 'row', showStatus: true }, - columns: [ - {type: 'expand', title: '', fixed: "left", slots: {content: 'content'}, width: 50},//璇︽儏 - {title: '鎿嶄綔', width: '8%', slots: {default: 'button_slot'}, fixed: "left"}, - /* {type: 'checkbox',fixed:"left", title: '', width: 50 },*/ - {type: 'seq', fixed: "left", title: ' ', width: 50}, - - + data: [ { - field: 'cgdh', - width: '10%', - title: '閲囪喘鍗曞彿', - filters: [{data: ''}], - slots: {filter: 'num1_filter'}, - sortable: true - }, - {field: 'cgzt', width: '10%', title: '鐘舵��', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, - { - field: 'gys', - width: '10%', - title: '渚涘簲鍟�', - filters: [{data: ''}], - slots: {filter: 'num1_filter'}, - sortable: true - }, - { - field: 'wlbh', - width: '10%', - title: '鐗╂枡缂栧彿', - filters: [{data: ''}], - slots: {filter: 'num1_filter'}, - sortable: true - }, - { - field: 'wlmc', - width: '10%', - title: '鐗╂枡鍚嶇О', - filters: [{data: ''}], - slots: {filter: 'num1_filter'}, - sortable: true - }, - {field: 'w', width: '8%', title: '瀹藉害', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, - {field: 'g', width: '8%', title: '楂樺害', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, - {field: 'h', width: '8%', title: '鍘氬害', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, - {field: 'xh', width: '8%', title: '鍨嬪彿', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, - {field: 'dw', width: '8%', title: '鍗曚綅', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, - { - field: '6', - width: '12%', - title: '涓嶅惈绋庡崟浠�', - filters: [{data: ''}], - slots: {filter: 'num1_filter'}, - sortable: true - }, - {field: 'sl', width: '8%', title: '鏁伴噺', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, - { - field: 'sl', - width: '12%', - title: '宸查噰璐暟閲�', - filters: [{data: ''}], - slots: {filter: 'num1_filter'}, - sortable: true - }, - {field: 'je', width: '8%', title: '閲戦', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, - { - field: 'je', - width: '12%', - title: '涓嶅惈绋庨噾棰�', - filters: [{data: ''}], - slots: {filter: 'num1_filter'}, - sortable: true - }, - {field: '6', width: '8%', title: '绋庣巼', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, - {field: 'sl', width: '8%', title: '搴撳瓨', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, - {field: 'yl', width: '10%', title: '鍛ㄧ敤閲�', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, - {field: 'yl', width: '10%', title: '鏈堢敤閲�', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, - { - field: 'cgzt', - width: '10%', - title: '鍗曟嵁鐘舵��', - filters: [{data: ''}], - slots: {filter: 'num1_filter'}, - sortable: true - }, - { - field: 'xsdh', - width: '10%', - title: '閿�鍞崟鍙�', - filters: [{data: ''}], - slots: {filter: 'num1_filter'}, - sortable: true - }, - { - field: 'rq', - width: '10%', - title: '鍒跺崟鏃ユ湡', - filters: [{data: ''}], - slots: {filter: 'num1_filter'}, - sortable: true - }, - {field: '6', width: '10%', title: '鍒跺崟浜�', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true}, - { - field: '6', - width: '10%', - title: '閲囪喘閮ㄩ棬', - filters: [{data: ''}], - slots: {filter: 'num1_filter'}, - sortable: true - }, - { - field: '6', - width: '10%', - title: '閲囪喘缁勭粐', - filters: [{data: ''}], - slots: {filter: 'num1_filter'}, - sortable: true - }, - {field: '6', width: '10%', title: '澶囨敞', filters: [{data: ''}], slots: {filter: 'num1_filter'}, sortable: true} - ],//琛ㄥご鍙傛暟 - toolbarConfig: { - buttons: [/*{type:'text'}, - { - 'name': '鍒涘缓璁㈠崟', - - 'code':'Add', - }, - - { - 'name': '鏃犲崟鏂板', - - 'code':'AddNo' - }*/ - ], - import: false, - export: true, - print: true, - zoom: true, - custom: true, - style: 'paddling-left:10px' - },//琛ㄥご鎸夐挳 - 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 '' - }) - ] - }, - -}) - -//璇︽儏妗� 閮ㄥ垎2 -const showCGDH = ref(); -const showDetails = ref(false); -let detailData = []; -const cellClickEvent = ({row}) => { - if(isQueryColumnId===false){ - queryColumnId(); - } - - detailData = list.map(field => { - return {label: queryColumnsTitle(field), value: row[field]} - }) - - showDetails.value = true; - showCGDH.value = row['cgdh']; -} - -//鑾峰彇琛ㄥ垪 -let list = []; -let columnIndex = 3;//鍒楁爣澶翠粠绗嚑鍒楀紑濮嬬殑 -let isQueryColumnId = false; -const queryColumnId = () => { - while (columnIndex < gridOptions.columns.length) { - list.push(gridOptions.columns[columnIndex].field); - columnIndex++; - } - isQueryColumnId = true; - return list; -} - -//鑾峰彇琛ㄥ垪鍚� -function queryColumnsTitle(cn) { - let i = 0; - while (i < gridOptions.columns.length + 1) { - if (gridOptions.columns[i].field === cn) { - return gridOptions.columns[i].title; + 'id': '1', + 'long': '5', + 'wide': '1005', + 'thick': '183.6', } - i++; - } -} -//璇︽儏妗� 閮ㄥ垎2 缁撴潫 - - -const now = new Date() - -//鏃堕棿蹇嵎閫夋嫨 -const datevalue = ref('') -const shortcuts = [ - { - text: '杩戜竴鍛�', - value: () => { - const end = new Date() - const start = new Date() - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) - return [start, end] - }, - }, - { - text: '杩戜竴涓湀', - value: () => { - const end = new Date() - const start = new Date() - start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) - return [start, end] - }, - }, - { - text: '杩戜笁涓湀', - value: () => { - const end = new Date() - const start = new Date() - start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) - return [start, end] - }, - }, -] - - -//鎻愮ず淇℃伅 -//淇℃伅鍐呭锛屾樉绀烘柟寮忥紝鏄剧ず鏍囬锛岀被鍨� -const MessageShow = (content, type = 'success') => { - 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(() => { - - logicExecute(czType); - - return true; - }) - //鐐瑰嚮浜嗗彇娑� - .catch(() => { - return false; - }) -} - -//寮圭獥淇℃伅 -const MessageAlertShow = (content, title, type = 'info') => { - - ElMessageBox.alert(content, title, { - // 绂佹鑷姩瀵圭劍 - //autofocus: false, - confirmButtonText: 'OK', - /*callback: (action: Action) => { - MessageShow(`action: ${action}`,type) - },*/ - }) -} - + ], +}) </script> +<template> + <div> + <el-button style="margin-top: 5px;margin-left: 5px;" id="searchButton" type="primary" @click="showMessage">閲嶆柊璇嗗埆</el-button> + <el-button style="margin-top: 5px" id="searchButton" type="primary" @click="pick">浜哄伐鍖归厤</el-button> + <el-button style="margin-top: 5px" id="searchButton" type="primary" @click="remove">浜哄伐鎷胯蛋</el-button> + <el-button style="margin-top: 5px" id="searchButton" type="primary" >鐮存崯</el-button> + <el-button style="margin-top: 5px" id="searchButton" @click="boxb = true;box = false" >鍚堝苟</el-button> + <el-button style="margin-top: 5px" id="searchButton" @click="box = true;boxb = false" >鍗曠墖</el-button> + <el-button style="margin-top: 5px;float: right;margin-right: 50px;" id="searchButton" type="text" @click="dialogForm">鐗堝浘鍙�</el-button> + + <div v-if="box"> + <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading"> + <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 450px;"> + <el-table height="100%" ref="table" + @selection-change="handleSelectionChange" + :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> + <el-table-column type="selection" width="55" /> + <el-table-column prop="id" align="center" label="id" min-width="80" /> + <el-table-column prop="long" align="center" label="闀�" min-width="120" /> + <el-table-column prop="wide" align="center" label="瀹�" min-width="120" /> + <el-table-column prop="type" align="center" label="鐘舵��" min-width="120" /> + <el-table-column prop="thick" align="center" label="鍏朵粬" min-width="120" /> + <el-table-column fixed="right" label="鎿嶄綔" align="center" width="200"> + <template #default> + <!-- <el-button size="mini" type="text" plain @click="dialogFormVisible = true">璇︽儏</el-button> --> + <el-button size="mini" type="text" plain @click="dialogFormVisiblea = true">璁剧疆</el-button> + </template> + </el-table-column> + </el-table> + </div> + </el-card> + </div> + <div v-if="boxb"> + <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading"> + <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 450px;"> + <el-table height="100%" ref="table" + @selection-change="handleSelectionChange" + :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> + <el-table-column type="selection" width="55" /> + <el-table-column prop="id" align="center" label="绫诲瀷搴忓彿" min-width="80" /> + <el-table-column prop="long" align="center" label="闀�" min-width="120" /> + <el-table-column prop="wide" align="center" label="瀹�" min-width="120" /> + <el-table-column prop="typea" align="center" label="鏁伴噺" min-width="120" /> + <el-table-column prop="thick" align="center" label="鍏朵粬" min-width="120" /> + <el-table-column fixed="right" label="鎿嶄綔" align="center" width="200"> + <template #default> + <!-- <el-button size="mini" type="text" plain @click="dialogFormVisible = true">璇︽儏</el-button> --> + <el-button size="mini" type="text" plain @click="dialogFormVisiblea = true">璁剧疆</el-button> + </template> + </el-table-column> + </el-table> + </div> + </el-card> + </div> + <!-- <div v-if="boxa"> + <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading"> + <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto"> + <el-table height="100%" ref="table" + @selection-change="handleSelectionChange" + :data="tableDataa" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> + <el-table-column type="selection" width="55" /> + <el-table-column prop="ida" align="center" label="id" min-width="80" /> + <el-table-column prop="longa" align="center" label="闀�" min-width="120" /> + <el-table-column prop="widea" align="center" label="瀹�" min-width="120" /> + <el-table-column prop="thicka" align="center" label="鍏朵粬" min-width="120" /> + </el-table> + </div> + </el-card> + </div> --> + </div> + <!-- <el-dialog v-model="dialogFormVisible" top="21vh" width="30%" title="灏忕墖鍥�" > + + <div id="message"> + 200*100 + </div> + <template #footer> + <div id="dialog-footer"> + <el-button @click="dialogFormVisible = false">鍏抽棴</el-button> + </div> + </template> + </el-dialog> --> + <el-dialog v-model="dialogFormVisiblea" top="21vh" width="30%" title="娴嬮噺璁剧疆" > + <el-form size="mini" label-width="150px"> + <el-form style="margin-left: 80px;"> + + <el-form-item label="璇樊闀匡細" :required="true" style="width: 16vw;margin-bottom: 30px;"> + <div style="display: flex;"><el-input autocomplete="off" /><div style="margin-left: 10px;">mm</div> </div> + </el-form-item> + <el-form-item label="璇樊瀹斤細" :required="true" style="width: 16vw"> + <div style="display: flex;"><el-input autocomplete="off" /><div style="margin-left: 10px;">mm</div> </div> + </el-form-item> + </el-form> + </el-form> + <template #footer> + <div id="dialog-footer"> + <el-button type="primary" @click="dialogFormVisiblea = false"> + 纭 + </el-button> + <el-button @click="dialogFormVisiblea = false">鍙栨秷</el-button> + </div> + </template> + </el-dialog> + <div id="awatch">灏忕墖鍥撅細 +<div id="watch">200*100</div> +</div> +</template> <style scoped> -:deep(.v-column-label div span) { - font-weight: bold; + +#dt { display:block; float:left;line-height: 20px;margin-left: 100px;} +#dta { display:block; float:left;line-height: 20px;margin-left: 80%;} +#dialog-footer{ + text-align: center; + margin-top: -15px; +} +#message{ + text-align: center; + align-items: center; + color: black; + width: 200px; + height: 100px; + background-color: #337ecc; + margin-left: 28%; +} +#awatch{ + display: flex; + margin-top: 20px; + font-size: 20px; + margin-left: 50px; +} +#watch{ + text-align: center; + align-items: center; + color: black; + width: 300px; + height: 150px; + background-color: #337ecc; + margin-left: 2%; + margin-top: 10px; } </style> \ No newline at end of file -- Gitblit v1.8.0