yos_web/src/SDrpManagement/QuotedPrice/index.vue

<template>
  <div>
    <basicLayout
      customClassName="quotedPriceList"
      ref="quotedPriceList"
      formPath="QuotedPrice"
      tableName="quotedPriceTable"
      idName="sa_quotedpriceid"
      :apiId="{ query: 20221020165103, del: 20221020165503 }"
      :options="options"
      :isExport="false"
      :autoQuery="false"
      :specialKey="[
        { key: 'leader', value: 'name' },
        { key: 'tag_sys', value: null },
        { key: 'industry', value: null },
      ]"
      :detail-path="{ path: '/quotedPriceDetail' }"
    >
      <template #titleRight>
        <div>
          <exportFile :param="param" fileName="报价单" ></exportFile>
        </div>
      </template>
      <template #custom>
        <div class="mt-10">
          <label class="search__label">{{ $t("范围") }}:</label>
          <el-select
            class="inline-24"
            v-model="tabName"
            :placeholder="$t(`请选择数据分类`)"
            @change="selectChange"
            size="small"
          >
            <el-option
              v-for="item in editableTabs"
              :key="item.index"
              :label="$t(item.templetname)"
              :value="item.templetid"
            ></el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label class="search__label">{{ $t("报价类型") }}:</label>
          <el-select
            class="inline-24"
            v-model="selectParam.isproject"
            :placeholder="$t(`请选择报价类型`)"
            @change="selectChange"
            size="small"
            clearable
          >
            <el-option
              v-for="item in isprojectList"
              :key="item.value"
              :label="$t(item.label)"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label class="search__label">{{ $t("状态") }}:</label>
          <el-select
            class="inline-24"
            v-model="selectParam.status"
            :placeholder="$t(`请选择状态`)"
            @change="selectChange"
            size="small"
            clearable
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="$t(item.value)"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="mt-10">
          <label class="search__label">{{ $t("创建日期") }}:</label>
          <el-date-picker
            style="margin-right: 24px !important"
            size="small"
            @change="selectChange"
            value-format="yyyy-MM-dd"
            v-model="dateSelect"
            type="daterange"
            :range-separator="$t(`至`)"
            :start-placeholder="$t(`开始日期`)"
            :end-placeholder="$t(`结束日期`)"
            clearable
          >
          </el-date-picker>
        </div>
      </template>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname === 'specialoffer'">
          <div v-if="scope.data.column.data.specialoffer === 0">
            {{ $t("否") }}
          </div>
          <div v-else-if="scope.data.column.data.specialoffer === 1">
            {{ $t("是") }}
          </div>
          <div v-else>--</div>
        </div>
        <div v-else-if="scope.data.column.columnname === 'tag'">
          <div
            v-for="item in scope.data.column.data.tag"
            :key="item.index"
            style="float: left; margin-left: 5px; margin-bottom: 5px"
          >
            <el-tag type="warning" size="mini">
              <span>{{ $t(item) }}</span>
            </el-tag>
          </div>
          <div
            v-for="item in scope.data.column.data.tag_sys"
            :key="item.index"
            style="float: left; margin-left: 5px; margin-bottom: 5px"
          >
            <el-tag size="mini">
              <span>{{ $t(item) }}</span>
            </el-tag>
          </div>
        </div>
        <div v-else-if="scope.data.column.columnname === 'leader'">
          <span>{{
            scope.data.column.data.leader.length !== 0
              ? scope.data.column.data.leader[0].name
              : "--"
          }}</span>
        </div>
        <div v-else-if="scope.data.column.columnname === 'status'">
          <span
            style="color: #3874f6"
            v-if="
              scope.data.column.data[[scope.data.column.columnname]] == '新建'
            "
            >{{
              $t(scope.data.column.data[[scope.data.column.columnname]])
            }}</span
          >
          <span
            style="color: #67C23A"
            v-else-if="
              scope.data.column.data[[scope.data.column.columnname]] == '提交'
            "
            >{{
              $t(scope.data.column.data[[scope.data.column.columnname]])
            }}</span
          >
          <span
            style="color: #e6a23c"
            v-else-if="
              scope.data.column.data[[scope.data.column.columnname]] == '审核'
            "
            >{{
              $t(scope.data.column.data[[scope.data.column.columnname]])
            }}</span
          >
          <span
            style="color: #e6a23c"
            v-else-if="
              scope.data.column.data[[scope.data.column.columnname]] == '复核'
            "
            >{{
              $t(scope.data.column.data[[scope.data.column.columnname]])
            }}</span
          >
          <span
            v-else
            >{{
              $t(scope.data.column.data[[scope.data.column.columnname]])
            }}</span
          >
        </div>
        <div v-else-if="scope.data.column.columnname === 'invaliddate'">
          <p>
            {{
              scope.data.column.data.begdate
                ? scope.data.column.data.begdate +
                  $t("至") +
                  scope.data.column.data.enddate
                : "--"
            }}
          </p>
        </div>
        <div v-else-if="scope.data.column.columnname === 'salesman'">
          <!--          {{issaler?'&#45;&#45;':scope.data.column.data.createby}}-->
          <span>{{
            scope.data.column.data.leader.length !== 0
              ? scope.data.column.data.leader[0].name
              : "--"
          }}</span>
        </div>
        <div v-else-if="scope.data.column.columnname === 'distributor'">
          {{ issaler ? scope.data.column.data.enterprisename : "--" }}
        </div>
        <div v-else>
          {{
            scope.data.column.data[[scope.data.column.columnname]]
              ? $t(scope.data.column.data[[scope.data.column.columnname]])
              : "--"
          }}
        </div>
      </template>
      <!--      <template v-slot:tbOpreation="scope">
        <el-button size="mini" type="text" @click="$router.push({path:'/quotedPriceDetail',query:{id:scope.data.data.sa_quotedpriceid,rowindex:scope.data.data.rowindex}})">详情</el-button>
      </template>-->
    </basicLayout>
  </div>
