From f32a2076eaf60866ec303cff56949a98e4f80072 Mon Sep 17 00:00:00 2001 From: xing <xingjs@qq.com> Date: 星期日, 26 二月 2023 11:24:46 +0800 Subject: [PATCH] 20230226@xingjs@优化完善数据管理样式 --- src/views/datamanage/dataUpdata copy.vue | 510 ++++++++++++++++++++++++++++++-------------------------- 1 files changed, 276 insertions(+), 234 deletions(-) diff --git a/src/views/datamanage/dataUpdata copy.vue b/src/views/datamanage/dataUpdata copy.vue index a7c1144..4482fba 100644 --- a/src/views/datamanage/dataUpdata copy.vue +++ b/src/views/datamanage/dataUpdata copy.vue @@ -1,56 +1,56 @@ <template> <div - class="authorityManagement_box" - v-loading.fullscreen.lock="fullscreenLoading" - element-loading-spinner="el-icon-loading" - element-loading-background="rgba(0, 0, 0, 0.8)" + class="authorityManagement_box" + v-loading.fullscreen.lock="fullscreenLoading" + element-loading-spinner="el-icon-loading" + element-loading-background="rgba(0, 0, 0, 0.8)" > <My-bread :list="[ `${$t('dataManage.dataManage')}`, `${$t('dataManage.dataUpdata')}`, ]"></My-bread> - <el-divider /> + <el-divider/> <div class="updateContent"> <el-tabs - v-model="activeTabName" - @tab-click="handleTabClick" + v-model="activeTabName" + @tab-click="handleTabClick" > <el-tab-pane - :label="$t('dataManage.dataUpObj.uploaddata')" - name="first" + :label="$t('dataManage.dataUpObj.uploaddata')" + name="first" > <div class="contentIquery"> <el-form - :inline="true" - :model="formInline" - class="demo-form-inline" + :inline="true" + :model="formInline" + class="demo-form-inline" > <el-form-item :label="$t('dataManage.dataUpObj.catalogue')"> <el-cascader - v-model="formInline.dirid" - :options="catalogOption" - @change="catalogChange" - :props="cascader" + v-model="formInline.dirid" + :options="catalogOption" + @change="catalogChange" + :props="cascader" ></el-cascader> </el-form-item> <el-form-item :label="$t('dataManage.dataUpObj.company')"> <el-cascader - v-model="formInline.depid" - :options="companyOption" - @change="companyChange" - :props="cascader" + v-model="formInline.depid" + :options="companyOption" + @change="companyChange" + :props="cascader" ></el-cascader> </el-form-item> <el-form-item :label="$t('dataManage.dataUpObj.versionNo')"> <el-select - v-model="formInline.verid" - :placeholder="$t('common.choose')" + v-model="formInline.verid" + :placeholder="$t('common.choose')" > <el-option - v-for="item in verOption" - :key="item.id" - :label="item.name" - :value="item.id" + v-for="item in verOption" + :key="item.id" + :label="item.name" + :value="item.id" > </el-option> </el-select> @@ -66,116 +66,118 @@ </el-form-item> --> <el-form-item> <el-input - <el-input - type="textarea" - v-model="formInline.fileName" - class="nm-skin-pretty" - show-word-limit - :rows="2" - resize='none' - style="width: 600px;" - ></el-input> + type="textarea" + v-model="formInline.fileName" + class="nm-skin-pretty" + show-word-limit + :rows="2" + resize='none' + style="width: 600px;" ></el-input> </el-form-item> <el-form-item> <input - id="uploadfile" - @change="handleFileChange" - type="file" - name="file" - multiple="multiple" - style="display: none" + id="uploadfile" + @change="handleFileChange" + type="file" + name="file" + multiple="multiple" + style="display: none" ></input> <el-button - v-if="formInline.fileName == '鏈�夋嫨鏂囦欢'" - type="info" - @click="fileSelect" + v-if="formInline.fileName == '鏈�夋嫨鏂囦欢'" + type="info" + @click="fileSelect" > 閫夋嫨鏂囦欢 </el-button> <el-button - v-else - type="info" - @click="clearFileSelect" + v-else + type="info" + @click="clearFileSelect" > 閲嶇疆 </el-button> </el-form-item> - <br /> + <br/> <el-form-item :label="$t('dataManage.dataUpObj.describe')"> <el-input - type="textarea" - v-model="formInline.descr" - maxlength="50" - class="nm-skin-pretty" - show-word-limit - :rows="2" - resize='none' - style="width: 460px" + type="textarea" + v-model="formInline.descr" + maxlength="50" + class="nm-skin-pretty" + show-word-limit + :rows="2" + resize='none' + style="width: 460px" ></el-input> </el-form-item> <el-form-item> <el-button - icon="el-icon-upload" - @click="setFileUpload" - type="success" + icon="el-icon-upload" + @click="setFileUpload" + type="success" >{{ - $t('common.upload') - }}</el-button> + $t('common.upload') + }} + </el-button> <el-button - icon="el-icon-delete" - type="danger" - @click="setFileDelete" - :disabled="tableData.length == 0 ? true : false" - >{{ $t('common.delete') }}</el-button> + icon="el-icon-delete" + type="danger" + @click="setFileDelete" + :disabled="tableData.length == 0 ? true : false" + >{{ $t('common.delete') }} + </el-button> <el-button - icon="el-icon-data-line" - type="info" - disabled - >{{ $t('common.quayTest') }}</el-button> + icon="el-icon-data-line" + type="info" + disabled + >{{ $t('common.quayTest') }} + </el-button> <el-button - icon="el-icon-folder-add" - type="warning" - @click="setFileWare" - :disabled="tableData.length == 0 ? true : false" - >{{ $t('common.Warehousin') }}</el-button> + icon="el-icon-folder-add" + type="warning" + @click="setFileWare" + :disabled="tableData.length == 0 ? true : false" + >{{ $t('common.Warehousin') }} + </el-button> </el-form-item> </el-form> </div> <div class="contentTable"> <el-table - :data="tableData" - style="width: width:99%" - height="99%" - @selection-change="handleSelectionChange" + :data="tableData" + style="width: 99%" + height="99%" + @selection-change="handleSelectionChange" > <el-table-column - type="selection" - width="55" + type="selection" + width="55" /> <el-table-column - align="center" - type="index" - :label="$t('common.index')" - width="70px" - fixed + align="center" + type="index" + :label="$t('common.index')" + width="70px" + fixed /> <el-table-column - align="center" - prop="name" - :label="$t('common.name')" - fixed + align="center" + prop="name" + :label="$t('common.name')" + fixed /> <el-table-column - align="center" - prop="sizes" - :label="$t('common.size')" - fixed - :formatter="changeSizeFile" + align="center" + prop="sizes" + :label="$t('common.size')" + fixed + :formatter="changeSizeFile" /> <!-- <el-table-column align="center" @@ -188,148 +190,151 @@ </el-tab-pane> <el-tab-pane - :label="$t('dataManage.dataUpObj.receiptdata')" - name="second" + :label="$t('dataManage.dataUpObj.receiptdata')" + name="second" > <div - class="contentIquery" - style="padding-bottom: 0% !important;" + class="contentIquery" + style="padding-bottom: 0% !important;" > <el-form - :inline="true" - :model="formWarehousing" - class="demo-form-inline" + :inline="true" + :model="formWarehousing" + class="demo-form-inline" > <el-form-item :label="$t('dataManage.dataUpObj.describe')"> <el-input - v-model="formWarehousing.name" - placeholder="璇疯緭鍏ュ唴瀹�" + v-model="formWarehousing.name" + placeholder="璇疯緭鍏ュ唴瀹�" ></el-input> </el-form-item> <el-form-item> <el-button - icon="el-icon-upload" - @click="setWarehouseSearch" - class="primary" + icon="el-icon-upload" + @click="setWarehouseSearch" + class="primary" >{{ - $t('common.iquery') - }}</el-button> + $t('common.iquery') + }} + </el-button> <el-button - @click="setWarehouseReset" - icon="el-icon-folder-add" - type="info" - >{{ $t('common.reset') }}</el-button> + @click="setWarehouseReset" + icon="el-icon-folder-add" + type="info" + >{{ $t('common.reset') }} + </el-button> <el-button - @click="setWarehouseDel" - icon="el-icon-folder-delete" - type="danger" - >{{ $t('common.delete') }}</el-button> + @click="setWarehouseDel" + icon="el-icon-folder-delete" + type="danger" + >{{ $t('common.delete') }} + </el-button> </el-form-item> </el-form> </div> <div - class="contentTable" - style="height:500px" + class="contentTable" + style="height:500px" > <el-table - :data="waretableData" - @selection-change="handleDelteChange" - style="width:99%" - height="92%" + :data="waretableData" + @selection-change="handleDelteChange" + style="width:99%" + height="92%" > <el-table-column - type="selection" - width="55" + type="selection" + width="55" /> <el-table-column - align="center" - type="index" - :label="$t('common.index')" - width="70px" - fixed + align="center" + type="index" + :label="$t('common.index')" + width="70px" + fixed /> <el-table-column - align="center" - prop="name" - :label="$t('common.name')" - fixed + align="center" + prop="name" + :label="$t('common.name')" + fixed /> <el-table-column - align="center" - prop="dirName" - :label="$t('dataManage.dataUpObj.catalogue')" - fixed + align="center" + prop="dirName" + :label="$t('dataManage.dataUpObj.catalogue')" + fixed /> <el-table-column - align="center" - prop="depName" - :label="$t('dataManage.dataUpObj.company')" - fixed + align="center" + prop="depName" + :label="$t('dataManage.dataUpObj.company')" + fixed /> <el-table-column - align="center" - prop="verName" - :label="$t('dataManage.dataUpObj.versionNo')" - fixed + align="center" + prop="verName" + :label="$t('dataManage.dataUpObj.versionNo')" + fixed /> <el-table-column - align="center" - prop="type" - :label="$t('common.type')" - fixed + align="center" + prop="type" + :label="$t('common.type')" + fixed /> <el-table-column - align="center" - prop="sizes" - :label="$t('common.size')" - fixed - :formatter="changeSizeFile" + align="center" + prop="sizes" + :label="$t('common.size')" + fixed + :formatter="changeSizeFile" /> <el-table-column - align="center" - prop="tab" - :label="$t('dataManage.dataUpObj.tableName')" - fixed + align="center" + prop="tab" + :label="$t('dataManage.dataUpObj.tableName')" + fixed /> <el-table-column - align="center" - prop="rows" - :label="$t('common.lineNuber')" - fixed + align="center" + prop="rows" + :label="$t('common.lineNuber')" + fixed /> <el-table-column - align="center" - prop="desc" - :label="$t('dataManage.dataUpObj.describe')" - fixed + align="center" + prop="desc" + :label="$t('dataManage.dataUpObj.describe')" + fixed /> <el-table-column - align="center" - prop="uname" - :label="$t('dataManage.vmobj.createonuser')" - fixed + align="center" + prop="uname" + :label="$t('dataManage.vmobj.createonuser')" + fixed /> <el-table-column - align="center" - prop="createTime" - :label="$t('dataManage.vmobj.createontime')" - fixed - :formatter="changetimeFile" + align="center" + prop="createTime" + :label="$t('dataManage.vmobj.createontime')" + fixed + :formatter="changetimeFile" /> </el-table> <div - style="margin-top: 10px" - class="pagination_box" + style="margin-top: 10px" + class="pagination_box" > <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="listData.pageIndex" - :page-sizes="[10, 20, 50, 100]" - :page-size="listData.pageSize" - layout="total, sizes, prev, pager, next, jumper" - :total="count" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="listData.pageIndex" + :page-sizes="[10, 20, 50, 100]" + :page-size="listData.pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="count" > </el-pagination> </div> @@ -345,11 +350,19 @@ <script> import $ from 'jquery'; import MyBread from '../../components/MyBread.vue'; -import { getToken } from '@/utils/auth'; +import {getToken} from '@/utils/auth'; import { - selectdirTab, queryDepTree, dataUploadSelectVerByDirid, dataUploadSelectPath, dataUploadSelectFiles, dataUploadDeleteFiles, dataUploadInsertFiles, - dataUpload_selectByPageForUpload, dataUpload_deleteMetas + dataUpload_deleteMetas, + dataUpload_selectByPageForUpload, + dataUploadDeleteFiles, + dataUploadInsertFiles, + dataUploadSelectFiles, + dataUploadSelectPath, + dataUploadSelectVerByDirid, + queryDepTree, + selectdirTab } from '../../api/api'; + export default { name: 'dataUpdata', components: { @@ -414,8 +427,8 @@ let nowDate = moment(date).format('HH:mm:ss'); let st = ''; if ( - moment(date).format('yyyy-MM-DD') === - moment(newValue).format('yyyy-MM-DD') + moment(date).format('yyyy-MM-DD') === + moment(newValue).format('yyyy-MM-DD') ) { let hh1 = moment(newValue).format('HH:mm:ss'); if (hh1 > nowDate) { @@ -442,7 +455,7 @@ for (var i in this.multipleDelete) { std.push(this.multipleDelete[i].id); } - const res = await dataUpload_deleteMetas({ ids: std.toString() }) + const res = await dataUpload_deleteMetas({ids: std.toString()}) if (res.code != 200) { this.$message.error('鍒犻櫎澶辫触'); } else { @@ -470,17 +483,17 @@ var mm = time.getMinutes(); var s = time.getSeconds(); return ( - y + - '-' + - this.add0(m) + - '-' + - this.add0(d) + - ' ' + - h + - ':' + - mm + - ':' + - s + y + + '-' + + this.add0(m) + + '-' + + this.add0(d) + + ' ' + + h + + ':' + + mm + + ':' + + s ); }, //鏍煎紡鍖栨椂闂� @@ -618,7 +631,7 @@ error: (rs) => { this.fullscreenLoading = false; - this.$message.error('鏁版嵁涓婁紶澶辫触'); + this.$message.error('鏁版嵁涓婁紶澶辫触'); this.clearFileSelect(); } }); @@ -691,17 +704,17 @@ var seconds = date.getSeconds(); //绉� var sign2 = ':'; var s1 = - date.getFullYear() + - '-' + - (date.getMonth() + 1) + - '-' + - date.getDate() + - ' ' + - hour + - sign2 + - minutes + - sign2 + - seconds; + date.getFullYear() + + '-' + + (date.getMonth() + 1) + + '-' + + date.getDate() + + ' ' + + hour + + sign2 + + minutes + + sign2 + + seconds; this.formInline.gather = s1; }, @@ -741,7 +754,7 @@ async getselectVerByDirid() { this.verOption = []; this.formInline.verid = ""; - const res = await dataUploadSelectVerByDirid({ dirid: this.formInline.dirid }); + const res = await dataUploadSelectVerByDirid({dirid: this.formInline.dirid}); if (res.code != 200) { this.$message.error('鐗堟湰鍒楄〃鑾峰彇澶辫触'); return; @@ -780,12 +793,13 @@ height: calc(100% - 20px); padding: 10px; position: absolute; - + .updateContent { width: 100%; height: 670px; position: relative; + .contentIquery { width: 97%; height: 16%; @@ -793,6 +807,7 @@ padding: 1%; border-radius: 5px; } + .contentTable { width: 97%; height: 400px; @@ -801,6 +816,7 @@ border-radius: 5px; margin-top: 1%; /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/ + /deep/ .el-table { background-color: transparent; @@ -808,6 +824,7 @@ td { background-color: transparent; } + .el-table__expanded-cell { background-color: transparent !important; } @@ -817,6 +834,7 @@ background-color: #303030; color: #fff; } + tr > td { background-color: #303030; color: #fff; @@ -844,7 +862,9 @@ height: 5px; /*婊氬姩鏉¢珮搴�*/ } + /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/ + .el-table__body-wrapper::-webkit-scrollbar-track { box-shadow: 0px 1px 3px #216fe6 inset; /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/ @@ -852,49 +872,62 @@ } /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/ + .el-table__body-wrapper::-webkit-scrollbar-thumb { box-shadow: 0px 1px 3px #216fe6 inset; border-radius: 6px; background-color: #216fe6; } } + .pagination_box { margin-top: 20px; - /deep/.el-input__inner { + + /deep/ .el-input__inner { background-color: transparent !important; border: 1px solid; color: white; } - /deep/.el-pagination__total { + + /deep/ .el-pagination__total { color: white; } - /deep/.el-pagination__jump { + + /deep/ .el-pagination__jump { color: white; } - /deep/.el-pager li.active { + + /deep/ .el-pager li.active { color: #409eff; } - /deep/.el-pager li { + + /deep/ .el-pager li { color: white; background: transparent; } - /deep/.el-pager li { + + /deep/ .el-pager li { color: white; } - /deep/.btn-prev { + + /deep/ .btn-prev { background: transparent; } - /deep/.btn-next { + + /deep/ .btn-next { background: transparent; } - /deep/.btn-next i { + + /deep/ .btn-next i { color: white; } - /deep/.btn-prev i { + + /deep/ .btn-prev i { color: white; } } } + .primary { background: #409eff; border: #409eff; @@ -902,39 +935,48 @@ } } - /deep/.el-form-item__label { + /deep/ .el-form-item__label { color: white; } + // 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱 - /deep/.el-input__inner { - background-color: transparent !important ; + /deep/ .el-input__inner { + background-color: transparent !important; color: #fff; border: 1px solid; } + /deep/ .popper__arrow::after { border-top-color: rgba(43, 45, 55, 0.8); } + /deep/ .el-select .el-input__inner { border-color: #fff !important; } - /deep/.el-cascader .el-input__inner { + + /deep/ .el-cascader .el-input__inner { border-color: #fff !important; } - /deep/.el-textarea__inner { + + /deep/ .el-textarea__inner { background: transparent; border-color: #fff !important; color: white; } - /deep/.el-textarea .el-input__count { + + /deep/ .el-textarea .el-input__count { background: transparent; color: #fff !important; } - /deep/.el-loading-spinner i { + + /deep/ .el-loading-spinner i { color: #1890ff !important; } - /deep/.el-tabs__active-bar { + + /deep/ .el-tabs__active-bar { background: #409eff; } + /deep/ .el-tabs__item { color: #409eff; } -- Gitblit v1.9.3