|
|
@@ -1,897 +1,325 @@
|
|
|
<template>
|
|
|
- <div class="data-table" :style="{ marginTop: marginTop }">
|
|
|
- <div :style="dataTableContentStyle" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="data-table-content">
|
|
|
- <div class="flex">
|
|
|
- <div class="manageTitle">{{ pageTitle }}</div>
|
|
|
- <el-button size="small" @click="handleAdd" plain type="primary">新增</el-button>
|
|
|
- </div>
|
|
|
- <template v-if="tableData.length">
|
|
|
- <div>
|
|
|
- <el-table v-el-table-infinite-scroll="load" :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" :tree-props="treeProps" :row-key="rowKeyTree" stripe :show-summary="showSummary" border ref="table" :height="tableHeight ? tableHeight : minHeight - 8 + 'vh'" class="table infinite-list" style="width: 100%; overflow: auto" @select="selectHandler">
|
|
|
- <el-table-column v-for="(item, index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel" :show-overflow-tooltip="showOverflowTooltip" :formtter="formtter">
|
|
|
- <template #header>
|
|
|
- <span class="colTips">
|
|
|
- <el-tooltip :content="item.columnDescribe" placement="top">
|
|
|
- <span>{{ item.columnLabel }}</span>
|
|
|
- </el-tooltip>
|
|
|
- </span>
|
|
|
- <span v-if="item.needFilters">
|
|
|
- <el-popover placement="bottom" trigger="click" @show="popoverShowHandler(item.columnName)" @hide="popoverHideHandler">
|
|
|
- <i slot="reference" :class="[
|
|
|
- 'filter-arrow',
|
|
|
- 'el-icon-arrow-down',
|
|
|
- arrowClass(item.columnName),
|
|
|
- ]" />
|
|
|
- <el-form>
|
|
|
- <el-form-item :label="item.columnLabel">
|
|
|
- <el-select v-model="filterValues[item.columnName]" size="small" placeholder="筛选" default-first-option filterable clearable>
|
|
|
- <el-option v-for="(option, optionIndex) in tableDataFilters[
|
|
|
- item.columnName
|
|
|
- ]" :key="option.value + optionIndex" :value="option.value" :label="option.text" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-popover>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column fixed="right" label="操作" :width="fixedWidth">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div class="hd-td">
|
|
|
- <el-button type="text" @click="handleEdit(scope.row)" size="small" class="rmScs">编辑</el-button>
|
|
|
- <el-button class="rmSc" type="text" @click="handleRemove(scope.row)" size="small">删除</el-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <NoData image-width="auto" image-height="100%" />
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div class="data-table-dialog">
|
|
|
- <!--新增/编辑-->
|
|
|
- <Dialog :width="width" :isBody="isBody" :flag="flag">
|
|
|
- <div class="dialog-content">
|
|
|
- <div class="title">{{ tableTitle }}</div>
|
|
|
- <div class="contents">
|
|
|
- <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col v-for="(item, index) in tableColsCopy" :key="index" :span="rows">
|
|
|
- <el-form-item :label="item.columnLabel">
|
|
|
- <template v-if="
|
|
|
- item.listqueryTemplateID ||
|
|
|
- item.listqueryTemplateID == 0
|
|
|
- ">
|
|
|
- <el-select v-if="asShow" class="input-shadow" size="small" filterable default-first-option style="width: 100%" v-model="tableForm[item.columnName]" @change="changeSelect(item.columnName, item)" placeholder="请选择" clearable @clear="tableForm[item.columnName] = ''">
|
|
|
- <el-option v-for="item in tableOptions[item.columnName]" :key="item.v ? item.v : item.planDepartureApt" :label="item.k ? item.k : item.planDepartureApt" :value="
|
|
|
- item.setlabel === 'positionDescribe'
|
|
|
- ? item.v
|
|
|
- : item.v != undefined
|
|
|
- ? item.v
|
|
|
- : item.planDepartureApt
|
|
|
- ">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </template>
|
|
|
- <template v-else-if="item.dataType == 'longtext'">
|
|
|
- <el-input size="small" :rows="1" type="textarea" @change="inputChangeHandler(item.columnName)" v-model="tableForm[item.columnName]"></el-input>
|
|
|
- </template>
|
|
|
- <template v-else-if="item.dataType == 'datetime'">
|
|
|
- <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="tableForm[item.columnName]" :rows="1" type="datetime" placeholder="选择日期时间" @change="inputChangeHandler(item.columnName)">
|
|
|
- </el-date-picker>
|
|
|
- </template>
|
|
|
- <template v-else-if="item.dataType == 'number'">
|
|
|
- <el-input size="small" v-model.number="tableForm[item.columnName]" onkeyup="value=value.replace(/[^1-9]/g,'')" @change="inputChangeHandler(item.columnName)"></el-input>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <el-input size="small" v-model="tableForm[item.columnName]" @change="inputChangeHandler(item.columnName)"></el-input>
|
|
|
- </template>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div class="foot right">
|
|
|
- <el-button size="medium" @click="handleOk" class="r24" type="primary">确定</el-button>
|
|
|
- <el-button @click="eledite" size="medium">取消</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Dialog>
|
|
|
- <Dialog :isBody="isBody" :flag="rmFlag">
|
|
|
- <div class="airportInfoDialog">
|
|
|
- <div class="title del-title">删除</div>
|
|
|
- <div class="content del-content">
|
|
|
- <span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ rmTitle }}</span>
|
|
|
- ？
|
|
|
- </div>
|
|
|
- <div class="foot right Delfoot">
|
|
|
- <el-button size="medium" class="r24" @click="tableRemove" type="danger">删除</el-button>
|
|
|
- <el-button size="medium" @click="rmFlag = false">取消</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Dialog>
|
|
|
- </div>
|
|
|
+ <div class="TablePage">
|
|
|
+ <PublicPageTable ref="table" :loading="loading" :selected="selected" :table-cols="tableCols" :table-btns="authBtns" :data="tableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :formatter="tableFormatter" :selectedDatas="selectedDatas" :selectedCheck="selectedDataCheck" :show-summary="summaryFlag" @mounted="tableMountedHandler" @load="load" @cell-click="cellClickHandler" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { setTableFilters } from "@/utils/table";
|
|
|
-import Dialog from "@/layout/components/Dialog/index.vue";
|
|
|
-import NoData from "@/components/nodata";
|
|
|
-import { translateDataToTreeAllTreeMsg } from "@/utils/validate";
|
|
|
-import { Query, newData, modifyData, moveData } from "@/api/webApi";
|
|
|
+import PublicPageTable from '@/components/SimpleTable'
|
|
|
+import { Query } from "@/api/webApi"
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
export default {
|
|
|
- name: "DataTable",
|
|
|
+ name: 'TablePage',
|
|
|
+ components: { PublicPageTable },
|
|
|
props: {
|
|
|
- dataContent: {
|
|
|
- type: Object,
|
|
|
- default: () => ({}),
|
|
|
- },
|
|
|
- //弹框宽度
|
|
|
- width: {
|
|
|
- type: String,
|
|
|
- default: "560px",
|
|
|
- },
|
|
|
- //弹框表单-行数
|
|
|
- rows: {
|
|
|
- type: Number,
|
|
|
- default: 3,
|
|
|
- },
|
|
|
- //弹框-表单文字宽度
|
|
|
- labelWidth: {
|
|
|
- type: String,
|
|
|
- default: "80px",
|
|
|
- },
|
|
|
- //表格高度
|
|
|
- tableHeight: {
|
|
|
- type: [String, Number],
|
|
|
- default: 0,
|
|
|
- },
|
|
|
- minHeight: {
|
|
|
- type: Number,
|
|
|
- default: 65,
|
|
|
- },
|
|
|
- // 是否显示合计行
|
|
|
- showSummary: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- marginTop: {
|
|
|
- type: String,
|
|
|
- default: "0px",
|
|
|
- },
|
|
|
- // 不换行，溢出隐藏
|
|
|
- showOverflowTooltip: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- //操作列宽度
|
|
|
- fixedWidth: {
|
|
|
- type: String,
|
|
|
- default: "180px",
|
|
|
- },
|
|
|
+ msgContent: {
|
|
|
+ type: Array,
|
|
|
+ default: () => new Array()
|
|
|
+ }
|
|
|
},
|
|
|
- components: { Dialog, NoData },
|
|
|
data () {
|
|
|
return {
|
|
|
- pageTitle: '',
|
|
|
- asShow: true,
|
|
|
- loading: false,
|
|
|
- flag: false,
|
|
|
- serviceId: null,
|
|
|
- rmFlag: false,
|
|
|
- rowTitle: "",
|
|
|
- page: 0,
|
|
|
- pageSize: 10,
|
|
|
- noMore: false,
|
|
|
+ page: 0, //当前table页面
|
|
|
+ noMore: false, //当前table是否加载到最后开关
|
|
|
+ loading: false, //页面加载
|
|
|
+ dialogLoading: false, //新增/编辑确认按钮禁用
|
|
|
+ advancedDrawer: false, //高级查询弹框开关
|
|
|
+ defaultfilter: { 1: 1 }, //默认查询参数
|
|
|
+ pageQuery: {},
|
|
|
+ dialogFlag: false,
|
|
|
+ dialogName: '', //弹框名称
|
|
|
+ pageTitle: '', //页面名称
|
|
|
+ treeData: [], //tree数据
|
|
|
+ treeParameters: {}, //tree传递参数
|
|
|
+ treeNodeMap: {}, //tree传递map
|
|
|
tableCols: [], //表头数据
|
|
|
tableData: [], //表格数据
|
|
|
- tableColsCopy: [], //表头数据缓存
|
|
|
- tableDataFilters: {}, //表头-下拉数据
|
|
|
- filterValues: {}, //表头-下拉-选中数据
|
|
|
- tableDataCopy: [], //缓存table数据
|
|
|
- tableGroups: [], //表格分组数据
|
|
|
- colShowFilter: "", //表头-下拉-箭头
|
|
|
- spanArr: [], //表格分组数据缓存
|
|
|
- pos: 0, //表格分组计数
|
|
|
- tableTitle: "新增", //弹框标题
|
|
|
- tableType: "add", //弹框类型=新增/编辑
|
|
|
- tableForm: {}, //弹框表单
|
|
|
- rmTitle: "", //弹框-删除-标题
|
|
|
- tableObj: {}, //增/删/改数据缓存
|
|
|
- tableOptions: {}, //弹框-下来数据缓存
|
|
|
- tableArrs: [], //重组table-表头下拉
|
|
|
- proAll: false, //重组时-所有请求是否都完成
|
|
|
- roles: JSON.parse(sessionStorage.getItem("userAuthList")) ?? [],
|
|
|
- tableOptionscp: {},
|
|
|
- tabledatacopy: {},
|
|
|
- queryId: '',
|
|
|
- };
|
|
|
+ tableBtns: [], //表格按钮权限
|
|
|
+ authBtns: [], //表格里面的操作按钮
|
|
|
+ tableBtnForms: [], //表格按钮下的form表单权限
|
|
|
+ dataContent: {}, //表格查询数据
|
|
|
+ pageServiceId: null, //表格serviceid
|
|
|
+ formItem: [], //弹框表单渲染数据
|
|
|
+ flag: false, //弹框表单开关
|
|
|
+ formAuth: true, //弹框表单按钮开关
|
|
|
+ tableType: "add", //弹框表单弹框类型
|
|
|
+ tableTitle: "新增", //弹框表单标题
|
|
|
+ tableForm: {}, //弹框表单数据
|
|
|
+ rmFlag: false, //删除弹框开关
|
|
|
+ rmTitle: '', //删除弹框标题
|
|
|
+ tableObj: {}, //删除数据
|
|
|
+ tableOptions: {}, //表单数据下拉
|
|
|
+ labelWidth: '120px', //表单文字距离
|
|
|
+ fromDataReqCatch: [], //表单规则缓存
|
|
|
+ tableKey: null,//表格主键
|
|
|
+ depMath: 0,
|
|
|
+ selected: 0, //是否勾选
|
|
|
+ selectedDatas: [], //回显勾选的数据
|
|
|
+ selectedDatasCath: [],//回显数据缓存
|
|
|
+ selectedDataAlls: [], //勾选数据
|
|
|
+ selectedDataCheck: {}, //勾选树-选中
|
|
|
+ triggerserviceid: null, //勾选后查询的serviceid
|
|
|
+ summaryFlag: false, //是否显示合计行
|
|
|
+ simpleQueryFlag: false, //是否开启了简易查询
|
|
|
+ simpleQueryItem: [], //简易查询表单数据项
|
|
|
+ simpleQueryValue: [], //简易查询缓存值
|
|
|
+ advancedQueryValue: [], //高级查询缓存值
|
|
|
+ }
|
|
|
},
|
|
|
- computed: {
|
|
|
- dataTableContentStyle () {
|
|
|
- const style = {};
|
|
|
- if (this.minHeight) {
|
|
|
- style["min-height"] = this.minHeight;
|
|
|
- }
|
|
|
- if (this.tableHeight) {
|
|
|
- style["height"] = this.tableHeight;
|
|
|
- }
|
|
|
- return style;
|
|
|
- },
|
|
|
- //设置表头-下拉-箭头样式
|
|
|
- arrowClass () {
|
|
|
- return function (prop) {
|
|
|
- let classString = "";
|
|
|
- if (this.colShowFilter === prop) {
|
|
|
- return "arrow-active";
|
|
|
+ watch: {
|
|
|
+ msgContent: {
|
|
|
+ handler (val) {
|
|
|
+ if (val?.length) {
|
|
|
+ this.getPageTableSetting(val)
|
|
|
}
|
|
|
- if (
|
|
|
- Object.entries(this.tableDataFilters).find(
|
|
|
- ([key, arr]) => this.filterValues[prop]
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //页面初始化
|
|
|
+ pageInit () {
|
|
|
+ if (this.msgContent?.length) this.getPageTableSetting(this.msgContent)
|
|
|
+ },
|
|
|
+ //根据页面table设置数据
|
|
|
+ getPageTableSetting (pageAuthtables) {
|
|
|
+ const pageAuths = this.$store.state.auth.authArrs ?? []
|
|
|
+ const authTableObj = pageAuthtables[0]
|
|
|
+ //获取当前页面table的配置
|
|
|
+ const { pagename, pageconfigurationid, serviceid, pagecode, userpermissionsid, nfilter, selected, triggerserviceid } = authTableObj
|
|
|
+ this.pageServiceId = serviceid;
|
|
|
+ this.pageTitle = pagename
|
|
|
+ this.selected = selected
|
|
|
+ this.triggerserviceid = triggerserviceid
|
|
|
+ this.defaultfilter = nfilter
|
|
|
+ const tableColumnArrs = pageAuths.filter(item => item['superiorid'] == pageconfigurationid && item['pagetype'] == 'column')
|
|
|
+ this.getColumnData(tableColumnArrs)
|
|
|
+ },
|
|
|
+ //获取表头数据
|
|
|
+ getColumnData (columnArrs = []) {
|
|
|
+ const returnData = [...columnArrs]
|
|
|
+ this.$store.dispatch('auth/changeAuthMsg', returnData)
|
|
|
+ const tableColsCopy = _.cloneDeep(returnData).filter((item) => item.isdisplay != 0)
|
|
|
+ const tableColsCopyOrder = _.orderBy(tableColsCopy, ['displaynumber'], ['asc'])
|
|
|
+ const msgCounts = tableColsCopyOrder.filter(item => item.enablecount)
|
|
|
+ if (msgCounts.length) {
|
|
|
+ this.summaryFlag = true
|
|
|
+ }
|
|
|
+ const columncode = returnData.find(
|
|
|
+ (item) => item.isprimarykey == 1
|
|
|
+ )
|
|
|
+ if (columncode && Object.keys(columncode).length) {
|
|
|
+ this.tableKey = columncode['pagecode']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //格式化传递参数数据
|
|
|
+ formatDefault (item, data = {}) {
|
|
|
+ if (typeof item != 'string') return {}
|
|
|
+ const filterItem = {}
|
|
|
+ const parameters = item.replace('{', '').replace('}', '')
|
|
|
+ const parametersSplit = parameters?.split(',')
|
|
|
+ parametersSplit.map(item => {
|
|
|
+ const [key, val] = item?.split(':')
|
|
|
+ filterItem[key] = data[val]
|
|
|
+ })
|
|
|
+ return filterItem
|
|
|
+ },
|
|
|
+ formatData (returnData) {
|
|
|
+ return typeof returnData == 'string' ? this.retParse(returnData) : returnData
|
|
|
+ },
|
|
|
+ retParse (returnData) {
|
|
|
+ try {
|
|
|
+ return JSON.parse(returnData) ? JSON.parse(returnData) : returnData
|
|
|
+ } catch (error) {
|
|
|
+ return returnData
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //回显下拉数据
|
|
|
+ resPassters (obj) {
|
|
|
+ const narr = []
|
|
|
+ const nitem = _.cloneDeep(obj)
|
|
|
+ const { passparameters } = nitem
|
|
|
+ if (!passparameters) return ''
|
|
|
+ const ndata = this.formatData(passparameters)
|
|
|
+ if (!Array.isArray(ndata)) return ''
|
|
|
+ ndata.map(({ pageconfigurationid }) => { narr.push(pageconfigurationid) })
|
|
|
+ return narr
|
|
|
+ },
|
|
|
+ findRepetData (nitems1, nitems2) {
|
|
|
+ const key = 'serviceid'
|
|
|
+ const res = [...nitems1, ...nitems2].filter(
|
|
|
+ (item) =>
|
|
|
+ !(
|
|
|
+ nitems1.some((p) => item[key] == p[key]) &&
|
|
|
+ nitems2.some((c) => item[key] == c[key])
|
|
|
)
|
|
|
- ) {
|
|
|
- classString += "arrow-blue";
|
|
|
+ )
|
|
|
+ return res
|
|
|
+ },
|
|
|
+ // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
|
|
|
+ headerCellClass () {
|
|
|
+ return function ({ row, column, rowIndex, columnIndex }) {
|
|
|
+ const classes = []
|
|
|
+ const rule = this.tableDataSortRules[column.property]
|
|
|
+ if (rule) {
|
|
|
+ classes.push(rule)
|
|
|
}
|
|
|
- return classString;
|
|
|
- };
|
|
|
- },
|
|
|
- //设置表头-下拉-选中数据
|
|
|
- filteredTableData () {
|
|
|
- if (this.isTree) {
|
|
|
- this.tableData = translateDataToTreeAllTreeMsg(
|
|
|
- this.tableData,
|
|
|
- "parentID",
|
|
|
- "companyID"
|
|
|
- );
|
|
|
+ return classes.join(' ')
|
|
|
}
|
|
|
- return this.tableData.filter((item) => {
|
|
|
- let flag = true;
|
|
|
- Object.entries(this.filterValues).forEach(([key, value]) => {
|
|
|
- if (value !== "" && item[key] !== value) {
|
|
|
- flag = false;
|
|
|
- }
|
|
|
- });
|
|
|
- return flag;
|
|
|
- });
|
|
|
},
|
|
|
- fromDataType () {
|
|
|
- return function (type) {
|
|
|
- if (type) {
|
|
|
- return type.replace(/\([^\)]*\)/g, "");
|
|
|
+ //添加-表格-行样式
|
|
|
+ rowClass () {
|
|
|
+ return function ({ row, rowIndex }) {
|
|
|
+ const classes = []
|
|
|
+ if (row.deleted === 'DEL') {
|
|
|
+ classes.push('bgl-deleted')
|
|
|
+ }
|
|
|
+ return classes.join(' ')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //添加-表格-单元格样式
|
|
|
+ cellClass () {
|
|
|
+ return function ({ row, column, rowIndex, columnIndex }) {
|
|
|
+ const classes = []
|
|
|
+ const { property } = column
|
|
|
+ const ndata = _.cloneDeep(this.tableCols).filter(item => item.pagecode == property)
|
|
|
+ if (ndata?.length) {
|
|
|
+ const { pageroute } = ndata[0]
|
|
|
+ if (pageroute) classes.push('cell-click')
|
|
|
+ }
|
|
|
+ return classes.join(' ')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatPass (pass = []) {
|
|
|
+ if (typeof pass != 'string') return {}
|
|
|
+ const ndata = JSON.parse(pass)
|
|
|
+ if (!ndata) return {}
|
|
|
+ const nitem = {}
|
|
|
+ ndata.map(item => {
|
|
|
+ const ns = Object.values(item)
|
|
|
+ nitem[ns[0]] = ns[1]
|
|
|
+ })
|
|
|
+ return nitem
|
|
|
+ },
|
|
|
+ //添加-表格-单元格-点击事件
|
|
|
+ cellClickHandler (row, column, cell, event) {
|
|
|
+ const { property } = column
|
|
|
+ const ndata = _.cloneDeep(this.tableCols).filter(item => item.pagecode == property)
|
|
|
+ const params = {}
|
|
|
+ if (ndata?.length) {
|
|
|
+ const { defaultfilter, pageroute, passparameters } = ndata[0]
|
|
|
+ if (!pageroute) return
|
|
|
+ if (defaultfilter || passparameters) {
|
|
|
+ if (passparameters) {
|
|
|
+ // const nitem = this.formatPass(passparameters)
|
|
|
+ const passparametersArray = JSON.parse(passparameters)
|
|
|
+ passparametersArray.map(item => {
|
|
|
+ if (row[item.pagecode]) {
|
|
|
+ const alias = item.alias
|
|
|
+ const pagecode = item.pagecode
|
|
|
+ if (alias) {
|
|
|
+ params[alias] = row[item['pagecode']]
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ params[pagecode] = row[item['pagecode']]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$router.push({
|
|
|
+ path: pageroute,
|
|
|
+ query: params
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (defaultfilter) {
|
|
|
+ const filterItem = this.formatDefault(defaultfilter, row)
|
|
|
+ this.$router.push({
|
|
|
+ path: pageroute,
|
|
|
+ query: filterItem
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.$router.push(pageroute)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- },
|
|
|
- mounted () {
|
|
|
- console.log(this.$route)
|
|
|
- // this.getQuery();
|
|
|
- },
|
|
|
- updated () {
|
|
|
- this.$refs["table"]?.doLayout();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- eledite () {
|
|
|
- this.flag = false;
|
|
|
- const arrbegin = _.cloneDeep(this.tableOptionscp);
|
|
|
- this.tableOptions = arrbegin;
|
|
|
- },
|
|
|
- load () {
|
|
|
- //
|
|
|
- if (!this.isTree) {
|
|
|
- if (this.noMore || this.loading) {
|
|
|
- return;
|
|
|
+ tableFormatter () {
|
|
|
+ return function (row, column, cellValue) {
|
|
|
+ switch (column.property) {
|
|
|
+ case 'departureTime':
|
|
|
+ return (cellValue ?? '').replace('T', ' ')
|
|
|
+ case 'deleted':
|
|
|
+ return cellValue === 'DEL' ? cellValue : ''
|
|
|
+ case 'activated':
|
|
|
+ return Number(cellValue) === 1 ? '激活' : '未激活'
|
|
|
+ default:
|
|
|
+ return cellValue ?? ''
|
|
|
}
|
|
|
- this.getQuery(this.queryId);
|
|
|
}
|
|
|
},
|
|
|
+ tableMountedHandler (refName, ref) {
|
|
|
+ this.$refs[refName] = ref
|
|
|
+ },
|
|
|
resetTable () {
|
|
|
+ this.dataContent = {}
|
|
|
this.page = 0;
|
|
|
this.noMore = false;
|
|
|
this.tableData = [];
|
|
|
},
|
|
|
- changeSelect (data, name) {
|
|
|
- if (this.tableForm[data] === "") {
|
|
|
- this.tableForm[data] = null;
|
|
|
- }
|
|
|
- this.tableForm[this.tableOptions[data][0].setvalue] =
|
|
|
- this.tableForm[data];
|
|
|
- const arrbegin = _.cloneDeep(this.tabledatacopy);
|
|
|
- if (this.tableForm.beginNode) {
|
|
|
- this.tableOptions.beginPosition = arrbegin.beginPosition.filter(
|
|
|
- (i) => i.nodeCode === this.tableForm.beginNode
|
|
|
- );
|
|
|
- arrbegin.beginPosition.forEach((element) => {
|
|
|
- if (element.v === this.tableForm.beginPosition) {
|
|
|
- if (element.nodeCode !== this.tableForm.beginNode) {
|
|
|
- this.tableForm.beginPosition = "";
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- // let arr = [];
|
|
|
- // this.tableOptions.beginPosition.forEach((element) => {
|
|
|
- // arr.push(element.nodeCode);
|
|
|
- // });
|
|
|
- // if (
|
|
|
- // !arr.includes(this.tableForm.beginPosition) &&
|
|
|
- // this.tableForm.beginNode
|
|
|
- // ) {
|
|
|
- // this.tableForm.beginPosition = null;
|
|
|
- // }
|
|
|
- this.asShow = false;
|
|
|
- this.asShow = true;
|
|
|
- }
|
|
|
- if (this.tableForm.beginPosition && !this.tableForm.beginNode) {
|
|
|
- arrbegin.beginPosition.forEach((element) => {
|
|
|
- if (this.tableForm.beginPosition === element.v) {
|
|
|
- this.tableForm.beginNode = element.nodeCode;
|
|
|
- }
|
|
|
- });
|
|
|
+ load () {
|
|
|
+ if (this.noMore || this.loading) {
|
|
|
+ return
|
|
|
}
|
|
|
- if (this.tableForm.endNode) {
|
|
|
- this.tableOptions.endPosition = arrbegin.endPosition.filter(
|
|
|
- (i) => i.nodeCode === this.tableForm.endNode
|
|
|
- );
|
|
|
- arrbegin.endPosition.forEach((element) => {
|
|
|
- if (element.v === this.tableForm.endPosition) {
|
|
|
- if (element.nodeCode !== this.tableForm.endNode) {
|
|
|
- this.tableForm.endPosition = "";
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- this.asShow = false;
|
|
|
- this.asShow = true;
|
|
|
+ this.queryTableData()
|
|
|
+ },
|
|
|
+ async queryTableData (jumpSing = false) {
|
|
|
+ if (jumpSing) {
|
|
|
+ const initialize = _.once(this.resetTable)
|
|
|
+ initialize()
|
|
|
}
|
|
|
- if (this.tableForm.endPosition && !this.tableForm.endNode) {
|
|
|
- arrbegin.endPosition.forEach((element) => {
|
|
|
- if (this.tableForm.endPosition === element.v) {
|
|
|
- this.tableForm.endNode = element.nodeCode;
|
|
|
- }
|
|
|
- });
|
|
|
+ this.loading = true;
|
|
|
+ const datacontent = { filter: this.defaultfilter }
|
|
|
+ const parmas = {
|
|
|
+ page: ++this.page,
|
|
|
+ serviceid: this.pageServiceId,
|
|
|
+ datacontent,
|
|
|
+ event: '0'
|
|
|
}
|
|
|
- },
|
|
|
- inputChangeHandler (data) {
|
|
|
- if (this.tableForm[data] === "") {
|
|
|
- this.tableForm[data] = null;
|
|
|
+ if (this.selected) {
|
|
|
+ parmas.size = 9999
|
|
|
}
|
|
|
- },
|
|
|
- //获取表格数据
|
|
|
- async getQuery (id) {
|
|
|
try {
|
|
|
- this.loading = true;
|
|
|
- const { code, returnData, columnset } = await Query({
|
|
|
- serviceId: id,
|
|
|
- page: ++this.page,
|
|
|
- pageSize: this.pageSize,
|
|
|
- dataContent: this.dataContent,
|
|
|
- });
|
|
|
+ const { code, returnData } = await Query(parmas);
|
|
|
if (code == 0) {
|
|
|
if (returnData.length === 0) {
|
|
|
- this.page--;
|
|
|
- this.noMore = true;
|
|
|
- this.loading = false;
|
|
|
- }
|
|
|
- const titleColumn = columnset.find(
|
|
|
- (item) => item.needShow === 1
|
|
|
- );
|
|
|
- if (titleColumn) {
|
|
|
- this.rowTitle = titleColumn.columnName;
|
|
|
+ this.page--
|
|
|
+ this.noMore = true
|
|
|
}
|
|
|
- this.tableData.push(...returnData);
|
|
|
- this.tableCols = columnset;
|
|
|
- this.serviceId = id;
|
|
|
- setTimeout(() => {
|
|
|
- this.initTableData();
|
|
|
- this.loading = false;
|
|
|
- }, 100);
|
|
|
- } else {
|
|
|
- this.page--;
|
|
|
- this.loading = false;
|
|
|
- this.$message.error("获取表格数据失败");
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- this.page--;
|
|
|
- this.loading = false;
|
|
|
- }
|
|
|
- },
|
|
|
- //表格-增/删/改
|
|
|
- async generalDataReception (event, data) {
|
|
|
- try {
|
|
|
- const params = {
|
|
|
- serviceId: serviceId.value,
|
|
|
- dataContent: data,
|
|
|
- event: `${event}`,
|
|
|
- };
|
|
|
- const { code } =
|
|
|
- event == 1
|
|
|
- ? await newData(params)
|
|
|
- : event == 2
|
|
|
- ? await modifyData(params)
|
|
|
- : await moveData(params);
|
|
|
- if (code == 0) {
|
|
|
- this.$message.success("操作成功");
|
|
|
- this.resetTable();
|
|
|
- this.getQuery(this.queryId);
|
|
|
- this.flag = false;
|
|
|
- this.rmFlag = false;
|
|
|
- this.tableObj = {};
|
|
|
- this.tableForm = {};
|
|
|
- // this.$router.go(0);
|
|
|
+ this.tableData.push(...returnData)
|
|
|
} else {
|
|
|
- this.$message.error("操作失败");
|
|
|
- this.flag = false;
|
|
|
- this.rmFlag = false;
|
|
|
- this.tableObj = {};
|
|
|
- this.tableForm = {};
|
|
|
+ this.page--
|
|
|
+ this.noMore = true
|
|
|
+ this.$message.error("获取表格数据失败")
|
|
|
}
|
|
|
} catch (error) {
|
|
|
- this.flag = false;
|
|
|
- this.rmFlag = false;
|
|
|
- this.tableObj = {};
|
|
|
- this.tableForm = {};
|
|
|
- }
|
|
|
- },
|
|
|
- // 表格勾选
|
|
|
- toggleRowSelection (row, isSelected) {
|
|
|
- this.$refs["table"].toggleRowSelection(row, isSelected);
|
|
|
- },
|
|
|
- // 表格初始勾选
|
|
|
- selectTableRows (tableData, selectFlagName) {
|
|
|
- tableData.forEach((row) => {
|
|
|
- this.$refs["table"].toggleRowSelection(row, !!row[selectFlagName]);
|
|
|
- });
|
|
|
- this.$emit("selectionAll", this.$refs.table.selection);
|
|
|
- },
|
|
|
- //初始化表格
|
|
|
- initTableData () {
|
|
|
- this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
|
|
|
- this.tableDataCopy = _.cloneDeep(this.tableData);
|
|
|
- const datas = _.cloneDeep(this.tableColsCopy);
|
|
|
- // const reqUts = [];
|
|
|
- datas.forEach(async (item) => {
|
|
|
- this.tableDataFilters[item.columnName] = [];
|
|
|
- if (item.needGroup) {
|
|
|
- this.tableGroups.push(item.columnName);
|
|
|
- }
|
|
|
- if (item.listqueryTemplateID || item.listqueryTemplateID == 0) {
|
|
|
- this.tableArrs.push(item.columnName);
|
|
|
- // const reqUt = this.getSelectData(item.listqueryTemplateID)
|
|
|
- // reqUts.push(reqUt)
|
|
|
- if (!this.tableOptions[item.columnName]) {
|
|
|
- //开始位置beginPosition 结束位置endPosition (区分开始结束位置必须传null)
|
|
|
- if (
|
|
|
- item.columnName !== "beginPosition" &&
|
|
|
- item.columnName !== "endPosition"
|
|
|
- ) {
|
|
|
- this.tableOptions[item.columnName] = await this.getSelectData(
|
|
|
- item.listqueryTemplateID
|
|
|
- );
|
|
|
- } else {
|
|
|
- this.tableOptions[item.columnName] = await this.getSelectData(
|
|
|
- item.listqueryTemplateID,
|
|
|
- null
|
|
|
- );
|
|
|
- this.tabledatacopy[item.columnName] = _.cloneDeep(
|
|
|
- this.tableOptions[item.columnName]
|
|
|
- );
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (
|
|
|
- item.columnName === "beginPosition" ||
|
|
|
- item.columnName === "endPosition"
|
|
|
- ) {
|
|
|
- this.tableOptions[item.columnName] = await this.getSelectData(
|
|
|
- item.listqueryTemplateID,
|
|
|
- null
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- //
|
|
|
- }
|
|
|
- // this.filterValues[item.columnName] = ''
|
|
|
- });
|
|
|
- setTableFilters(this.tableData, this.tableDataFilters);
|
|
|
- this.tableGroup(this.tableData);
|
|
|
- this.selectTableRows(this.tableData, "DeployID");
|
|
|
- this.tableOptionscp = _.cloneDeep(this.tableOptions);
|
|
|
- const arrbegin = _.cloneDeep(this.tableOptions);
|
|
|
- if (arrbegin) {
|
|
|
- setTimeout(() => {
|
|
|
- this.tableData.forEach((element) => {
|
|
|
- if (this.tableOptions.beginNode) {
|
|
|
- arrbegin.beginNode.forEach((res) => {
|
|
|
- if (res.v === element.beginNode) {
|
|
|
- element.beginNode = res.k;
|
|
|
- }
|
|
|
- });
|
|
|
- arrbegin.endNode.forEach((res) => {
|
|
|
- if (res.v == element.endNode) {
|
|
|
- element.endNode = res.k;
|
|
|
- }
|
|
|
- });
|
|
|
- arrbegin.calculationBasis.forEach((res) => {
|
|
|
- if (res.v == element.calculationBasis) {
|
|
|
- element.calculationBasis = res.k;
|
|
|
- }
|
|
|
- });
|
|
|
- //位置
|
|
|
- this.tabledatacopy.beginPosition.forEach((res) => {
|
|
|
- if (res.v == element.beginPosition) {
|
|
|
- element.beginPosition = res.k;
|
|
|
- }
|
|
|
- });
|
|
|
- this.tabledatacopy.endPosition.forEach((res) => {
|
|
|
- if (res.v == element.endPosition) {
|
|
|
- element.endPosition = res.k;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- }, 100);
|
|
|
- }
|
|
|
- // this.getSelectDataAll(reqUts)
|
|
|
- },
|
|
|
- //获取所有获取弹框-下拉数据-请求状态
|
|
|
- getSelectDataAll (reqUts) {
|
|
|
- Promise.all(reqUts)
|
|
|
- .then((res) => {
|
|
|
- this.proAll = true;
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- this.proAll = false;
|
|
|
- });
|
|
|
- },
|
|
|
- //获取弹框-下拉数据
|
|
|
- async getSelectData (id, name) {
|
|
|
- // name ? [name] : name === null ? [null]: [],
|
|
|
- const { code, returnData } = await Query({
|
|
|
- id,
|
|
|
- dataContent: name ? [name] : name === null ? [null] : [],
|
|
|
- });
|
|
|
- if (code == 0) {
|
|
|
- return returnData.listValues;
|
|
|
- } else {
|
|
|
- return [];
|
|
|
- }
|
|
|
- },
|
|
|
- //重组table-显示名称
|
|
|
- setTable () {
|
|
|
- this.tableArrs.forEach((item) => {
|
|
|
- this.tableOptions[item].forEach((p) => {
|
|
|
- this.tableDataCopy.forEach((msg) => {
|
|
|
- if (msg[item] == p.v) {
|
|
|
- msg[item] = p.k;
|
|
|
- }
|
|
|
- });
|
|
|
- this.tableDataFilters[item].forEach((cap) => {
|
|
|
- if (cap.value == p.v) {
|
|
|
- cap.text = p.k;
|
|
|
- cap.value = p.k;
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
- this.tableData = this.tableDataCopy;
|
|
|
- },
|
|
|
- //分组
|
|
|
- tableGroup (tableData) {
|
|
|
- const spanArr = [];
|
|
|
- let pos = 0;
|
|
|
- let ifYj = this.tableGroups[0];
|
|
|
- for (let i = 0; i < tableData.length; i++) {
|
|
|
- if (i === 0) {
|
|
|
- spanArr.push(1);
|
|
|
- } else {
|
|
|
- if (tableData[i][ifYj] === tableData[i - 1][ifYj]) {
|
|
|
- spanArr[pos] += 1;
|
|
|
- spanArr.push(0);
|
|
|
- } else {
|
|
|
- spanArr.push(1);
|
|
|
- pos = i;
|
|
|
- }
|
|
|
- }
|
|
|
+ this.page--
|
|
|
+ this.noMore = true
|
|
|
}
|
|
|
- this.spanArr = spanArr;
|
|
|
- this.pos = pos;
|
|
|
- },
|
|
|
- popoverShowHandler (prop) {
|
|
|
- this.colShowFilter = prop;
|
|
|
- },
|
|
|
- popoverHideHandler () {
|
|
|
- this.colShowFilter = "";
|
|
|
- },
|
|
|
- //分组
|
|
|
- tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
|
|
|
- if (this.tableGroups.includes(column["property"])) {
|
|
|
- const _row = this.spanArr[rowIndex];
|
|
|
- const _col = _row > 0 ? 1 : 0;
|
|
|
- return {
|
|
|
- rowspan: _row,
|
|
|
- colspan: _col,
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
- //合计
|
|
|
- getSummaries (param) {
|
|
|
- const { columns, data } = param;
|
|
|
- const sums = [];
|
|
|
- columns.forEach((column, index) => {
|
|
|
- this.tableColsCopy.forEach((p) => {
|
|
|
- if (column.property == p.columnName && p.needCount) {
|
|
|
- const values = data.map((item) => Number(item[column.property]));
|
|
|
- if (!values.every((value) => isNaN(value))) {
|
|
|
- sums[index] = values.reduce((prev, curr) => {
|
|
|
- const value = Number(curr);
|
|
|
- if (!isNaN(value)) {
|
|
|
- return prev + curr;
|
|
|
- } else {
|
|
|
- return prev;
|
|
|
- }
|
|
|
- }, 0);
|
|
|
- sums[index] += "";
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- return sums;
|
|
|
- },
|
|
|
- //弹框-确定
|
|
|
- handleOk () {
|
|
|
- this.submitClickHandler();
|
|
|
- },
|
|
|
- //滚动
|
|
|
- tableLoad () { },
|
|
|
- //表格-新增
|
|
|
- handleAdd () {
|
|
|
- this.flag = true;
|
|
|
- this.tableType = "add";
|
|
|
- this.tableTitle = "新增";
|
|
|
- this.tableForm = {};
|
|
|
- },
|
|
|
- //表格-编辑
|
|
|
- async handleEdit (row) {
|
|
|
- this.flag = true;
|
|
|
- this.tableType = "edit";
|
|
|
- this.tableTitle = "编辑";
|
|
|
- this.tableForm = JSON.parse(JSON.stringify(row));
|
|
|
- },
|
|
|
-
|
|
|
- // 新增/编辑-确认
|
|
|
- submitClickHandler () {
|
|
|
- this.$refs["ruleForm"].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- if (this.tableType == "add") {
|
|
|
- this.tableForm.event = 1;
|
|
|
- } else {
|
|
|
- this.tableForm.event = 2;
|
|
|
- }
|
|
|
- this.generalDataReception(this.tableForm.event, this.tableForm);
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //表格-删除
|
|
|
- handleRemove (row) {
|
|
|
- this.rmFlag = true;
|
|
|
- // this.rmTitle = row.className || row.username || row.serviceName || row.queryTemplateName;
|
|
|
- this.rmTitle = row[this.rowTitle];
|
|
|
- this.tableObj = row;
|
|
|
- },
|
|
|
- //表格-删除-确认
|
|
|
- tableRemove () {
|
|
|
- this.tableObj.event = 3;
|
|
|
- this.generalDataReception(this.tableForm.event, this.tableObj);
|
|
|
- },
|
|
|
-
|
|
|
- // 表格-选中行
|
|
|
- selectHandler (selection, row) {
|
|
|
- this.$emit("selection-change", selection, row);
|
|
|
- },
|
|
|
- // 表格-查询模板预览
|
|
|
- handlePreview (row) {
|
|
|
- this.$emit("preview", row);
|
|
|
- },
|
|
|
- formatter(row, column, cellValue, index) {
|
|
|
- const sameColumn = this.tableCols.find(col => col.columnName === column.property)
|
|
|
- if (sameColumn && this.fromDataType(sameColumn.dataType) === 'datetime') {
|
|
|
- return (cellValue ?? '').replace('T', ' ')
|
|
|
+ if (this.selected) {
|
|
|
+ this.noMore = true
|
|
|
}
|
|
|
- return cellValue
|
|
|
+ this.loading = false
|
|
|
}
|
|
|
- },
|
|
|
-};
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.data-table {
|
|
|
+.TablePage {
|
|
|
width: 100%;
|
|
|
- // background-color: #fff;
|
|
|
- // padding: 20px;
|
|
|
- .data-table-content {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- ::v-deep .table {
|
|
|
- width: 100%;
|
|
|
- .cell {
|
|
|
- padding: 0;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Helvetica, "Microsoft YaHei";
|
|
|
- letter-spacing: 0;
|
|
|
- }
|
|
|
- .cell-click {
|
|
|
- cursor: pointer;
|
|
|
- color: #2d7cff;
|
|
|
- &.cell-clicked {
|
|
|
- color: purple;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-table__header-wrapper {
|
|
|
- .cell {
|
|
|
- font-weight: bold;
|
|
|
- color: #101116;
|
|
|
- > .el-checkbox {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- .has-gutter {
|
|
|
- tr {
|
|
|
- .bgl-huang {
|
|
|
- background: #fcf0b1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-table__body-wrapper {
|
|
|
- tr.bgl-hui {
|
|
|
- background: #d2d6df;
|
|
|
- td {
|
|
|
- background: #d2d6df;
|
|
|
- }
|
|
|
- &.redBorder {
|
|
|
- position: relative;
|
|
|
- &::after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- height: 2px;
|
|
|
- background: #e83f82;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rmScs {
|
|
|
- width: 48px;
|
|
|
- height: 24px;
|
|
|
- border-color: #9ebbf7;
|
|
|
- box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
|
|
|
- border-radius: 4px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- float: left;
|
|
|
- span {
|
|
|
- color: #2d67e3;
|
|
|
- }
|
|
|
- }
|
|
|
- .rmScser {
|
|
|
- width: 60px;
|
|
|
- height: 24px;
|
|
|
- border-color: #9ebbf7;
|
|
|
- box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
|
|
|
- border-radius: 4px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- float: left;
|
|
|
- span {
|
|
|
- color: #2d67e3;
|
|
|
- }
|
|
|
- }
|
|
|
- .rmSc {
|
|
|
- width: 48px;
|
|
|
- height: 24px;
|
|
|
- background: #eb2f3b;
|
|
|
- box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
|
|
|
- border-radius: 4px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- span {
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .hrefBtn {
|
|
|
- width: 48px;
|
|
|
- height: 24px;
|
|
|
- background: #6f81bc;
|
|
|
- box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
|
|
|
- border-radius: 4px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- span {
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- .tableStatus {
|
|
|
- font-size: 14px;
|
|
|
- .icon {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- background: #2d67e3;
|
|
|
- border-radius: 2px;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- position: relative;
|
|
|
- top: -2px;
|
|
|
- }
|
|
|
- .status0 {
|
|
|
- position: relative;
|
|
|
- top: 5px;
|
|
|
- }
|
|
|
- .status1 {
|
|
|
- position: relative;
|
|
|
- top: 5px;
|
|
|
- .icon {
|
|
|
- background-color: #afb4bf;
|
|
|
- }
|
|
|
- }
|
|
|
- .status2 {
|
|
|
- position: relative;
|
|
|
- top: 5px;
|
|
|
- .icon {
|
|
|
- background-color: #eb2f3b;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-table__fixed-right {
|
|
|
- thead {
|
|
|
- div {
|
|
|
- color: #101116;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .hd-td {
|
|
|
- .hd-tr {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: row;
|
|
|
- padding: 0 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .data-table-btn {
|
|
|
- margin-top: 13px;
|
|
|
- line-height: 32px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-}
|
|
|
-.filter-arrow {
|
|
|
- cursor: pointer;
|
|
|
- transition: 0.3s transform;
|
|
|
- &.arrow-active {
|
|
|
- transform: rotate(-180deg);
|
|
|
- }
|
|
|
- &.arrow-blue {
|
|
|
- color: #2d7cff;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-}
|
|
|
-.el-select-dropdown__item.hover {
|
|
|
- background: #d2d6df;
|
|
|
-}
|
|
|
-.data-table-dialog {
|
|
|
- ::v-deep .dialog-content {
|
|
|
- .el-form-item__content {
|
|
|
- line-height: 41px;
|
|
|
- }
|
|
|
- }
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
</style>
|
