|
@@ -0,0 +1,391 @@
|
|
|
+<template>
|
|
|
+ <div ref="commonTable">
|
|
|
+ <!-- 搜索栏 -->
|
|
|
+ <el-form v-if="formList.length > 0" :inline="true" :model="searchDataClone" label-width="130px"
|
|
|
+ ref="searchDataClone" id="commonTable" class="device-wrapper">
|
|
|
+ <el-form-item v-for="f in formList" :key="f.prop" :label="f.label" :prop="f.prop">
|
|
|
+ <template v-if="f.type === 'input'">
|
|
|
+ <el-input clearable v-model.trim="searchDataClone[f.prop]" size="small"
|
|
|
+ :placeholder="'请输入' + f.label"></el-input>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="f.type === 'company'">
|
|
|
+ <el-select size="small" clearable v-model="searchDataClone[f.prop]" :placeholder="'请输入' + f.label"
|
|
|
+ filterable>
|
|
|
+ <el-option label="不限" value v-if="f.selectAuto"></el-option>
|
|
|
+ <el-option v-for="(s, i) in InsCompanyList" :key="i" :label="s.name" :value="s.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="f.type === 'companyCheck'">
|
|
|
+ <el-select class="selectLength" multiple collapse-tags size="small"
|
|
|
+ v-model="searchDataClone[f.prop]" :placeholder="'请输入' + f.label">
|
|
|
+ <el-option label="不限" value v-if="f.selectAuto"></el-option>
|
|
|
+ <el-option v-for="(s, i) in InsCompanyList" :key="i" :label="s.name" :value="s.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="f.type === 'select'">
|
|
|
+ <el-select size="small" clearable filterable v-model="searchDataClone[f.prop]"
|
|
|
+ :placeholder="'请输入' + f.label">
|
|
|
+ <el-option label="不限" value v-if="f.selectAuto"></el-option>
|
|
|
+ <el-option v-for="(s, i) in f.options" :key="i" :label="s.label || s.dictTag || s.name"
|
|
|
+ :value="s.value || s.dictValue || s.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="f.type === 'selectDept'">
|
|
|
+ <el-select size="small" v-model="searchDataClone[f.prop]" filterable clearable
|
|
|
+ :placeholder="'请选择' + f.label" @change="selectChange($event, f.prop)">
|
|
|
+ <el-option v-for="(option, index) in f.options" :key="index"
|
|
|
+ :label="f.optionsIabel ? option[f.optionsIabel] : option.name"
|
|
|
+ :value="f.optionsValue ? option[f.optionsValue] : option.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="f.type === 'selectCompany'">
|
|
|
+ <el-select size="small" v-model="searchDataClone[f.prop]" filterable clearable
|
|
|
+ :placeholder="'请选择' + f.label" @change="selectCompanyChange($event, f.prop)">
|
|
|
+ <el-option v-for="(option, index) in f.options" :key="index"
|
|
|
+ :label="f.optionsIabel ? option[f.optionsIabel] : option.name"
|
|
|
+ :value="f.optionsValue ? option[f.optionsValue] : option.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="f.type === 'datePicker'">
|
|
|
+ <!-- 日期区间 -->
|
|
|
+ <el-date-picker style="width: 215px" type="daterange" size="small" v-model="searchDataClone[f.prop]"
|
|
|
+ align="right" unlink-panels range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
|
|
|
+ :clearable="true"></el-date-picker>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="f.type === 'date'">
|
|
|
+ <!-- 一天 -->
|
|
|
+ <el-date-picker type="date" size="small" v-model="searchDataClone[f.prop]" placeholder="选择日期"
|
|
|
+ value-format="yyyy-MM-dd"></el-date-picker>
|
|
|
+ </template>
|
|
|
+ <!-- 年份 -->
|
|
|
+ <template v-else-if="f.type === 'year'">
|
|
|
+ <el-date-picker type="year" size="small" v-model="searchDataClone[f.prop]" placeholder="选择年">
|
|
|
+ </el-date-picker>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="f.type === 'radio'">
|
|
|
+ <el-radio-group v-model="searchDataClone[f.prop]" :placeholder="'请输入' + f.label">
|
|
|
+ <el-radio v-for="(r, i) in f.radioList" :key="i" :label="r.value">{{ r.label }}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="f.type === 'slot'">
|
|
|
+ <slot show-overflow-tooltip :name="f.name"></slot>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button style="margin-left: 30px" size="small" @click="resetForm('searchDataClone')">重置</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="handleSearchList()">查询</el-button>
|
|
|
+ <template v-if="btnGroup.length > 0">
|
|
|
+ <span v-for="(val, idx) in btnGroup" :key="idx" style="margin-left: 10px">
|
|
|
+ <slot v-if="val.slot" show-overflow-tooltip :name="val.name"></slot>
|
|
|
+ <el-button v-else :disabled="false || (val.disabled && val.disabled())"
|
|
|
+ :type="val.type || 'primary'" size="small" @click="val.click()">{{ val.name }}</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item v-if="btnGroup.length>0" >
|
|
|
+ <el-button v-for="(val, idx) in btnGroup" :key="idx" :type="val.type || 'primary'" size="small" @click="tabFun(val)">{{ val.name }}</el-button>
|
|
|
+ </el-form-item> -->
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <slot v-if="custom" show-overflow-tooltip></slot>
|
|
|
+
|
|
|
+ <el-table ref="table" :show-summary="tableConfig.showSummary || false" :data="data" border size="small"
|
|
|
+ style="width: 100%" :height="tableConfig.tableHeight || tableHeight" v-loading="tableConfig.loading"
|
|
|
+ element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" @selection-change="handleSelectionChange"
|
|
|
+ @select-all="selectAll" :row-style="{ height: '55px' }" :cell-style="{ padding: 'padding: 4px 0' }"
|
|
|
+ @current-change="handleCurrentTableChange" :cell-class-name="rowClass">
|
|
|
+ <el-table-column type="selection" :width="tableConfig.selectionWidth || '50'" v-if="tableConfig.isCheckBox"
|
|
|
+ align="center" />
|
|
|
+ <el-table-column type="index" :width="tableConfig.indexWidth || '50'" v-if="tableConfig.isShowIndex"
|
|
|
+ align="center" label="序号" />
|
|
|
+ <template v-for="(item, index) in tableConfig.columns">
|
|
|
+ <!-- 日期内容 -->
|
|
|
+ <el-table-column v-if="item.type === 'date'" :align="'center'" :fixed="item.fixed"
|
|
|
+ :width="item.width || 150" show-overflow-tooltip :label="item.label" :key="item.prop">
|
|
|
+ <template #default="scope">
|
|
|
+ <div>{{ scope.row[item.prop] | formateDate }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 字典项 -->
|
|
|
+ <el-table-column v-if="item.type === 'dic'" :align="'center'" :width="item.width || ''" :fixed="item.fixed"
|
|
|
+ show-overflow-tooltip :label="item.label" :key="item.prop" :prop="item.prop">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{
|
|
|
+ selectDictLabel(dictData[item.dic], scope.row[item.prop])
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column v-if="item.type === 'statMap'" :align="'center'" :width="item.width || ''"
|
|
|
+ :fixed="item.fixed" show-overflow-tooltip :label="item.label" :key="item.prop" :prop="item.prop">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>
|
|
|
+ {{ statMaps(item.options)[scope.row[item.prop]] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 自定义内容 -->
|
|
|
+ <el-table-column v-if="item.type === 'slot'" :align="'center'" show-overflow-tooltip :name="item.name"
|
|
|
+ :label="item.label" :key="item.prop" :prop="item.prop" :width="item.width || ''">
|
|
|
+ <template #default="scope">
|
|
|
+ <slot show-overflow-tooltip v-bind="scope" :name="item.name"></slot>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 常规文本内容 -->
|
|
|
+ <el-table-column v-if="item.type === 'text'" :align="'center'" :width="item.width || ''" :fixed="item.fixed"
|
|
|
+ :label="item.label" :key="item.prop" :prop="item.prop"></el-table-column>
|
|
|
+ </template>
|
|
|
+ <!-- <slot name="operate" :row="scope.row"></slot> -->
|
|
|
+ <!-- 自定义操作栏 -->
|
|
|
+ <el-table-column v-if="tableConfig.operateShow" label="操作" align="center"
|
|
|
+ :min-width="tableConfig.operationWidth || '100'" fixed="right">
|
|
|
+ <template #default="scope">
|
|
|
+ <slot name="operate" :row="scope.row"></slot>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 数组形式的操作栏,用于普通按钮 -->
|
|
|
+ <!-- // optBtns:[
|
|
|
+ // {
|
|
|
+ // type:'primary',
|
|
|
+ // label:'修改',
|
|
|
+ // hide:(row) => {
|
|
|
+ // return row.importStatus == 1?true:false
|
|
|
+ // },
|
|
|
+ // click:(row, index) => {return this.modifyFun(row)},
|
|
|
+ // }
|
|
|
+ // ] -->
|
|
|
+ <el-table-column v-if="tableConfig.optBtns" :min-width="tableConfig.operationWidth || '100'" label="操作"
|
|
|
+ fixed="right" header-align="center" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <span v-for="(btn, index) in tableConfig.optBtns" :key="index">
|
|
|
+ <!-- <el-button style="margin:0 10px" v-if="!btn.hide || (btn.hide && btn.hide(scope.row))" v-permission="btn.perm"
|
|
|
+ @click="btn.click(scope.row, index)" :type="btn.type || 'primary'" :icon="btn.icon" size="small">{{
|
|
|
+ btn.label
|
|
|
+ }} </el-button> -->
|
|
|
+ <kt-button style="margin: 0 10px" v-if="!btn.hide || (btn.hide && btn.hide(scope.row))"
|
|
|
+ :icon="btn.icon" :label="btn.label" :type="btn.type || 'primary'" size="medium" :perms="btn.perm"
|
|
|
+ @click="btn.click(scope.row, index)" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="block" ref="bottomFixed">
|
|
|
+ <el-pagination v-if="tableConfig.isPaginationShow && pagination.totalSize" style="margin-top: 10px"
|
|
|
+ :page-size="pagination.pageSize" :current-page.sync="pagination.pageNum" :total="pagination.totalSize"
|
|
|
+ layout="total, sizes,prev, pager, next,jumper" :page-sizes="[10, 20, 50, 100]"
|
|
|
+ @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script type="text/ecmascript-6">
|
|
|
+import KtButton from "./button.vue";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ KtButton,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ custom: {
|
|
|
+ type: Boolean,
|
|
|
+ default: () => {
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ formList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ btnGroup: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tableConfig: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // searchDataClone: {
|
|
|
+ // type: Object,
|
|
|
+ // default: () => {
|
|
|
+ // return {};
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ pagination: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ totalSize: 0,
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ rowClass: {
|
|
|
+ type: Function,
|
|
|
+ default: () => "",
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableHeight: 0,
|
|
|
+ InsCompanyList: [],
|
|
|
+ searchDataClone: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if (
|
|
|
+ this.formList.length > 0 &&
|
|
|
+ this.formList.find(
|
|
|
+ (val) => val.type == "company" || val.type == "companyCheck"
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ this.companyFun();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ setTimeout(() => {
|
|
|
+ var divHg = 0;
|
|
|
+ if (document.getElementById("commonTable") != null) {
|
|
|
+ divHg = document.getElementById("commonTable").clientHeight;
|
|
|
+ } else {
|
|
|
+ divHg = 100;
|
|
|
+ }
|
|
|
+ let bottomTop = this.$refs.bottomFixed.offsetTop;
|
|
|
+ //160??待调整
|
|
|
+ this.tableHeight = window.innerHeight - divHg - 210 + "px";
|
|
|
+ }, 10);
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ formateDate(val) {
|
|
|
+ return formatDateTime(val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ selectChange(id, filed) {
|
|
|
+ switch (filed) {
|
|
|
+ case "provinceId":
|
|
|
+ break;
|
|
|
+ case "cityId":
|
|
|
+ break;
|
|
|
+ case "countyId":
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ if (id) {
|
|
|
+ this.$emit("areaSelectChange", { id, filed });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectCompanyChange(id, filed) {
|
|
|
+ if (id) {
|
|
|
+ this.$emit("companySelectChange", { id, filed });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatDateTime(date) {
|
|
|
+ let d = new Date(date),
|
|
|
+ month = "" + (d.getMonth() + 1),
|
|
|
+ day = "" + d.getDate(),
|
|
|
+ year = d.getFullYear();
|
|
|
+ if (month.length < 2) month = "0" + month;
|
|
|
+ if (day.length < 2) day = "0" + day;
|
|
|
+ return [year, month, day].join("-");
|
|
|
+ },
|
|
|
+ companyFun() {
|
|
|
+ this.$api.cost.gainTopList({ type: 1 }).then((res) => {
|
|
|
+ if (res.data) {
|
|
|
+ this.InsCompanyList = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ statMaps(list) {
|
|
|
+ if (!list) return;
|
|
|
+ let obj = {};
|
|
|
+ list.forEach((item) => {
|
|
|
+ obj[item.value || item.id || item.dictValue] = item.label || item.value || item.dictTag;
|
|
|
+ });
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+
|
|
|
+ selectDictLabel(dicts, value) {
|
|
|
+ if (value === undefined) {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ if (dicts === undefined) {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ const actions = [];
|
|
|
+ Object.keys(dicts).some((key) => {
|
|
|
+ if (dicts[key].value === `${value}`) {
|
|
|
+ actions.push(dicts[key].label);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (actions.length === 0) {
|
|
|
+ actions.push(value);
|
|
|
+ }
|
|
|
+ return actions.join("");
|
|
|
+ },
|
|
|
+ // 表格多选
|
|
|
+ handleSelectionChange(currentRow) {
|
|
|
+ this.$emit("selectionChange", currentRow, this.$refs.table);
|
|
|
+ },
|
|
|
+ selectAll(currentRow) {
|
|
|
+ this.$emit("selectAll", currentRow, this.$refs.table);
|
|
|
+ },
|
|
|
+ handleSizeChange(value) {
|
|
|
+ this.pagination.pageSize = value;
|
|
|
+ this.pagination.pageNum = 1;
|
|
|
+ this.$emit("getList", { ...this.pagination, ...this.searchDataClone });
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.pagination.pageNum = val;
|
|
|
+ this.$emit("getList", { ...this.pagination, ...this.searchDataClone });
|
|
|
+ },
|
|
|
+ handleCurrentTableChange(val) {
|
|
|
+ this.$emit("handleCurrentTableChange", val);
|
|
|
+ },
|
|
|
+ // 搜索
|
|
|
+ handleSearchList() {
|
|
|
+ // 更新父组件searchData
|
|
|
+ this.pagination.pageNum = 1;
|
|
|
+ this.pagination.pageSize = 10; //查询添加默认每页20条
|
|
|
+ this.$emit("handleSearchList", this.searchDataClone);
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$emit("handleResetForm");
|
|
|
+ this.searchDataClone = {};
|
|
|
+ console.log(this.searchDataClone);
|
|
|
+ // this.$refs[formName].resetFields();
|
|
|
+ this.handleSearchList();
|
|
|
+ },
|
|
|
+ handleOpt(row, index) {
|
|
|
+ this.$emit("handleOpt", row, index);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped="scoped">
|
|
|
+.selectLength /deep/ .el-select__tags-text {
|
|
|
+ display: inline-block;
|
|
|
+ max-width: 110px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.device-wrapper /deep/ .el-form-item {
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|