From db6e95062dfb57bcd1fb1cacdbb3cb4372c576b0 Mon Sep 17 00:00:00 2001 From: chengxiangling <291105840@qq.com> Date: 星期三, 14 五月 2025 17:34:00 +0800 Subject: [PATCH] 钣金页面表格样式; --- src/views/basicData/calendar/index.vue | 650 +++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 547 insertions(+), 103 deletions(-) diff --git a/src/views/basicData/calendar/index.vue b/src/views/basicData/calendar/index.vue index 8868a93..6f72c18 100644 --- a/src/views/basicData/calendar/index.vue +++ b/src/views/basicData/calendar/index.vue @@ -7,9 +7,10 @@ :inline="true" v-show="showSearch" label-width="68px" + label-position="left" > - <el-row type="flex" justify="left"> - <el-col :span="6"> + <el-row type="flex" justify="left" :gutter="20"> + <el-col :span="5"> <el-form-item label="鏃ュ巻鎻忚堪" prop="description"> <el-input style="width: 140px" @@ -37,7 +38,7 @@ </el-select> </el-form-item> </el-col> - <el-col :span="12" style="text-align: right"> + <el-col :span="13" style="text-align: right"> <el-form-item class="column-with-margin"> <el-button type="primary" icon="Search" @click="handleQuery" >鏌ヨ</el-button @@ -110,7 +111,7 @@ class="auto-height-grid" > <template #status="{ row }"> - <vxe-tag v-if="row.type === '1'" status="primary">鍛ㄥ伐浣滄棩</vxe-tag> + <vxe-tag v-if="row.type === '1'" status="primary">鍛ㄥ伐浣�</vxe-tag> <vxe-tag v-if="row.type === '2'" status="success">鑺傚亣鏃�</vxe-tag> </template> <template #mark="{ row }"> @@ -140,17 +141,26 @@ </div> </template> <template #buttons="{ row }"> - <vxe-button - mode="text" + <el-button + type="primary" + size="small" @click="handleUpdate(row)" v-hasPermi="['aps:calendar:update']" - >淇敼</vxe-button + >淇敼</el-button > - <vxe-button - mode="text" + <el-button + type="warning" + size="small" + @click="handleSetHolidays(row)" + v-hasPermi="['aps:calendar:remove']" + >璁剧疆鑺傚亣鏃�</el-button + > + <el-button + type="danger" + size="small" @click="handleDelete(row)" v-hasPermi="['aps:calendar:remove']" - >鍒犻櫎</vxe-button + >鍒犻櫎</el-button > </template> </HxlhTable> @@ -193,7 +203,7 @@ > </el-date-picker> </el-form-item> - <div v-if="form.type === '1'"> + <div> <div class="title_bar_line"> <div class="line_short"></div> <div>鍛ㄥ伐浣滆缃�</div> @@ -251,10 +261,10 @@ prop="applicableFactory" class="factory_use_item" > --> - <div class="select_factory">閫傜敤宸ュ巶/杞﹂棿/宸ュ簭</div> + <div class="select_factory select_factory_dis">閫傜敤宸ュ巶/杞﹂棿/宸ュ簭</div> <!-- <el-row :gutter="20" class="select_factory"> --> <div - class="select_factory" + class="select_factory_dis" v-for="(item, index) in applicableSettingList" :key="index" > @@ -271,7 +281,7 @@ v-for="plant in aps_factory" :key="plant.value" :label="plant.label" - :value="plant.value" + :value="`${plant.value};${plant.label}`" > </el-option> </el-select> @@ -289,7 +299,7 @@ v-for="shop in shopList" :key="shop.id" :label="shop.shopName" - :value="shop.id" + :value="`${shop.id};${shop.shopName}`" > </el-option> </el-select> @@ -304,9 +314,9 @@ > <el-option v-for="process in processList" - :key="process.id" + :key="process.processNumber" :label="process.processName" - :value="process.processName" + :value="`${process.processNumber};${process.processName}`" > </el-option> </el-select> @@ -315,8 +325,17 @@ <el-button class="select_content" type="primary" - :icon="Plus" + icon="Plus" @click="handleAddFactory(item)" + circle + size="small" + /> + <el-button + v-if="applicableSettingList.length > 1" + class="select_content" + type="primary" + icon="Minus" + @click="handleMinusFactory(item)" circle size="small" /> @@ -344,11 +363,212 @@ </div> </template> </el-dialog> + <el-dialog + title="璁剧疆鑺傚亣鏃�" + v-model="openSetHolidays" + width="80%" + style="height: 570px" + append-to-body + > + <div class="height_dialog"> + <div class="height_dialog_scroll"> + <div class="grey_bg"> + <div v-if="expand"> + <div class="flex_item"> + <div>宸ヤ綔鏃ュ巻锛� </div> + <div>{{ form.description }}</div> + </div> + <div class="flex_item"> + <div>鐢熸晥鏃堕棿锛� </div> + <div>{{ form.effectiveDate }}</div> + </div> + <div class="flex_item"> + <div>澶辨晥鏃堕棿锛� </div> + <div>{{ form.expiringDate }}</div> + </div> + <div class="flex_item"> + <div>閫傜敤宸ュ巶锛� </div> + <div class="flex_item_dis"> + <div + v-for="(item, index) in form.applicableTranslate" + :key="index" + > + {{ item.factory }} - {{ item.workshop }} - + {{ item.process }} + </div> + </div> + </div> + </div> + <div class="flex_item_expand_end" @click="handleToggleExpand"> + <el-icon :size="18" v-if="expand"><ArrowUpBold /></el-icon> + <el-icon v-else><ArrowDownBold /></el-icon> + </div> + </div> + <div class="title_flex"> + <div class="holiday_title">鑺傚亣鏃ュ垪琛�</div> + <el-button type="primary" size="small" @click="hanldeAddHolidays" + >娣诲姞鑺傚亣鏃�</el-button + > + </div> + <div class="grey_bg"> + <div + class="flex_holidays_set" + v-for="(item, index) in formHolidays.holidays" + :key="index" + > + <div class="dis_error_wrap"> + <div class="flex_item"> + <div class="flex_item_title"> + <span class="error_require">*</span><span>鑺傚亣鏃ユ弿杩�</span> + </div> + <div> + <el-input + style="width: 130px" + v-model="item.describe" + placeholder="璇疯緭鍏ユ弿杩�" + /> + </div> + </div> + <div class="error_text" v-if="item.describe == ''"> + 璇疯緭鍏ヨ妭鍋囨棩鎻忚堪 + </div> + </div> + <div class="dis_error_wrap"> + <div class="flex_item"> + <div class="flex_item_title"> + <span class="error_require">*</span><span>寮�濮嬫椂闂�</span> + </div> + <div> + <el-date-picker + style="width: 130px" + clearable + v-model="item.startdate" + type="date" + :disabled-date="handleDisabledDate" + :default-value="form.effectiveDate" + placeholder="閫夋嫨鏃ユ湡" + > + </el-date-picker> + </div> + </div> + <div class="error_text" v-if="item.startdate == ''"> + 璇疯緭鍏ュ紑濮嬫椂闂� + </div> + </div> + <div class="dis_error_wrap"> + <div class="flex_item"> + <div class="flex_item_title"> + <span class="error_require">*</span><span>缁撴潫鏃堕棿</span> + </div> + <div> + <el-date-picker + style="width: 130px" + clearable + v-model="item.enddate" + type="date" + :disabled-date="handleDisabledDate" + :default-value="form.expiringDate" + placeholder="閫夋嫨鏃ユ湡" + > + </el-date-picker> + </div> + </div> + <div class="error_text" v-if="item.enddate == ''"> + 璇疯緭鍏ョ粨鏉熸椂闂� + </div> + </div> + <div class="dis_error_wrap"> + <div class="flex_item"> + <el-button + v-if="formHolidays.length > 1" + type="danger" + size="small" + @click="handleDelSettingHolidays(item)" + >鍒犻櫎</el-button + > + </div> + </div> + </div> + <!-- <el-form + class="mart10" + ref="holidaysRef" + :model="item" + :rules="holidayRules" + :inline="true" + label-width="105px" + > + <div v-for="(item, index) in formHolidays.holidays" :key="index"> + <el-form-item + label="鑺傚亣鏃ユ弿杩�" + :prop="'holidays.' + index + '.describe'" + :rules="{ required: true, message: '璇疯緭鍏ヨ妭鍋囨棩鎻忚堪', trigger: 'blur' }" + > + <el-input + style="width: 130px" + v-model="item.describe" + placeholder="璇疯緭鍏ユ弿杩�" + /> + </el-form-item> + <el-form-item + label="寮�濮嬫椂闂�" + :prop="'holidays.' + index + '.startdate'" + :rules="{ required: true, message: '璇疯緭鍏ュ紑濮嬫椂闂�', trigger: 'blur' }" + > + <el-date-picker + style="width: 130px" + clearable + v-model="item.startdate" + type="date" + :disabled-date="handleDisabledDate" + :default-value="form.effectiveDate" + placeholder="閫夋嫨鏃ユ湡" + > + </el-date-picker> + </el-form-item> + <el-form-item + label="缁撴潫鏃堕棿" + :prop="'holidays.' + index + '.enddate'" + :rules="{ required: true, message: '璇疯緭鍏ョ粨鏉熸椂闂�', trigger: 'blur' }" + > + <el-date-picker + style="width: 130px" + clearable + v-model="item.enddate" + type="date" + placeholder="閫夋嫨鏃ユ湡" + :disabled-date="handleDisabledDate" + :default-value="form.expiringDate" + > + </el-date-picker> + </el-form-item> + <el-form-item label="" prop=""> + <el-button + v-if="formHolidays.length > 1" + type="danger" + size="small" + @click="handleDelSettingHolidays(item)" + >鍒犻櫎</el-button + > + </el-form-item> + </div> + </el-form> --> + </div> + </div> + </div> + <template #footer> + <div class="dialog-footer"> + <el-button @click="openSetHolidays = false">鍙� 娑�</el-button> + <el-button type="primary" @click="handleSaveHolidaysForm" + >淇濆瓨</el-button + > + </div> + </template> + </el-dialog> </div> </template> <script setup name="Calendar"> -import { Plus } from "@element-plus/icons-vue"; +import moment from "moment"; import HxlhTable from "@/components/HxlhTable"; import { listCalendar, @@ -361,11 +581,15 @@ import { listAll_plant, listByWorkShop } from "@/api/basicData/plant"; import { listAll_shop, listAps_shop } from "@/api/basicData/shop"; import { selectProcessNameList } from "@/api/basicData/processRoute.js"; +import { ElMessage } from "element-plus"; const { proxy } = getCurrentInstance(); +const holidaysRef = ref(null); const { aps_factory } = proxy.useDict("aps_factory"); const tableRef = ref(); const calendarList = ref([]); const open = ref(false); +const openSetHolidays = ref(false); +const expand = ref(true); const loading = ref(true); const showSearch = ref(true); const ids = ref([]); @@ -381,6 +605,15 @@ factory: "", workshop: "", process: "", + }, + ], + }, + formHolidays: { + holidays: [ + { + enddate: "", + startdate: "", + describe: "", }, ], }, @@ -426,16 +659,35 @@ trigger: "blur", }, ], - applicableFactory: [ - { - required: true, - message: "璇烽�夋嫨閫傜敤宸ュ巶", - trigger: "blur", - }, - ], }, + // holidayRules: { + // describe: [ + // { + // required: true, + // message: "璇疯緭鍏ヨ妭鍋囨棩鎻忚堪", + // trigger: "blur", + // }, + // ], + // startdate: [ + // { + // required: true, + // message: "璇疯緭鍏ュ紑濮嬫椂闂�", + // trigger: "blur", + // }, + // ], + // enddate: [ + // { + // required: true, + // message: "璇疯緭鍏ョ粨鏉熸椂闂�", + // trigger: "blur", + // }, + // ], + // }, }); -const { queryParams, form, rules } = toRefs(data); +const holidayRules = { + holidays: [{ required: true, message: "鑺傚亣鏃ユ槸蹇呭~椤�", trigger: "blur" }], +}; +const { queryParams, form, rules, formHolidays } = toRefs(data); const dateType = ref("鍛ㄥ伐浣�"); const dateTypeList = ref([ { @@ -449,7 +701,7 @@ ]); const typeRadioNumber = ref(1); const applicableSettingList = ref([ - { factory: "", workshop: "", process: "" }, + { factory: "", workshop: "", process: "", id: 0 }, ]); const weekDaysSettingList = ref([ { @@ -532,43 +784,43 @@ align: "center", slots: { default: "mark" }, }, - { - title: "閫傜敤宸ュ巶", - field: "applicableFactory", - width: 200, - align: "center", - formatter: ({ cellValue, row, column }) => { - if (cellValue) { - for (let i = 0; i < plantList.value.length; i++) { - if (cellValue === plantList.value[i].plantCode) { - return plantList.value[i].plantName; - } - } - } - }, - }, - { - title: "閫傜敤杞﹂棿", - field: "applicableWorkshop", - width: 200, - align: "center", - formatter: ({ cellValue, row, column }) => { - if (cellValue) { - for (let i = 0; i < shopList.value.length; i++) { - if (cellValue === shopList.value[i].id) { - return shopList.value[i].shopName; - } - } - } - return ""; - }, - }, - { - title: "閫傜敤宸ュ簭", - field: "applicableProcess", - width: 200, - align: "center", - }, + // { + // title: "閫傜敤宸ュ巶", + // field: "applicableFactory", + // width: 200, + // align: "center", + // formatter: ({ cellValue, row, column }) => { + // if (cellValue) { + // for (let i = 0; i < plantList.value.length; i++) { + // if (cellValue === plantList.value[i].plantCode) { + // return plantList.value[i].plantName; + // } + // } + // } + // }, + // }, + // { + // title: "閫傜敤杞﹂棿", + // field: "applicableWorkshop", + // width: 200, + // align: "center", + // formatter: ({ cellValue, row, column }) => { + // if (cellValue) { + // for (let i = 0; i < shopList.value.length; i++) { + // if (cellValue === shopList.value[i].id) { + // return shopList.value[i].shopName; + // } + // } + // } + // return ""; + // }, + // }, + // { + // title: "閫傜敤宸ュ簭", + // field: "applicableProcess", + // width: 200, + // align: "center", + // }, { title: "鍒涘缓鑰�", field: "createBy", @@ -583,7 +835,7 @@ }, { title: "鎿嶄綔", - width: 100, + width: 270, fixed: "right", slots: { default: "buttons" }, align: "center", @@ -626,34 +878,6 @@ // 鍙栨秷鎸夐挳 function cancel() { open.value = false; - reset(); -} - -// 琛ㄥ崟閲嶇疆 -function reset() { - form.value = { - id: null, - description: null, - type: "1", - effectiveDate: null, - expiringDate: null, - content: null, - applicableFactory: null, - applicableWorkshop: null, - applicableProcess: null, - createBy: null, - createTime: null, - updateBy: null, - updateTime: null, - applicable: [ - { - factory: "", - workshop: "", - process: "", - }, - ], - }; - proxy.resetForm("calendarRef"); } /** 鎼滅储鎸夐挳鎿嶄綔 */ @@ -677,7 +901,6 @@ /** 鏂板鎸夐挳鎿嶄綔 */ async function handleAdd() { - reset(); open.value = true; form.value = { applicable: [ @@ -693,7 +916,7 @@ /** 閫夋嫨宸ュ巶鍚庝簨浠� 鍔犺浇杞﹂棿 鍜� 宸ュ簭 **/ function changePlant(plant) { console.log(plant); - listAps_shop({ plantCode: plant }).then((response) => { + listAps_shop({ plantCode: plant.split(";")[0] }).then((response) => { shopList.value = response.rows; }); // selectProcessNameList({ orgCode: plant }).then((response) => { @@ -701,17 +924,23 @@ // }); } function changeWorkshop(workShop) { + console.log(workShop.split(";")[0]); listByWorkShop({ workShop: "姘旀煖" }).then((res) => { console.log(res, "workShop"); processList.value = res.rows; }); } function handleAddFactory(row) { - applicableSettingList.value.push(row); + console.log(row); + applicableSettingList.value.push({ ...row, id: ++row.id }); +} +function handleMinusFactory(row) { + applicableSettingList.value = applicableSettingList.value.filter( + (item, index) => item !== row + ); } /** 淇敼鎸夐挳鎿嶄綔 */ function handleUpdate(row) { - reset(); const _id = row.id || ids.value; getCalendar(_id).then((response) => { form.value = response.data; @@ -728,11 +957,124 @@ title.value = "淇敼鏃ュ巻绠$悊"; }); } - +// 璁剧疆鑺傚亣鏃� +function handleSetHolidays(row) { + form.value = { + ...row, + applicableTranslate: JSON.parse(row.applicableTranslate), + }; + if (!row.holidays) { + formHolidays.value = { + holidays: [ + { + enddate: "", + startdate: "", + describe: "", + }, + ], + }; + } else { + formHolidays.value.holidays = JSON.parse(row.holidays.value); + } + console.log(formHolidays.value.holidays, "formHolidays.value"); + openSetHolidays.value = true; +} +// 绂佺敤鏃ユ湡 +function handleDisabledDate(date) { + const targetDate = moment(date).valueOf(); + const startDate = moment(form.value.effectiveDate).valueOf(); + const endDate = moment(form.value.expiringDate).valueOf(); + return targetDate < startDate || targetDate > endDate; +} +// 鍒犻櫎鑺傚亣鏃ヨ缃� +function handleDelSettingHolidays(row) { + formHolidays.value.holidays = formHolidays.value.holidays.filter((item) => { + return item != row; + }); +} +// 娣诲姞鑺傚亣鏃� +function hanldeAddHolidays() { + formHolidays.value.holidays.push({ + enddate: "", + startdate: "", + describe: "", + }); +} +function handleToggleExpand() { + expand.value = !expand.value; +} +// const confirmClick = () => { +// let formList = [predictionFormRef] +// let resultArr = []; +// let validate = (form) => { +// let result = new Promise((resolve, reject) => { +// form.value.validate(valid => { +// if (valid) { +// resolve() +// } else { +// reject() +// } +// }) +// }) +// resultArr.push(result) +// } +// formList.forEach(item => { +// validate(item) +// }) +// Promise.all(resultArr).then(() => { +// saveRule() // 鏍¢獙鎴愬姛涔嬪悗 淇濆瓨鏁版嵁鐨勬柟娉� +// }) +// } +// const submitForm = () => { +// formRef.value.validate((valid) => { +// if (valid) { +// alert('submit!'); +// } else { +// alert('Form is not valid.'); +// return false; +// } +// }); +// }; +// 鎻愪氦鑺傚亣鏃� +function handleSaveHolidaysForm() { + const hasValidDates = formHolidays.value.holidays.some( + (item) => item.enddate && item.startdate && item.describe + ); + console.log(hasValidDates, "hasValidDates"); + // holidaysRef.value.validate((valid) => { + // if (!valid) { + // proxy.$modal.msgSuccess("蹇呭~椤逛笉鑳戒负绌�"); + // } + //if (valid) { + if (!hasValidDates) { + updateCalendar({ + id: form.value.id, + holidays: formHolidays.value.holidays.map((item) => { + return { + startdate: moment(item.startdate).format("YYYY-MM-DD"), + enddate: moment(item.enddate).format("YYYY-MM-DD"), + describe: item.describe, + }; + }), + }).then((response) => { + proxy.$modal.msgSuccess("鏂板鎴愬姛"); + open.value = false; + getList(); + }); + } + // }); +} /** 鎻愪氦鎸夐挳 */ function submitForm() { proxy.$refs["calendarRef"].validate((valid) => { if (valid) { + if (applicableSettingList.value[0].factory === "") { + ElMessage({ + type: "error", + message: "鑷冲皯閫夋嫨涓�涓�傜敤宸ュ巶", + }); + return; + } if (form.value.id != null) { // if (form.value.type === "1") { // updateCalendar({ @@ -753,8 +1095,15 @@ content: { holidays: holidays.value, }, - applicableWorkshop: form.value.applicableWorkshop, + applicableWorkshop: form.value.applicableWorkshop.map((item) => { + return { + factory: item.factory.split(";")[0], + process: item.process.split(";")[0], + workshop: item.workshop.split(";")[0], + }; + }), applicableProcess: form.value.applicableProcess, + type: "1", }).then((response) => { proxy.$modal.msgSuccess("淇敼鎴愬姛"); open.value = false; @@ -779,8 +1128,25 @@ content: { weekdays: weekDaysSettingList.value, }, - holidays: holidays.value, - applicable: applicableSettingList.value, + // holidays: holidays.value, + applicable: applicableSettingList.value.map((item) => { + return { + factory: item.factory.split(";")[0], + process: item.process.split(";")[0], + workshop: item.workshop.split(";")[0], + }; + }), + applicableTranslate: JSON.stringify( + applicableSettingList.value.map((item) => { + return { + factory: item.factory.split(";")[1], + process: item.process.split(";")[1], + workshop: item.workshop.split(";")[1], + }; + }) + ), + type: "1", + // applicableCn: //}, }).then((response) => { proxy.$modal.msgSuccess("鏂板鎴愬姛"); @@ -896,10 +1262,12 @@ margin-top: 10px; } .select_factory { - margin-left: 34px; font-weight: 800; font-size: 14px; color: #606266; +} +.select_factory_dis { + margin-left: 34px; } .select_content { margin-right: 10px; @@ -917,4 +1285,80 @@ .auto-height-grid .xe-body .xe-body--row { height: auto; /* 鎴栬�呬娇鐢� min-height */ } +.mart10 { + margin-top: 20px; +} +.h300 { +} +.height_dialog { + height: 400px; + overflow: hidden; + .height_dialog_scroll { + height: 100%; + overflow: auto; + } +} +.dis_error_wrap { + .error_text { + margin-left: 20px; + font-size: 12px; + color: #f56c6c; + margin-left: 120px; + } +} +.grey_bg { + background: #f1f1f1; + width: 100%; + padding: 10px; + box-sizing: border-box; + .flex_holidays_set { + display: flex; + justify-content: flex-start; + align-items: center; + } + .flex_item { + display: flex; + justify-content: flex-start; + align-items: center; + margin-top: 10px; + .flex_item_title { + width: 85px; + color: #606266; + font-size: 14px; + font-weight: 600; + margin-left: 20px; + margin-right: 10px; + .error_require { + color: #f56c6c; + margin-right: 5px; + } + } + .flex_item_dis { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + & div { + margin-bottom: 5px; + } + } + } + .flex_item_expand_end { + display: flex; + justify-content: flex-end; + align-items: center; + cursor: pointer; + } +} +.title_flex { + margin-top: 20px; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + .holiday_title { + font-size: 15px; + font-weight: 500; + } +} </style> -- Gitblit v1.9.3