</template>

<script>
import importExcel from "./modules/importQuotedPrice.vue";
import exportFile from "@/components/export_file/index2";
import {mapGetters} from "vuex";
export default {
  name: "index",
  components: {
    importExcel,
    exportFile,
  },
  data() {
    return {
      issaler: false,
      options: [],
      tabName: "",
      tabIndex: "1",
      dateSelect: "",
      editableTabs: [],
      statusList: [
        {
          value: "新建",
        },
        {
          value: "提交",
        },
        {
          value: "审核",
        },
        {
          value: "复核",
        },
      ],
      isprojectList: [
        {
          label: "客户报价",
          value: "0",
        },
        {
          label: "项目报价",
          value: "1",
        },
      ],
      selectParam: {
        status: "",
        isproject: "",
        startdate: "",
        enddate: "",
      },
      param: {},
    };
  },
  methods: {
    selectChange() {
      this.tabIndex = this.tabName;
      let sort = [
        {
          reversed: 0,
          sorted: 1,
          sortid: 71,
          sortname: "默认",
        },
        {
          reversed: 0,
          sorted: 1,
          sortid: 136,
          sortname: "站点全部",
        },
      ];
      if (this.dateSelect !== "" && this.dateSelect !== null) {
        this.selectParam.startdate = this.dateSelect[0];
        this.selectParam.enddate = this.dateSelect[1];
      } else {
        this.selectParam.startdate = "";
        this.selectParam.enddate = "";
      }
      this.$refs.quotedPriceList.param.content.type = this.tabIndex;
      this.$refs.quotedPriceList.param.content.where = this.selectParam;
      if (this.tabIndex == "99") {
        this.$refs.quotedPriceList.param.content.sort = [sort[1]];
      } else {
        this.$refs.quotedPriceList.param.content.sort = [sort[0]];
      }
      this.param = this.$refs.quotedPriceList.param;
      this.$refs.quotedPriceList.listData(this.$refs.quotedPriceList.param.content.pageNumber = 1);
    },
    /*是否经销商*/
    async isSaler() {
      const res = await this.$api.requested({
        classname: "common.usercenter.usercenter",
        content: {},
        method: "queryUserMsg",
      });
      this.issaler = res.data.hr.issaler;
    },
    async queryUserInfo() {
      let res = await this.$api.requested({
        classname: "common.usercenter.usercenter",
        method: "queryUserMsg",
        content: {},
      });

      this.userInfo = {
        isAuth: res.data.hr.isleader,
        userid: res.data.hr.userid,
      };
      console.log(this.userInfo, "user");
      window.sessionStorage.setItem("userInfo", JSON.stringify(this.userInfo));
      console.log(JSON.parse(window.sessionStorage.getItem("userInfo")));
    },
    list(param) {
      param.content.isAll = 0;
      param.content.deleted = 0;
      param.content.type = this.tabName;
    },
    list2(data) {},
    async querytemplet() {
      const res = await this.$api.requested({
        classname: "sysmanage.develop.querytemplet.querytemplet",
        method: "query",
        content: {},
      });
      this.editableTabs = res.data;

      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].templetname == "站点全部") {
          this.tabName = res.data[i].templetid;
          break;
        } else {
          this.tabName = res.data[0].templetid;
        }
      }
      this.selectChange();
    },
    async onExport() {
      const res = await this.$api.requested({
        id: 20221020165103,
        content: {
          type: this.tabName,
          pageNumber: 1,
          pageSize: 20,
          isAll: 1,
          isExport: 1, //0：不导出，1：导出
          where: {
            condition: "",
            startdate: "",
            enddate: "",
          },
        },
      });
      window.open(res.data, "_self");
    },
  },
  mounted() {
    this.isSaler();
    this.querytemplet();
  },
  computed:{
    ...mapGetters({
      closeDrawerTemp:'closeDrawerTemp',
      historyRouter:'historyRouter'
    })
  },
  watch:{
    closeDrawerTemp (val) {
      if (!this.editableTabs){
        this.querytemplet()
      }
    }
  },
  created() {
    this.queryUserInfo();
  },
};
</script>

<style scoped>
</style>