yos_web/src/WebsiteManagement/serviceAppointMag/index.vue

<template>
  <basicLayout
    style="padding-top: 0 !important"
    ref="basicLayout"
    tableName="servicAppointTable"
    idName="sa_endcustserviceorderid"
    :apiId="{ query: 20240902102903, del: '' }"
    :detailPath="{ path: '/serviceAppointMagDetail' }"
    :isExport="false"
    :autoQuery="false"
  >
    <template #custom>
      <div class="mt-10">
        <label class="search__label">{{ $t("状态") }}:</label>
        <el-select
          class="inline-24"
          v-model="whereSelect.status"
          :placeholder="$t('请选择状态')"
          @change="selectChange"
          size="small"
          clearable
        >
          <el-option :label="$t(`待确认`)" value="待确认"></el-option>
          <el-option :label="$t(`已确认`)" value="已确认"></el-option>
          <el-option :label="$t(`服务中`)" value="服务中"></el-option>
          <el-option :label="$t(`已结束`)" value="已结束"></el-option>
          <el-option :label="$t(`已拒绝`)" value="已拒绝"></el-option>
        </el-select>
      </div>
      <div class="mt-10">
        <label class="search__label">{{$t('提交日期')}}:</label>
        <el-date-picker
          v-model="date"
          style="margin-right: 24px !important"
          size="small"
          type="daterange"
          value-format="yyyy-MM-dd"
          :range-separator="$t('至')"
          :start-placeholder="$t('开始日期')"
          :end-placeholder="$t('结束日期')"
          :default-time="['00:00:00', '23:59:59']"
          @change="selectChange"
        >
        </el-date-picker>
      </div>
    </template>
    <template v-slot:tbList="scope">
      <div
        v-if="scope.data.column.columnname == 'status'"
        :style="
          styleSet(scope.data.column.data[[scope.data.column.columnname]])
        "
      >
        {{ $t(scope.data.column.data[[scope.data.column.columnname]]) }}
      </div>
      <div v-else-if="scope.data.column.columnname == 'province'">
        {{
          scope.data.column.data[[scope.data.column.columnname]]
            ? scope.data.column.data[[scope.data.column.columnname]] +
              "-" +
              scope.data.column.data.county +
              "-" +
              scope.data.column.data.city
            : "--"
        }}
      </div>
      <div v-else>
        {{
          scope.data.column.data[[scope.data.column.columnname]]
            ? $t(scope.data.column.data[[scope.data.column.columnname]])
            : "--"
        }}
      </div>
    </template>
  </basicLayout>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      siteid: JSON.parse(sessionStorage.getItem("active_account")).siteid,
      date: [],
      whereSelect: {
        status: "",
        begindate: "",
        enddate: "",
      },
    };
  },
  mounted() {
    this.listData();
  },
  methods: {
    listData() {
      this.$refs.basicLayout.param.content.siteid = this.siteid;
      this.$refs.basicLayout.listData(
        (this.$refs.basicLayout.param.content.pageNumner = 1)
      );
    },
    selectChange() {
      this.$refs.basicLayout.param.content.where = this.whereSelect;
      if (this.date) {
        this.whereSelect.begindate = this.date[0];
        this.whereSelect.enddate = this.date[1];
      } else {
        this.whereSelect.begindate = "";
        this.whereSelect.enddate = "";
      }
      this.listData();
    },
    styleSet(val) {
      let style;
      style = {
        待确认: { color: "#d90a0a" },
        已确认: { color: "#79da56" },
        服务中: { color: "#1376e7" },
        已结束: { color: "#151515" },
        已拒绝: { color: "#151515" },
      }[val];
      return style;
    },
  },
};
</script>

<style scoped>
</style>