qms/src/views/modules/customerquality/components/innerTable.vue

<!--
 * @Author: zhp
 * @Date: 2023-04-18 09:19:02
 * @LastEditTime: 2023-07-17 16:59:22
 * @LastEditors: zhp
 * @Description: 
-->
<template>
  <div>
    <el-popover placement="right" width="400" trigger="click">
      <SearchBar :formConfigs="formConfig" ref="ruleForm" @headBtnClick="buttonClick">
        <!-- <el-badge :value="5" class="item">
            <el-button type="primary" size="small" @click="conditionSearch">条件搜索</el-button>
          </el-badge> -->
      </SearchBar>
      <base-table id="palletTable" :table-props="tableProps" ref="palletTable1" :table-data="tableData">
      </base-table>
      <i slot="reference" class="el-icon-plus" @click="showInnerTable(injectData.id)" />
    </el-popover>
    <baseConfigFile-add ref="baseConfigFileAddList" v-if="baseConfigFileAddShow" @refreshDataList="getDataList"></baseConfigFile-add>
  </div>
</template>
<script>
import i18n from "@/i18n"
import { timeFormatter } from '@/filters'
import baseConfigFileAdd from "./baseConfigFile-add"

const tableProps = [
  {
    prop: "stageOneName",
    label: i18n.t('researchquality.stageOneName'),
  },
  {
    prop: "stageOneDate",
    label: i18n.t('researchquality.stageOneDate'),
    filter: timeFormatter
  },
    {
      prop: "stageTwoName",
      label: i18n.t('researchquality.stageTwoName'),
  },,
  {
    prop: "stageTwoDate",
    label: i18n.t('researchquality.stageTwoDate'),
    filter: timeFormatter
  },
    {
      prop: "stageThreeName",
      label: i18n.t('researchquality.stageThreeName'),
  },
  {
    prop: "stageThreeDate",
    label: i18n.t('researchquality.stageThreeDate'),
    filter: timeFormatter
  },
    {
      prop: "stageFourName",
      label: i18n.t('researchquality.stageFourName'),
  },
  {
    prop: "stageFourDate",
    label: i18n.t('researchquality.stageFourDate'),
    filter: timeFormatter
  }
];
export default {
  name: 'InnerTable',
  props: {
    injectData: {
      type: Object,
      default: () => ({})
    },
    itemProp: {
      type: String
    }
  },
  data() {
    return {
      tableProps,
      list: this.injectData,
      urlOptions: {
        submitURL: "/customerquality/qmsPublicDocuments",
        infoURL: "/customerquality/qmsPublicDocuments//{id}",
        getCodeURL: '/customerquality/qmsPublicDocuments/getCode',
        getDataListURL: '/customerquality/knowledgeBaseRequirementListData/page'
      },
      baseConfigFileAddShow:false,
      tableData: [],
      listQuery: {
        limit: 10,
        page:1,
      },
      formConfig: [
        {
          type: "button",
          btnName: i18n.t('search'),
          name: "search",
          color: "primary",
          // plain: true,
        },
        {
          type: "button",
          btnName: i18n.t('add'),
          name: "add",
          color: "success",
          plain: true
        },
      ],
    }
  },
  components: {
    baseConfigFileAdd,
  },
  methods: {
    buttonClick(val) {
      console.log(val)
      switch (val.btnName) {
        case "search":
          this.listQuery.page = 1;
          this.getDataList()
          break;
        // case "export":
        //   // this.listQuery.paramCode = val.paramCode;
        //   this.exportHandle()
        //   break;
        case "add":
          // this.addOrEditTitle = '新增'
          // this.addOrUpdateVisible = true;
          this.baseConfigFileAddShow = true
          this.$nextTick(() => {
            this.$refs.baseConfigFileAddList.init(this.injectData.id)
          })
          // this.addOrUpdateHandle()
          break;
        default:
      }
    },
    showInnerTable() {
      this.listQuery.knowledgeBaseRequirementListId = this.injectData.id
      this.getDataList()
    },
    getDataList() {
      this.dataListLoading = true;
      this.$http
        .get(this.urlOptions.getDataListURL, {
          params: this.listQuery,
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.tableData = [];
            this.listQuery.total = 0;
            return this.$message.error(res.msg);
          }
          this.tableData = res.data.list;
          this.listQuery.total = res.data.total;
        })
        .catch(() => {
          this.dataListLoading = false;
        })
    },
  }
}
</script>