peisweb/src/components/third/ThirdMedicalCenterBookDateList.vue

<template>
  <div>
    <div>
      <div class="contenttitle">
        明细记录
      </div>
      <!--公共表分类信息-->
      <div style="display: flex; font-size: 14px">
        <div :style="'display: block;width:' + (window.pageWidth - window.pageMarginWidth - 110 - 5) + 'px;'">
          <el-table id="thirdMedicalCenterBookingDate" :data="thirdMedicalCenterBookingDate"
            ref="thirdMedicalCenterBookingDate" row-key="id" border :height="`${tableHeight}px`" size="small"
            highlight-current-row :row-class-name="handleRowClassName">

            <el-table-column type="index" label="序号" width="50" align="center" />
            <el-table-column label="体检中心" prop="thirdMedicalCenterId" min-width="200" align="center" />
            <el-table-column prop="bookingDate" label="可约日期" min-width="130" align="center" />

          </el-table>
        </div>
        <!--按钮-->
        <div style="display: block; margin-left: 5px">
          <div style="margin-top: 5px">
            <el-button class="commonbutton" @click="btnSetBookDate">设置预约日期</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增或者编辑弹框 -->
    <el-dialog title="设置可预约日期" :close-on-click-modal="false" :visible.sync="setting" width="240px"
      @close="close_setting">
      <div>
        <el-table :data="form.bookingDates" border height="480px" size="small" highlight-current-row
          :row-class-name="handleRowClassName" row-key="id">
          <el-table-column label="可约日期" min-width="150" align="center">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.bookingDate" type="date" placeholder="可约日期" size="small"
                value-format="yyyy-MM-dd" style="width: 150px;"  />
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="60" align="center">
            <template slot-scope="scope">
              <i class="el-icon-delete" @click="form.bookingDates.splice(scope.$index, 1)"
                style="font-size: 24px;color: red;cursor:pointer;"></i>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button class="commonbutton" @click="form.bookingDates.push({ id: Math.random(), bookingDate: '' })">新增</el-button>
          <el-button class="commonbutton" @click="btnSubmit">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--  -->
  </div>
</template>
<script>
import moment from "moment";
import Sortable from "sortablejs";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { mapState } from "vuex";
import {
  getPagePriv,
  checkPagePriv,
  dddw,
  deepCopy,
  objCopy,
  arrayExistObj,
} from "../../utlis/proFunc";



export default {
  components: {

  },
  data() {
    return {
      pagePriv: {
        routeUrlorPageName: "commonTable", //当前页面归属路由或归属页面权限名称
        privs: [], // 页面权限
      },

      thirdMedicalCenterBookingDate: [], // 公共表
      setting: false,
      form: {
        thirdMedicalCenterId: "",
        bookingDates: []
      }

    };
  },
  computed: {
    ...mapState(["pickerOptions", "personnelUnit", "window", "dict", "dialogWin", "dataTransOpts"]),

    tableHeight() {
      let h = this.window.pageHeight < 600 ? 600 : this.window.pageHeight
      return h - this.window.pageHeaderHeight - this.window.cardHeaderHeight - this.window.pageMarginHeight - 360
    },
  },

  created() {
    //获取用户当前页面的权限
    let userPriv = window.sessionStorage.getItem("userPriv");
    if (userPriv)
      this.pagePriv.privs = deepCopy(getPagePriv(this.pagePriv.routeUrlorPageName));

    // 清除当前选中的分组ID
    this.dataTransOpts.tableS.third_medical_center_booking_date.id = ''



  },

  mounted() {
    //获取初始数据（单位、适用性别）
    this.dictInit();
  },
  methods: {
    moment,
    checkPagePriv,
    dddw,
    deepCopy,

    getList(body) {
      // body = {
      //   "thirdMedicalCenterId": "string",
      //   "keyWord": "string"
      // }
      this.thirdMedicalCenterBookingDate = []
      if (!body.thirdMedicalCenterId) return
      postapi('/api/app/ThirdMedicalCenter/GetThirdMedicalCenterBookingDateList', body).then(res => {
        if (res.code > -1) {
          this.thirdMedicalCenterBookingDate = res.data
        }
      })

    },

    btnSubmit() {
      let body = {
        thirdMedicalCenterId: this.form.thirdMedicalCenterId,
        bookingDates: []
      }

      this.form.bookingDates.forEach(e => {
        if (e.bookingDate) body.bookingDates.push(e.bookingDate)
      });


      postapi('/api/app/ThirdMedicalCenter/CreateThirdMedicalCenterBookingDate', body)
        .then(res => {
          if (res.code > -1) {
            this.setting = false
          }
        })
    },

    close_setting() {
      this.getList({ thirdMedicalCenterId: this.dataTransOpts.tableS.third_medical_center.id })
    },

    //选中颜色
    handleRowClassName({ row, rowIndex }) {
      // highLightBg 为 'selected'的高亮
      //console.log(rowIndex, row)
      //return row.highLightBg == 'selected' ? 'high-light-bg' : '';
      if (row.choosed) {
        return "current-row";
      } else {
        return "";
      }
    },

    //获取初始数据
    dictInit() {

    },

    btnSetBookDate() {
      if (!this.dataTransOpts.tableS.third_medical_center.id) {
        this.$message.warning({ showClose: true, message: '未选择体检中心' })
        return
      }

      this.form.thirdMedicalCenterId = this.dataTransOpts.tableS.third_medical_center.id      
      this.form.bookingDates = deepCopy(this.thirdMedicalCenterBookingDate)

      this.setting = true

    }
  },

  //监听事件
  watch: {
    // 刷新公共表数据
    "dataTransOpts.refresh.third_medical_center_booking_date.M": {
      // immediate:true,
      handler(newVal, oldVal) {
        console.log(`watch 公共表分类 newVal:${newVal} oldVal:${oldVal} thirdMedicalCenterId: ${this.dataTransOpts.tableS.third_medical_center.id}`);
        if (newVal != oldVal) this.getList({ thirdMedicalCenterId: this.dataTransOpts.tableS.third_medical_center.id });
      }
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/global_button.css";
@import "../../assets/css/global_dialog.css";
@import "../../assets/css/global_table.css";
@import "../../assets/css/global_form.css";
@import "../../assets/css/global_input.css";
@import "../../assets/css/global.css";

.btnClass {
  width: 100px;
  margin-bottom: 5px;
}
</style>