|
@@ -0,0 +1,486 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ class="filter-dialog"
|
|
|
+ :visible.sync="isVisible"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :show-close="false"
|
|
|
+ :append-to-body="true"
|
|
|
+ width="500px"
|
|
|
+ :before-close="handleCancel"
|
|
|
+ >
|
|
|
+ <div slot="title" class="dialog-title">
|
|
|
+ <div class="top">
|
|
|
+ <h2>高级筛选</h2>
|
|
|
+ <i class="el-icon-close" @click="handleCancel"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-bd">
|
|
|
+ <div class="filter-wrap">
|
|
|
+ <div class="filter-item" style="width:140px">
|
|
|
+ <div class="filter-title">创建人</div>
|
|
|
+ <div class="filter-info">
|
|
|
+ <div class="filter-info-item" style="width:90px;">
|
|
|
+ <el-select
|
|
|
+ v-model="advanceFilterObj.createUserId"
|
|
|
+ placeholder="请选择"
|
|
|
+ size="mini"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ @change="handleFilter"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in optionsObj.userList"
|
|
|
+ :key="index"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.name"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="filter-item" style="width:292px;">
|
|
|
+ <div class="filter-title">创建时间</div>
|
|
|
+ <div class="filter-info">
|
|
|
+ <div class="filter-info-item">
|
|
|
+ <el-date-picker
|
|
|
+ :picker-options="createTimeStartPickerOptions"
|
|
|
+ v-model="advanceFilterObj.createTimeStart"
|
|
|
+ @change="handleFilter"
|
|
|
+ size="mini"
|
|
|
+ style="width:136px"
|
|
|
+ type="date"
|
|
|
+ format="yyyy/MM/dd"
|
|
|
+ value-format="timestamp"
|
|
|
+ placeholder="请选择"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <span class="line">~</span>
|
|
|
+ <div class="filter-info-item">
|
|
|
+ <el-date-picker
|
|
|
+ :picker-options="createTimeEndPickerOptions"
|
|
|
+ v-model="advanceFilterObj.createTimeEnd"
|
|
|
+ @change="handleFilter"
|
|
|
+ size="mini"
|
|
|
+ style="width:136px"
|
|
|
+ type="date"
|
|
|
+ format="yyyy/MM/dd"
|
|
|
+ value-format="timestamp"
|
|
|
+ placeholder="请选择"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="filter-item" style="width:140px;">
|
|
|
+ <div class="filter-title">最后更新人</div>
|
|
|
+ <div class="filter-info">
|
|
|
+ <div class="filter-info-item" style="width:90px;">
|
|
|
+ <el-select
|
|
|
+ v-model="advanceFilterObj.updateUserId"
|
|
|
+ placeholder="请选择"
|
|
|
+ size="mini"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ @change="handleFilter"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in optionsObj.userList"
|
|
|
+ :key="index"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.name"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="filter-item" style="width:292px;">
|
|
|
+ <div class="filter-title">最后更新时间</div>
|
|
|
+ <div class="filter-info">
|
|
|
+ <div class="filter-info-item">
|
|
|
+ <el-date-picker
|
|
|
+ :picker-options="updateTimeStartPickerOptions"
|
|
|
+ v-model="advanceFilterObj.updateTimeStart"
|
|
|
+ @change="handleFilter"
|
|
|
+ size="mini"
|
|
|
+ style="width:136px"
|
|
|
+ type="date"
|
|
|
+ format="yyyy/MM/dd"
|
|
|
+ value-format="timestamp"
|
|
|
+ placeholder="请选择"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <span class="line">~</span>
|
|
|
+ <div class="filter-info-item">
|
|
|
+ <el-date-picker
|
|
|
+ :picker-options="updateTimeEndPickerOptions"
|
|
|
+ v-model="advanceFilterObj.updateTimeEnd"
|
|
|
+ @change="handleFilter"
|
|
|
+ size="mini"
|
|
|
+ style="width:136px"
|
|
|
+ type="date"
|
|
|
+ format="yyyy/MM/dd"
|
|
|
+ value-format="timestamp"
|
|
|
+ placeholder="请选择"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <div class="tips">
|
|
|
+ <span v-if="!isOk">
|
|
|
+ <i class="icon el-icon-warning-outline"></i> 请选择筛选条件
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="footer-wrap">
|
|
|
+ <el-button class="btn el-button-fff" @click="handleClear"
|
|
|
+ >清空</el-button
|
|
|
+ >
|
|
|
+ <el-button class="btn el-button-ff523d active" @click="handleSave"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+const ADVANCE_FILTERS = {
|
|
|
+ createUserId: "", // 创建人ID
|
|
|
+ updateUserId: "", // 更新人ID
|
|
|
+ createTimeStart: "", // 创建时间起始10位时间戳
|
|
|
+ createTimeEnd: "", // 创建时间结束10位时间戳
|
|
|
+ updateTimeStart: "", // 更新时间起始10位时间戳
|
|
|
+ updateTimeEnd: "" // 更新时间结束10位时间戳
|
|
|
+};
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ advanceFilters: {
|
|
|
+ type: Object,
|
|
|
+ required: false,
|
|
|
+ default: () => {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isVisible: false, // dialog显隐
|
|
|
+ // 所有筛选选项对象
|
|
|
+ optionsObj: {
|
|
|
+ userList: [] // 创建人、更新人列表
|
|
|
+ },
|
|
|
+ advanceFilterObj: { ...ADVANCE_FILTERS }, // 高级筛选条件对象
|
|
|
+ advanceFilterArr: [], // 高级筛选条件数组
|
|
|
+ isOk: true, // 是否有选择筛选条件
|
|
|
+ createTimeStartPickerOptions: {
|
|
|
+ disabledDate: time => {
|
|
|
+ if (this.advanceFilterObj.createTimeEnd) {
|
|
|
+ return time.getTime() >= this.advanceFilterObj.createTimeEnd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ createTimeEndPickerOptions: {
|
|
|
+ disabledDate: time => {
|
|
|
+ if (this.advanceFilterObj.createTimeStart) {
|
|
|
+ return time.getTime() <= this.advanceFilterObj.createTimeStart;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ updateTimeStartPickerOptions: {
|
|
|
+ disabledDate: time => {
|
|
|
+ if (this.advanceFilterObj.updateTimeEnd) {
|
|
|
+ return time.getTime() >= this.advanceFilterObj.updateTimeEnd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ updateTimeEndPickerOptions: {
|
|
|
+ disabledDate: time => {
|
|
|
+ if (this.advanceFilterObj.updateTimeStart) {
|
|
|
+ return time.getTime() <= this.advanceFilterObj.updateTimeStart;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ advanceFilterObj: {
|
|
|
+ deep: true,
|
|
|
+ handler() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const isOk = this.getIsOk();
|
|
|
+ isOk && (this.isOk = true);
|
|
|
+
|
|
|
+ this.dealFilterArr();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.loadUser();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.isVisible = true;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ formatTimeToStr(t) {
|
|
|
+ if (t) {
|
|
|
+ let time = new Date(t);
|
|
|
+ let year = time.getFullYear();
|
|
|
+ let month = time.getMonth() + 1;
|
|
|
+ if (month < 10) {
|
|
|
+ month = `0${month}`;
|
|
|
+ }
|
|
|
+ let date = time.getDate();
|
|
|
+ if (date < 10) {
|
|
|
+ date = `0${date}`;
|
|
|
+ }
|
|
|
+ return `${year}/${month}/${date}`;
|
|
|
+ }
|
|
|
+ return "";
|
|
|
+ },
|
|
|
+ getIsOk() {
|
|
|
+ let isOk = false;
|
|
|
+ for (const key in this.advanceFilterObj) {
|
|
|
+ if (this.advanceFilterObj[key]) {
|
|
|
+ isOk = true;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return isOk;
|
|
|
+ },
|
|
|
+ dealFilterArr() {
|
|
|
+ const advanceFilterArr = [];
|
|
|
+ if (this.advanceFilterObj.createUserId) {
|
|
|
+ const user = this.optionsObj.userList.filter(val => {
|
|
|
+ return val.value === this.advanceFilterObj.createUserId;
|
|
|
+ })[0];
|
|
|
+ user &&
|
|
|
+ advanceFilterArr.push({
|
|
|
+ key: "createUserId",
|
|
|
+ text: `创建人:${user.name}`
|
|
|
+ });
|
|
|
+ }
|
|
|
+ let start = !!this.advanceFilterObj.createTimeStart;
|
|
|
+ let end = !!this.advanceFilterObj.createTimeEnd;
|
|
|
+ if (start || end) {
|
|
|
+ if (start && !end) {
|
|
|
+ advanceFilterArr.push({
|
|
|
+ key: "createTimeStart",
|
|
|
+ text: `创建时间:>= ${this.formatTimeToStr(
|
|
|
+ this.advanceFilterObj.createTimeStart
|
|
|
+ )}`
|
|
|
+ });
|
|
|
+ } else if (!start && end) {
|
|
|
+ advanceFilterArr.push({
|
|
|
+ key: "createTimeEnd",
|
|
|
+ text: `创建时间:<= ${this.formatTimeToStr(
|
|
|
+ this.advanceFilterObj.createTimeEnd
|
|
|
+ )}`
|
|
|
+ });
|
|
|
+ } else if (start && end) {
|
|
|
+ advanceFilterArr.push({
|
|
|
+ key: "createTime",
|
|
|
+ text: `创建时间:${this.formatTimeToStr(
|
|
|
+ this.advanceFilterObj.createTimeStart
|
|
|
+ )} ~ ${this.formatTimeToStr(this.advanceFilterObj.createTimeEnd)}`
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.advanceFilterObj.updateUserId) {
|
|
|
+ const user = this.optionsObj.userList.filter(val => {
|
|
|
+ return val.value === this.advanceFilterObj.updateUserId;
|
|
|
+ })[0];
|
|
|
+ user &&
|
|
|
+ advanceFilterArr.push({
|
|
|
+ key: "updateUserId",
|
|
|
+ text: `最后更新人:${user.name}`
|
|
|
+ });
|
|
|
+ }
|
|
|
+ start = !!this.advanceFilterObj.updateTimeStart;
|
|
|
+ end = !!this.advanceFilterObj.updateTimeEnd;
|
|
|
+ if (start || end) {
|
|
|
+ if (start && !end) {
|
|
|
+ advanceFilterArr.push({
|
|
|
+ key: "updateTimeStart",
|
|
|
+ text: `最后更新时间:>= ${this.formatTimeToStr(
|
|
|
+ this.advanceFilterObj.updateTimeStart
|
|
|
+ )}`
|
|
|
+ });
|
|
|
+ } else if (!start && end) {
|
|
|
+ advanceFilterArr.push({
|
|
|
+ key: "updateTimeEnd",
|
|
|
+ text: `最后更新时间:<= ${this.formatTimeToStr(
|
|
|
+ this.advanceFilterObj.updateTimeEnd
|
|
|
+ )}`
|
|
|
+ });
|
|
|
+ } else if (start && end) {
|
|
|
+ advanceFilterArr.push({
|
|
|
+ key: "updateTime",
|
|
|
+ text: `最后更新时间:${this.formatTimeToStr(
|
|
|
+ this.advanceFilterObj.updateTimeStart
|
|
|
+ )} ~ ${this.formatTimeToStr(this.advanceFilterObj.updateTimeEnd)}`
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.advanceFilterArr = advanceFilterArr;
|
|
|
+ },
|
|
|
+ // 确定点击
|
|
|
+ handleSave() {
|
|
|
+ const isOk = this.getIsOk();
|
|
|
+ if (!isOk) {
|
|
|
+ this.isOk = false;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.$parent.setAdvanceFilterObj(this.advanceFilterObj);
|
|
|
+ this.$parent.setAdvanceFilterArr(this.advanceFilterArr);
|
|
|
+ this.$parent.handleShowAdvanceFilter(false);
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.$parent.handleShowAdvanceFilter(false);
|
|
|
+ },
|
|
|
+ // 清空点击
|
|
|
+ handleClear() {
|
|
|
+ this.advanceFilterObj = { ...ADVANCE_FILTERS };
|
|
|
+ },
|
|
|
+ // 加载用户列表
|
|
|
+ loadUser() {
|
|
|
+ const params = {};
|
|
|
+ params.url = this.$apis.api_material_user_sels;
|
|
|
+ params.data = {
|
|
|
+ userName: ""
|
|
|
+ };
|
|
|
+ this.$net.req(params).then(
|
|
|
+ res => {
|
|
|
+ const { data } = res;
|
|
|
+ if (data) {
|
|
|
+ this.optionsObj.userList = data;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.advanceFilterObj = {
|
|
|
+ ...this.advanceFilterObj,
|
|
|
+ ...this.advanceFilters
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ () => {}
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.filter-dialog {
|
|
|
+ .el-input--prefix .el-input__inner {
|
|
|
+ padding: 0 22px;
|
|
|
+ }
|
|
|
+ .el-input__prefix {
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100vh;
|
|
|
+ .el-dialog {
|
|
|
+ position: relative !important;
|
|
|
+ top: 0 !important;
|
|
|
+ left: 0 !important;
|
|
|
+ margin: 0 !important;
|
|
|
+ transform: none !important;
|
|
|
+ }
|
|
|
+ .dialog-title {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // height: 106px;
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ h2 {
|
|
|
+ font-size: 17px;
|
|
|
+ font-family: PingFangSC-Regular, PingFangSC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #1a1a1a;
|
|
|
+ padding: 20px 26px;
|
|
|
+ }
|
|
|
+ .el-icon-close {
|
|
|
+ color: #999;
|
|
|
+ margin: 12px 12px 0 0;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 0 26px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .el-dialog__footer {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 26px;
|
|
|
+ .tips {
|
|
|
+ color: #ff523d;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .footer-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .dialog-pagination {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .el-pagination {
|
|
|
+ padding: 0 5px;
|
|
|
+ height: 32px;
|
|
|
+ > *,
|
|
|
+ .el-input__inner,
|
|
|
+ .el-pager li {
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.filter-wrap {
|
|
|
+ overflow: hidden;
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ .filter-item {
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ width: 100%;
|
|
|
+ .filter-title {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #666666;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .filter-info {
|
|
|
+ display: flex;
|
|
|
+ .line {
|
|
|
+ font-size: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #666666;
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|