holidayManage.vue

<template>
  <div class="manage-container">
    <el-row class="manage-head-wrapper">
      <el-col :span="18">
        <span style="float: left;margin-right: 10px">
          <el-date-picker
            class="year-inp"
            v-model="yearTime"
            align="right"
            type="year"
            :format="datePickerFormatter('year')"
            size="mini"
            :placeholder="$t('pholder.year')"
            :picker-options="datePickerOpt"
          ></el-date-picker>
        </span>
        <el-button type="primary" class="search-btn" plain size="mini" @click="searchFun">查询</el-button>
      </el-col>
      <el-col :span="6">
        <el-button
          type="primary"
          class="manage-add-btn"
          size="mini"
          @click="addDialogVisible = true"
          icon="el-icon-circle-plus-outline"
        >新增节假日</el-button>
      </el-col>
    </el-row>
    <el-row class="manage-content">
      <el-col :span="24">
        <!-- @expand-change="expandHandle" -->
        <el-table
          :data="tableData"
          :max-height="tableHeight"
          :empty-text="dataMsg"
          style="width: 100%"
          header-row-class-name="manage-tab-head"
        >
          <el-table-column prop="tabOrder" align="center" label="序号" width="80"></el-table-column>
          <el-table-column prop="name" label="节假日名称" align="center"></el-table-column>
          <!-- <el-table-column prop="mall.name" label="所属广场" align="center">
          </el-table-column>-->
          <el-table-column prop="startDate" label="开始日期" :formatter="timeFormat" align="center"></el-table-column>
          <el-table-column prop="endDate" label="结束日期" :formatter="timeFormat" align="center"></el-table-column>
          <el-table-column prop="holidayDate" label="节假日当天" :formatter="timeFormat" align="center"></el-table-column>
          <el-table-column prop="durationDay" label="持续天数" align="center"></el-table-column>
          <el-table-column prop="intro" label="描述" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="editRow(scope.row)" type="text" size="small" class="tab-btn">编辑</el-button>
              <el-button @click="delRow(scope.row)" type="text" size="small" class="tab-btn">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="manage-pagination-box"
          background
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          @size-change="sizeChange"
          @current-change="cerrentChange"
          layout="sizes, prev, pager, next, slot"
          :total="total"
        >
          <span
            class="slot-ele-total"
          >{{$t('table.pageHead')}} {{ total }} {{$t('table.pageTail')}}</span>
        </el-pagination>
      </el-col>
    </el-row>
    <!--新增dialog-->
    <el-dialog
      title="新增节假日"
      class="manage-dialog"
      :visible.sync="addDialogVisible"
      :close-on-click-modal="false"
      @close="addDialogClose()"
      @open="dialogOpen(addForm)"
    >
      <el-form :model="addForm" status-icon :rules="rules" ref="addForm">
        <el-form-item prop="name" label="名称">
          <el-input v-model="addForm.name"></el-input>
          <i class="error-tip">*</i>
        </el-form-item>
        <!-- <el-form-item prop="mallId" label="所属广场">
                    <el-select class="manage-sel" v-model="addForm.mallId" filterable :placeholder="$t('pholder.select')" :no-data-text="$t('pholder.nodata')" @change="changeAddMall">
						<el-option v-for="item in mallList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
        </el-form-item>-->
        <el-form-item label="起止日期">
          <el-col :span="11">
            <el-form-item prop="startDate" class="spe-form-item">
              <el-date-picker
                class="manage-date-inp"
                v-model="addForm.startDate"
                format="MM 月 dd 日"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd HH:mm:ss"
                :placeholder="$t('table.startTime')"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-form-item prop="endDate" class="spe-form-item">
              <el-date-picker
                class="manage-date-inp"
                v-model="addForm.endDate"
                format="MM 月 dd 日"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd HH:mm:ss"
                @blur="endDateBlur('addForm')"
                :placeholder="$t('table.endTime')"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item prop="holidayDate" label="节日当天">
          <el-date-picker
            class="manage-date-inp"
            v-model="addForm.holidayDate"
            format="yyyy-MM-dd"
            type="date"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="节日当天"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="intro" label="描述">
          <el-input type="textarea" v-model="addForm.intro"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
        <el-button
          type="primary"
          @click="addSubmit('addForm')"
          class="dialog-btn dialog-confirm-btn"
        >{{$t('dialog.confirm')}}</el-button>
      </div>
    </el-dialog>

    <!--编辑dialog-->
    <el-dialog
      title="编辑节假日"
      class="manage-dialog"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
      @close="editDialogClose()"
      @open="dialogOpen(editForm)"
    >
      <el-form :model="editForm" status-icon :rules="rules" ref="editForm">
        <el-form-item prop="name" label="名称">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <!-- <el-form-item prop="editForm.mallId" label="所属广场">
                    <el-select class="manage-sel" v-model="editForm.mallId" filterable :placeholder="$t('pholder.select')" :no-data-text="$t('pholder.nodata')" @change="changeAddMall">
						<el-option v-for="item in mallList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
        </el-form-item>-->
        <el-form-item label="起止日期">
          <el-col :span="11">
            <el-form-item class="spe-form-item">
              <el-date-picker
                class="manage-date-inp"
                v-model="editForm.startDate"
                format="MM 月 dd 日"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd HH:mm:ss"
                :placeholder="$t('table.startTime')"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-form-item class="spe-form-item">
              <el-date-picker
                class="manage-date-inp"
                v-model="editForm.endDate"
                format="MM 月 dd 日"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd HH:mm:ss"
                @blur="endDateBlur('editForm')"
                :placeholder="$t('table.endTime')"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="节日当天">
          <el-date-picker
            class="manage-date-inp"
            v-model="editForm.holidayDate"
            format="yyyy-MM-dd"
            type="date"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="节日当天"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="editForm.intro"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
        <el-button
          type="primary"
          @click="editSubmit('editForm')"
          class="dialog-btn dialog-confirm-btn"
        >{{$t('dialog.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datePickerOpt: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      yearTime: "",
      cancelBtnDisabled: false,
      bindBtnDisabled: false,
      bindVisible: false, //
      bindVal: "", //
      gateList: [],
      curCheckGate: {},
      bindGateList: [],
      blocList: [],
      mallListForTerm: [],
      floorListForTerm: [],
      blocValue: "",
      mallValue: "",
      floorValue: "",
      bindVisible: false,
      addDialogVisible: false,
      editDialogVisible: false,
      name_like: "",
      rowId: "",
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      formLabelWidth: "80px",
      start_date: "",
      end_date: "",
      addForm: {
        name: "",
        startDate: "",
        endDate: ""
        // mallId: ''
      },
      editForm: {},
      rules: {
        name: [
          { required: true, message: "请输入节假日名称", trigger: "blur" }
          // { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
        // mallId: [
        // 	{ required: true, message: '请选择门店', trigger: 'change' },
        // ],
        // accountId: [
        // 	{ required: true, message: '请选择集团', trigger: 'blur' },
        // ],
        floorId: [{ required: true, message: "请选择区域", trigger: "change" }]
      },
      mallList: [],
      accountList: [],
      floorList: [],
      noDataText: "load",
      childrenHeader: false,
      zoneAllGate: [],
      bindZoneId: "",
      dataMsg: ""
    };
  },
  computed: {
    tableHeight() {
      const windowInnerHeight = window.innerHeight;
      return windowInnerHeight - 200;
    }
  },
  mounted() {
    this.dataMsg = this.$t("echartsTitle.loading");
    this.yearTime = new Date();
    this.getAccountList();
  },
  methods: {
    timeFormat(a, b, c) {
      let timeStr = "";
      if (c) {
        timeStr = c.split(" ")[0];
      }
      return timeStr;
    },
    endDateBlur(type) {
      let sDate = "",
        eDate = "";
      if (type === "addForm") {
        sDate = this.addForm.start_date;
        eDate = this.addForm.end_date;
      } else {
        sDate = this.editForm.start_date;
        eDate = this.editForm.end_date;
      }
      if (sDate && eDate) {
        let isIegal = Date.parse(eDate) > Date.parse(sDate);
        if (!isIegal) {
          this.$message({
            showClose: true,
            message: this.$t("message.timeIllegal"),
            type: "warning"
          });
          if (type === "addForm") {
            this.addForm.end_date = "";
          } else {
            this.editForm.end_date = "";
          }
          return;
        }
      }
    },
    getTableData() {
      this.dataMsg = this.$t("echartsTitle.loading");
      let startTime = "",
        endTime = "";
      if (this.yearTime.getFullYear() === new Date().getFullYear()) {
        endTime = dateUnit.dateFormat(this.yearTime, "yyyy-MM-dd");
        startTime = dateUnit.dateFormat(new Date(Date.parse(this.yearTime.getFullYear() + "/01/01")), "yyyy-MM-dd");
      } else {
        const fullyear = this.yearTime.getFullYear()
        const fullDays = (fullyear % 4 == 0 && fullyear % 100 != 0) || (fullyear % 100 == 0 && fullyear % 400 == 0) ? 366 : 365;
        startTime = this.yearTime;
        endTime = new Date(Date.parse(this.dayAdd(this.yearTime, fullDays).replace(/\-/, "/")));
        let formatTime = this.unitTime(startTime, endTime, "year");
        startTime = formatTime.startTime;
        endTime = formatTime.endTime;
      }
      let _mallId = this.mallValue ? this.mallValue : null;
      var tabelParams = {
        mallId: _mallId,
        startDate: startTime,
        endDate: endTime,
        // name_like: "%" + this.name_like + "%",
        page: this.currentPage,
        pageSize: this.pageSize
        // _t: Date.parse(new Date()) / 1000
      };
      // if (!this.name_like) {
      // 	tabelParams.name_like = null
      // }
      this.$api.management
        .holiday(tabelParams)
        .then(data => {
          this.tableData = [];
          var result = data.data;
          result.data.list.forEach((item, index) => {
            item.tabOrder = ++index;
            item.durationDay =
              (Date.parse(item.endDate.replace(/\-/, "/")) -
                Date.parse(item.startDate.replace(/\-/, "/"))) /
                3600000 /
                24 +
              1;
            // item.startDate = item.startDate ? (item.startDate).split(' ')[0] : '--';
            // item.endDate = item.endDate ? (item.endDate).split(' ')[0] : '--';
            // item.holidayDate = item.holidayDate ? (item.holidayDate).split(' ')[0] : '--';
          });
          this.tableData = result.data.list;
          this.total = result.data.total;
          this.tableData.length === 0 &&
            (this.dataMsg = this.$t("echartsTitle.noData"));
        })
        .catch(error => {});
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    cerrentChange(val) {
      if (this.currentPage != val) {
        this.currentPage = val;
        this.getTableData();
      }
    },
    // 关闭绑定弹窗
    closeBindDialog() {
      this.gateList.forEach(item => {
        item.isCheck = false;
        item.className = "gate-item";
      });
      this.bindVal = "";
      this.bindGateList.length = 0;
      this.noDataText = "load";
    },
    //点击编辑弹框
    editRow(row) {
      this.editDialogVisible = true;
      this.rowId = row.id;
      var str = JSON.stringify(row);
      this.editForm = JSON.parse(str);
    },
    delRow(row) {
      this.$confirm(
        this.$t("message.confirDelete"),
        this.$t("message.prompt"),
        {
          confirmButtonText: this.$t("message.confirm"),
          cancelButtonText: this.$t("message.cancel"),
          type: "warning"
        }
      )
        .then(() => {
          this.$api.management
            .delHoliday(row.id, {})
            .then(data => {
              if (data.data.code == 200) {
                this.$message({
                  showClose: true,
                  type: "success",
                  message: this.$t("message.deleteSuccess")
                });
                this.getTableData();
              } else {
                this.$message({
                  showClose: true,
                  type: "warning",
                  message: "删除异常!" + data.data.msg
                });
              }
            })
            .catch(error => {});
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: this.$t("message.cancelDelete")
          });
        });
    },
    //		 	提交新增表单
    addSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$api.management
            .addHoliday(this.addForm)
            .then(data => {
              this.addDialogVisible = false;
              this.getTableData();
            })
            .catch(error => {});
        } else {
          return false;
        }
      });
    },
    // 提交编辑表单
    editSubmit(formName) {
      let editParam = {
        name: this.editForm.name,
        startDate: this.editForm.startDate,
        endDate: this.editForm.endDate,
        holidayDate: this.editForm.holidayDate,
        intro: this.editForm.intro
      };
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$api.management
            .editHoliday(this.rowId, editParam)
            .then(data => {
              if (data.data.code == 200) {
                this.editDialogVisible = false;
                this.getTableData();
              } else {
                this.$message({
                  showClose: true,
                  type: "warning",
                  message: "修改异常!" + data.data.msg
                });
              }
            })
            .catch(error => {});
        } else {
          return false;
        }
      });
    },
    //		          搜索
    searchFun() {
      this.currentPage = 1;
      this.getTableData();
    },
    //		    addDialog关闭时
    addDialogClose() {
      this.$refs.addForm.resetFields();
    },
    //			编辑dialog关闭时
    editDialogClose() {
      this.$refs.editForm.clearValidate();
      this.editForm = {};
    },
    //			dialog打开时
    dialogOpen(formDatas) {
      // formDatas.accountId = this.$cookie.get('accountId');
      // this.getMallList(formDatas.accountId);
    },
    //添加集团change
    changeAddAccount(val) {
      this.getMallList(val);
    },
    //修改集团change
    changeEditAccount(val) {
      this.editChangeGetMall(val);
    },
    //添加广场change
    changeAddMall(val) {
      // this.getFloorList(val)
    },
    //修改广场change
    changeEditMall(val) {
      this.editChangeGetFloor(val);
    },
    dateFormatter(row, column, cellValue) {
      if (cellValue.split(" ")) {
        return cellValue.split(" ")[0];
      }
    },
    typeFormatter(row, column, cellValue) {
      let str = "";
      if (cellValue == 1) {
        str = "店铺";
      } else if (cellValue == 2) {
        str = "区";
      } else {
        str = "主力店";
      }
      return str;
    },
    statusFormatter(row, column, cellValue) {
      if (cellValue == 1) {
        cellValue = "正常";
      } else {
        cellValue = "停用";
      }
      return cellValue;
    },
    getAccountList() {
      // this.$api.base.account({
      // 		// _t: Date.parse(new Date()) / 1000
      // })
      // 	.then((data) => {
      // 		var result = data.data;
      // 		this.accountList = result.data;
      // 		this.addForm.accountId = this.accountList[0].id;

      // 		this.blocValue = '';
      // 		this.blocList = result.data;
      // 		this.blocList.forEach((item, index, arr) => {
      // 			if (index == 0) {
      // 				this.blocValue = item.id
      // 			}
      // 		})
      // 		this.getMallListForTerm(this.blocValue, true)
      // 	})
      // 	.catch((error) => { })
      this.blocValue = this.$cookie.get("accountId");
      this.getMallListForTerm(this.blocValue, true);
    },
    getMallList(accountId) {
      this.$api.base
        .mall(
          {
            accountId: accountId,
            // status: 1,
            status_arr: "1,3"
            // _t: Date.parse(new Date()) / 1000
          },
          null,
          true
        )
        .then(data => {
          var result = data.data;
          this.mallList = result.data;
          if (this.mallList.length > 0) {
            this.addForm.mallId = this.mallList[0].id;
            // this.getFloorList(this.addForm.mallId)
          } else {
            this.addForm.mallId = "";
            this.floorList = [];
            this.addForm.floorId = "";
          }
        })
        .catch(error => {});
    },
    blocChange() {
      this.getMallListForTerm(this.blocValue);
    },
    mallChange() {
      // this.getZoneAllGate(this.mallValue)
      // this.getFloorListForTerm(this.mallValue)
    },
    getMallListForTerm(accountId, isCheck) {
      //				var accountArr='';
      //				accountIds.forEach((item,index,arr)=>{
      //					accountArr+=item+','
      //				})
      //				accountArr=accountArr.substring(0,accountArr.length-1)
      //				if(accountArr==''){
      //					accountArr='-1'
      //				}
      this.$api.base
        .mall(
          {
            accountId: accountId,
            // status: 1,
            status_arr: "1,3"
            // _t: Date.parse(new Date()) / 1000
          },
          null,
          true
        )
        .then(data => {
          var result = data.data;
          this.mallListForTerm = [];
          this.mallValue = "";
          this.mallListForTerm = result.data;
          this.mallListForTerm.forEach((item, index, arr) => {
            if (index == 0) {
              this.mallValue = item.id;
            }
          });
          if (isCheck) {
            this.getTableData();
          }
          // 	this.getFloorListForTerm(this.mallValue, true)
          // } else {
          // 	this.getFloorListForTerm(this.mallValue)
          // }
          // this.getZoneAllGate(this.mallValue);
        })
        .catch(error => {});
    },
    editChangeGetMall(accountId) {
      this.$api.base
        .mall(
          {
            accountId: accountId,
            // status: 1,
            status_arr: "1,3"
            // _t: Date.parse(new Date()) / 1000
          },
          null,
          true
        )
        .then(data => {
          var result = data.data;
          this.mallList = result.data;
          if (this.mallList.length > 0) {
            this.editForm.mallId = this.mallList[0].id;
            // this.editChangeGetFloor(this.editForm.mallId);
          } else {
            this.editForm.mallId = "";
            this.floorList = [];
            this.editForm.floorId = "";
          }
        })
        .catch(error => {});
    }
    // editChangeGetFloor(mallId) {
    // 	this.$api.base.floor({
    // 			mallId: mallId
    // 	})
    // 		.then((data) => {
    // 			var result = data.data;
    // 			this.floorList = result.data;
    // 			if (this.floorList.length > 0) {
    // 				this.editForm.floorId = this.floorList[0].id;
    // 			} else {
    // 				this.editForm.floorId = ''
    // 			}
    // 		})
    // 		.catch((error) => { })
    // }
  }
};
</script>

<style scoped>
.year-inp {
  height: 300px;
}

.bind-btn-box {
  /* padding: 0 6px; */
}

.manage-date-inp {
  width: 100%;
}

.middle-wrapper {
  margin-top: -51px;
}
</style>