vue3页面编写-导入导出excel、展开查询项等

数据保持

<router-view v-slot="{ Component, route }"><keep-alive><component :is="Component" :key="route.name" v-if="route.meta.keepAlive" /></keep-alive><component :is="Component" :key="route.name"  v-if="!route.meta.keepAlive"/>
</router-view>

{   // path: "/main/rvCarBom",meta: {keepAlive: true,isBack: false},component: () => import('@/pages/rv/bom/rvCarBom.vue'),},

功能页面

<!----><template><div class="rv_root_container"><div class="rv_container"><div><el-form :inline="true" label-position="right" size="small"><el-row><el-form-item label="装车基地"><el-select v-model="dddd.form.city" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory"><el-optionv-for="item in dddd.cityList":key="item":label="item":value="item"></el-option></el-select></el-form-item><el-form-item label="车系"><el-select v-model="dddd.form.carModel" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory"><el-optionv-for="item in dddd.carModelList":key="item":label="item":value="item"></el-option></el-select></el-form-item><el-form-item label="车型"><el-select v-model="dddd.form.carType" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory"><el-optionv-for="item in dddd.carTypeList":key="item":label="item":value="item"></el-option></el-select></el-form-item><el-form-item label="配置"><el-select v-model="dddd.form.carConf" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory"><el-optionv-for="item in dddd.carConfList":key="item":label="item":value="item"></el-option></el-select></el-form-item><el-form-item label="选装"><el-select v-model="dddd.form.carSel" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory"><el-optionv-for="item in dddd.carSelList":key="item":label="item":value="item"></el-option></el-select></el-form-item><el-form-item label="国家"><el-select v-model="dddd.form.country" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory"><el-optionv-for="item in dddd.countryList":key="item":label="item":value="item"></el-option></el-select></el-form-item></el-row><el-row v-if="dddd.isShow"><el-form-item label="总成料号"><el-input type="textarea" :rows="1" :clearable="true" v-model="dddd.form.assemblyMatNumber" style="width:150px"></el-input></el-form-item><el-form-item label="总成描述"><el-input type="textarea" :rows="1" :clearable="true" v-model="dddd.form.assemblyDes" style="width:150px"></el-input></el-form-item><el-form-item label="工厂"><el-select v-model="dddd.form.factory" clearable placeholder="请选择" style="width:150px" @change="handleChangeFactory"><el-optionv-for="item in dddd.factoryList":key="item":label="item":value="item"></el-option></el-select></el-form-item><el-form-item label="线体名称"><el-select v-model="dddd.form.lineName" clearable placeholder="请选择" style="width:150px"><el-optionv-for="item in dddd.lineNameList":key="item":label="item":value="item"></el-option></el-select></el-form-item><el-form-item label="代装厂"><el-input type="textarea" :rows="1" :clearable="true" v-model="dddd.form.buyLocation" style="width:150px"></el-input></el-form-item><el-form-item label="产能检查"><el-select v-model="dddd.form.capacityCheck" clearable placeholder="请选择" style="width:150px"><el-optionv-for="item in dddd.capacityCheckList":key="item":label="item":value="item"></el-option></el-select></el-form-item><el-form-item label="产品大类"><el-select v-model="dddd.form.product" clearable placeholder="请选择" style="width:150px" @change="handleChangeProduct"><el-optionv-for="item in dddd.productList":key="item":label="item":value="item"></el-option></el-select></el-form-item><el-form-item label="产品小类"><el-select v-model="dddd.form.productSub" clearable placeholder="请选择" style="width:150px"><el-optionv-for="item in dddd.productSubList":key="item":label="item":value="item"></el-option></el-select></el-form-item><el-form-item label="计划员"><el-select v-model="dddd.form.planPerson" clearable placeholder="请选择" style="width:150px"><el-optionv-for="item in dddd.planPersonList":key="item":label="item":value="item"></el-option></el-select></el-form-item></el-row><el-row><el-button type="primary" @click="clickSearch" :icon="IconReload">查询</el-button><el-button @click="clickReset" :icon="IconRefresh">重置</el-button><el-button type="primary" @click="clickExport" :icon="IconDownload">导出</el-button><el-button type="primary" @click="clickEdit" :icon="IconPlus">新增</el-button><el-button type="primary" @click="clickDelete" :icon="IconRowRemove">删除</el-button><el-upload class="rv_upload" action="" :show-file-list="false" :on-change="handleOnChange"><el-button type="primary" :icon="IconUpload">导入</el-button></el-upload><el-button text @click="clickTemplate">模板下载</el-button><el-button type="primary" @click="clickShow" :icon="dddd.isShow ? IconArrowUp : IconArrowDown">{{ dddd.isShow ? "收起" : "展开" }}</el-button><a id="aExport" href="#" class="hide"></a></el-row></el-form></div><div class="rv_table"><el-table stripe border show-overflow-tooltip highlight-current-row size="small" class-name="custom-table" header-cell-class-name="custom-header-cell-class-name" :row-class-name="tableRowClassName":data="dddd.tableList" @selection-change="handleSelectionChange"><el-table-column type="selection" align="center" width="50" fixed="left"></el-table-column><el-table-column align="center" width="100" label="操作" fixed="left"><template #default="scope"><el-button type="primary" size="small" @click="clickEdit1(scope.row)" :icon="IconEdit"></el-button><el-button type="danger" size="small" @click="clickDelete1(scope.row)" :icon="IconRowRemove"></el-button></template></el-table-column><el-table-column align="center" type="index" label="序号" width="50" fixed="left"></el-table-column><el-table-column align="center" prop="city" label="装车基地" width="75" fixed="left"></el-table-column><el-table-column align="center" prop="carModel" label="车系" width="75" fixed="left"></el-table-column><el-table-column align="center" prop="carType" label="车型" width="75" fixed="left"></el-table-column><el-table-column align="center" prop="carConf" label="配置" width="75" fixed="left"></el-table-column><el-table-column align="center" prop="carSel" label="选装" width="75" fixed="left"></el-table-column><el-table-column align="center" prop="country" label="国家" width="75" fixed="left"></el-table-column><el-table-column align="center" prop="assemblyMatNumber" label="总成料号" width="150" fixed="left"></el-table-column><el-table-column align="center" prop="assemblyDes" label="总成描述" width="220" fixed="left"></el-table-column><el-table-column align="center" prop="num" label="用量" width="75"></el-table-column><el-table-column align="center" prop="factory" label="工厂" width="75"></el-table-column><el-table-column align="center" prop="carScale" label="份额" width="75"></el-table-column><el-table-column align="center" prop="speLineName" label="线体名称" width="150"></el-table-column><el-table-column align="center" prop="buyLocation" label="代装厂" width="75"></el-table-column><el-table-column align="center" prop="capacityCheck" label="产能检查" width="75"></el-table-column><el-table-column align="center" prop="product" label="产品大类" width="75"></el-table-column><el-table-column align="center" prop="productSub" label="产品小类" width="75"></el-table-column><el-table-column align="center" prop="planPerson" label="计划员" width="75"></el-table-column><el-table-column align="center" prop="carScale1" label="1月份额" width="75"></el-table-column><el-table-column align="center" prop="carScale2" label="2月份额" width="75"></el-table-column><el-table-column align="center" prop="carScale3" label="3月份额" width="75"></el-table-column><el-table-column align="center" prop="carScale4" label="4月份额" width="75"></el-table-column><el-table-column align="center" prop="carScale5" label="5月份额" width="75"></el-table-column><el-table-column align="center" prop="carScale6" label="6月份额" width="75"></el-table-column><el-table-column align="center" prop="carScale7" label="7月份额" width="75"></el-table-column><el-table-column align="center" prop="carScale8" label="8月份额" width="75"></el-table-column><el-table-column align="center" prop="carScale9" label="9月份额" width="75"></el-table-column><el-table-column align="center" prop="carScale10" label="10月份额" width="75"></el-table-column><el-table-column align="center" prop="carScale11" label="11月份额" width="75"></el-table-column><el-table-column align="center" prop="carScale12" label="12月份额" width="75"></el-table-column><el-table-column align="center" prop="lineName" label="特殊线体" width="150"></el-table-column><el-table-column align="center" prop="createName" label="创建人" width="75"></el-table-column><el-table-column align="center" prop="createTime" label="创建时间" width="150"></el-table-column><el-table-column align="center" prop="updateName" label="修改人" width="75"></el-table-column><el-table-column align="center" prop="updateTime" label="修改时间" width="150"></el-table-column></el-table></div><div class="rv_center"><el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="dddd.pageNum":page-size="dddd.pageSize":page-sizes="[10, 100, 500, 1000, 2000]":total="dddd.total"layout="total, sizes, prev, pager, next, jumper"></el-pagination></div></div></div>
</template>
<style>
.rv_root_container {flex: 1;display: flex;background-color: #f3f3f3;padding: 16px;overflow: hidden;
}
.rv_container {flex: 1;display: flex;flex-direction: column;background-color: white;border-radius: 5px;padding: 16px;overflow: hidden;position: relative;
}
.rv_center {display: flex;align-content: center;justify-content: center;
}
.rv_table {flex: 1;margin-top: 16px;margin-bottom: 16px;position: relative;
}
.rv_upload {line-height: 0.8;margin-left: 16px;
}
.custom-table .cell {padding: 0;justify-content: center;
}
.el-table .warning-row {color: tomato;
}
</style>
<script setup>
import { IconReload, IconRefresh, IconDownload, IconPlus, IconRowRemove, IconUpload, IconArrowUp, IconArrowDown,IconEdit } from "@tabler/icons-vue"
import { basePostReq, sendPostReq } from "@/service/baseReq.js"
import { ApiPaths } from "@/service/Request.js"
import { ElMessage, ElMessageBox } from "element-plus"
import { useRoute, useRouter } from "vue-router"
import { reactive, onActivated } from "vue"const dddd = reactive({form: {},tableList: [],pageSize: 10,pageNum: 1,total: 0,selectBatch: [],isShow: false,factoryList: ['SZ55','X157','C157','HFF5'],lineNameList: [],capacityCheckList: ['是', '否'],productList: [],productSubList: [],planPersonList: [],cityList: [],carModelList: [],carTypeList: [],carConfList: [],carSelList: [],countryList: []
})const route = useRoute()
const router = useRouter()onActivated(() => {if (!route.meta.isBack) {clickReset()dddd.tableList = []}route.meta.isBack = false
})function handleSizeChange(val) {dddd.pageSize = valgetPage()
}
function handleCurrentChange(val) {dddd.pageNum = valgetPage()
}
function handleSelectionChange(val) {dddd.selectBatch = val
}
function tableRowClassName(item) {if (item.row.capacityCheck != '是') {return 'warning-row'}return ''
}
function getParam() {var param = {}if (dddd.form.city) {param.city = dddd.form.city.replace(/[\r\n]/g, ";")}if (dddd.form.carModel) {param.carModel = dddd.form.carModel.replace(/[\r\n]/g, ";")}if (dddd.form.carType) {param.carType = dddd.form.carType.replace(/[\r\n]/g, ";")}if (dddd.form.carConf) {param.carConf = dddd.form.carConf.replace(/[\r\n]/g, ";")}if (dddd.form.carSel) {param.carSel = dddd.form.carSel.replace(/[\r\n]/g, ";")}if (dddd.form.country) {param.country = dddd.form.country.replace(/[\r\n]/g, ";")}if (dddd.form.assemblyMatNumber) {param.assemblyMatNumber = dddd.form.assemblyMatNumber.replace(/[\r\n]/g, ";")}if (dddd.form.assemblyDes) {param.assemblyDes = dddd.form.assemblyDes.replace(/[\r\n]/g, ";")}if (dddd.form.factory) {param.factory = dddd.form.factory}if (dddd.form.buyLocation) {param.buyLocation = dddd.form.buyLocation.replace(/[\r\n]/g, ";")}if (dddd.form.lineName) {param.lineName = dddd.form.lineName}if (dddd.form.capacityCheck) {param.capacityCheck = dddd.form.capacityCheck}if (dddd.form.product) {param.product = dddd.form.product}if (dddd.form.productSub) {param.productSub = dddd.form.productSub}if (dddd.form.planPerson) {param.planPerson = dddd.form.planPerson}return param
}
function clickSearch() {getPage()
}
function getPage() {var param = getParam()param.pageNum = dddd.pageNumparam.pageSize = dddd.pageSizebasePostReq(ApiPaths.rvNeedCarBomGetPage, param, (res) => {if (res) {dddd.tableList = res.datadddd.total = res.total}})
}
function clickReset() {dddd.form = {}dddd.pageNum = 1getInitMap()getCarTypeInitMap()
}
function clickExport() {var param = getParam()var config = {responseType: "blob",}const data = sendPostReq(ApiPaths.rvNeedCarBomExport, param, config, true, true, true, (res) => {if (res) {const blob = new Blob([res])let $a = document.getElementById("aExport")$a.download = "整车bom.xlsx"$a.href = URL.createObjectURL(blob)$a.click()URL.revokeObjectURL($a.href)}})
}
function clickTemplate() {var config = {responseType: "blob",}sendPostReq(ApiPaths.rvNeedCarBomExportTemplate,null,config,true,true,true,(res) => {if (res) {const blob = new Blob([res])let $a = document.getElementById("aExport")$a.download = "整车bom模板.xlsx"$a.href = URL.createObjectURL(blob)$a.click()URL.revokeObjectURL($a.href)}})
}
function handleOnChange(file) {if (file.status == "ready") {var curFile = file.rawconst isExcel = ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",].includes(curFile.type)const isLt1M = curFile.size / 1024 / 1024 < 100if (!isExcel) {ElMessage.error("文件格式为.xlsx")return}if (!isLt1M) {ElMessage.error("文件要小于100M")return}var formData = new FormData()formData.append("file", file.raw)formData.append("param", JSON.stringify(getParam()))var config = {headers: {"Content-Type": "multipart/form-data",},}sendPostReq(ApiPaths.rvNeedCarBomImportFileCheck1,formData,config,true,true,false,(res) => {if (res && res.code == 200) {ElMessage.success("上传成功")}})}
}
function clickDelete() {if (!dddd.selectBatch.length) {ElMessage.error("没有数据被选中")return}ElMessageBox.confirm("是否删除", "温馨提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {var ids = dddd.selectBatch.map((p) => p.id)var param = {}param.ids = idssendPostReq(ApiPaths.rvNeedCarBomRemoveListByIds,param,null,true,true,false,(res) => {if (res && res.code == 200) {ElMessage.success("删除成功")clickSearch()}})})
}
function clickDelete1(item) {if (!item || !item.id) {ElMessage.error("没有id")return}ElMessageBox.confirm("是否删除", "温馨提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {var param = {}param.ids = [item.id]sendPostReq(ApiPaths.rvNeedCarBomRemoveListByIds,param,null,true,true,false,(res) => {if (res && res.code == 200) {ElMessage.success("删除成功")clickSearch()}})})
}
function clickEdit() {router.push({ path: "/main/rvCarBomEdit" })
}
function clickEdit1(item) {if (item && item.id) {item.edit = "update"router.push({ path: "/main/rvCarBomEdit",query:item })}
}
function clickShow() {dddd.isShow = !dddd.isShow
}
function getLineName() {var param = {}param.factory = dddd.form.factorybasePostReq(ApiPaths.rvBomCarProductMatGetListLineName, param, (res) => {dddd.lineNameList = res})
}
function handleChangeFactory() {getLineName()
}
function getInitMap() {var param = {}basePostReq(ApiPaths.rvNeedCarBomGetInitMap, param, (res) => {if (res) {dddd.productList = res.productListdddd.productSubList = res.productSubListdddd.planPersonList = res.planPersonListdddd.lineNameList = res.lineNameListdddd.factoryList = res.factoryList}})
}
function getProductSub() {var param = {}if (dddd.form.product) {param.product = dddd.form.product}basePostReq(ApiPaths.rvBomCarProductMatGetListProductSub, param, (res) => {dddd.productSubList = res})
}
function handleChangeProduct() {getProductSub()
}
function getCarTypeInitMap() {var param = {}basePostReq(ApiPaths.rvNeedCarTypeManagerGetCarTypeInitMap, param, (res) => {if (res) {dddd.cityList = res.cityListdddd.carModelList = res.carModelListdddd.carTypeList = res.carTypeListdddd.carSelList = res.carSelListdddd.carConfList = res.carConfListdddd.countryList = res.countryList}})
}
</script>

编辑页面

<!----><template><div class="rv_root_container_edit"><div class="rv_container_edit"><div><el-form label-position="right" size="small"><el-form-item label="装车基地" required><el-input :clearable="true" v-model="dddd.form.city" style="width:150px"></el-input></el-form-item><el-form-item label="车系" required><el-input :clearable="true" v-model="dddd.form.carModel" style="width:150px"></el-input></el-form-item><el-form-item label="车型" required><el-input :clearable="true" v-model="dddd.form.carType" style="width:150px"></el-input></el-form-item><el-form-item label="配置" required><el-input :clearable="true" v-model="dddd.form.carConf" style="width:150px"></el-input></el-form-item><el-form-item label="选装" required><el-input :clearable="true" v-model="dddd.form.carSel" style="width:150px"></el-input></el-form-item><el-form-item label="国家" required><el-input :clearable="true" v-model="dddd.form.country" style="width:150px"></el-input></el-form-item><el-form-item label="总成料号" required><el-input :clearable="true" v-model="dddd.form.assemblyMatNumber" style="width:150px"></el-input></el-form-item><el-form-item label="总成描述" required><el-input :clearable="true" v-model="dddd.form.assemblyDes" style="width:220px"></el-input></el-form-item><el-form-item label="用量" required><el-input :clearable="true" v-model="dddd.form.num" style="width:150px"></el-input></el-form-item><el-form-item label="工厂" required><el-input :clearable="true" v-model="dddd.form.factory" style="width:150px"></el-input></el-form-item><el-form-item label="份额" required><el-input :clearable="true" v-model="dddd.form.carScale" style="width:150px"></el-input></el-form-item><el-form-item label="线体名称"><el-input :clearable="true" v-model="dddd.form.speLineName" style="width:150px" disabled></el-input></el-form-item><el-form-item label="代装厂"><el-input :clearable="true" v-model="dddd.form.buyLocation" style="width:150px"></el-input></el-form-item><el-form-item label="产能检查"><el-input :clearable="true" v-model="dddd.form.capacityCheck" style="width:150px" disabled></el-input></el-form-item><el-form-item label="产品大类"><el-input :clearable="true" v-model="dddd.form.product" style="width:150px" disabled></el-input></el-form-item><el-form-item label="产品小类"><el-input :clearable="true" v-model="dddd.form.productSub" style="width:150px" disabled></el-input></el-form-item><el-form-item label="计划员"><el-input :clearable="true" v-model="dddd.form.planPerson" style="width:150px" disabled></el-input></el-form-item><el-form-item label="1月份额"><el-input :clearable="true" v-model="dddd.form.carScale1" style="width:150px"></el-input></el-form-item><el-form-item label="2月份额"><el-input :clearable="true" v-model="dddd.form.carScale2" style="width:150px"></el-input></el-form-item><el-form-item label="3月份额"><el-input :clearable="true" v-model="dddd.form.carScale3" style="width:150px"></el-input></el-form-item><el-form-item label="4月份额"><el-input :clearable="true" v-model="dddd.form.carScale4" style="width:150px"></el-input></el-form-item><el-form-item label="5月份额"><el-input :clearable="true" v-model="dddd.form.carScale5" style="width:150px"></el-input></el-form-item><el-form-item label="6月份额"><el-input :clearable="true" v-model="dddd.form.carScale6" style="width:150px"></el-input></el-form-item><el-form-item label="7月份额"><el-input :clearable="true" v-model="dddd.form.carScale7" style="width:150px"></el-input></el-form-item><el-form-item label="8月份额"><el-input :clearable="true" v-model="dddd.form.carScale8" style="width:150px"></el-input></el-form-item><el-form-item label="9月份额"><el-input :clearable="true" v-model="dddd.form.carScale9" style="width:150px"></el-input></el-form-item><el-form-item label="10月份额"><el-input :clearable="true" v-model="dddd.form.carScale10" style="width:150px"></el-input></el-form-item><el-form-item label="11月份额"><el-input :clearable="true" v-model="dddd.form.carScale11" style="width:150px"></el-input></el-form-item><el-form-item label="12月份额"><el-input :clearable="true" v-model="dddd.form.carScale12" style="width:150px"></el-input></el-form-item><el-form-item label="特殊线体"><el-input :clearable="true" v-model="dddd.form.lineName" style="width:150px"></el-input></el-form-item><el-form-item><el-button type="primary" @click="clickBack" :icon="IconBackpackOff">返回</el-button><el-button type="primary" @click="clickConfirm" :icon="IconDoorEnter">确定</el-button></el-form-item></el-form></div></div></div>
</template><style>
.rv_root_container_edit {display: flex;flex: 1;background-color: #f3f3f3;padding: 16px;overflow: hidden;
}
.rv_container_edit {flex: 1;background-color: white;border-radius: 5px;padding: 16px;overflow: auto;
}
</style><script setup>
import { IconBackpackOff, IconDoorEnter } from "@tabler/icons-vue";
import { sendPostReq } from "@/service/baseReq.js";
import { ApiPaths } from "@/service/Request.js";
import { ElMessage } from "element-plus";
import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router"
import { reactive, onActivated } from "vue"const dddd = reactive({form: {id: null}
})const route = useRoute()
const router = useRouter()
onBeforeRouteLeave((to, from, next) => {to.meta.isBack = truenext()
})onActivated(() => {if (route.query && route.query.id) {dddd.form = route.query} else {dddd.form = {}}
})if (route.query && route.query.id) {dddd.form = route.query
}function clickConfirm() {if (dddd.form.edit == "update") {sendPostReq(ApiPaths.rvNeedCarBomUpdateOneById, dddd.form, null, true, true, false, (res) => {if (res && res.code == 200) {ElMessage.success("更新成功")clickBack()}})} else {sendPostReq(ApiPaths.rvNeedCarBomSave, dddd.form, null, true, true, false, (res) => {if (res && res.code == 200) {ElMessage.success("新增成功")clickBack()}})}
}function clickBack() {router.back()
}</script>

改变cell颜色

//
.el-table .warning-row {color: tomato;
}
.el-table .ws-normal .el-tooltip{white-space: pre-line;
}//
:cell-class-name="tableCellClassName"//
function tableCellClassName(item) {if (item.rowIndex % 5  == 3 && item.columnIndex == 15) {return 'ws-normal'} else if (item.rowIndex % 5  == 2) {for(var i = 0; i < dddd.titleList.length; i ++) {var curCell = dddd.titleList[i]if (item.columnIndex == 15 + i && item.row[curCell] < 0) {return 'warning-row'}}}return ''
}