VOL常用---页面vue扩展(如gridHeader,modelHeader等)

---

页面vue扩展(如gridHeader,modelHeader等)

1.vue表单(volForm)

<template>
  <div style="padding: 15px 20px 15px 5px">
    <vol-form
      ref="form"
      :labelWidth="100"
      :load-key="false"
      :formFields="fields"
      :formRules="formOptions"
    >
    </vol-form>

    <div class="form-btns">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button type="primary" @click="reset" plain>重置</el-button>
    </div>
  </div>
</template>

<script>
// 使用方式：
// 1、新建一个vue页面，把此页面内容复制进去
// 2、router->index.js配置路由，页面上输入地址即可看到数据(也可以把菜单配置上)
// 3、或者参照表单设计页面做动态页面
//**表单设计器的table下载还在开发中

import VolForm from "@/components/basic/VolForm";
export default {
  components: { "vol-form": VolForm },
  data() {
    return {
      text: "",
      tabsModel: "0",
      fields: {
        CHANGE_TYPE: null,
        CHANGE_CONTENT: null,
        CHANGE_RESULT: null,
        CHANGE_TIME: null,
        CHANGE_SCHEME: null,
        DEVELOPMENT_PROJECT_NO: null,
        OLD_SOFTWARE_VERSION: null,
        NEW_SOFTWARE_VERSION: null,
        OLD_HARDWARE_VERSION: null,
        NEW_HARDWARE_VERSION: null,
        PROJECT_DETAIL_ID: null,
      },
      formOptions: [
        [
          {
            field: "CHANGE_TYPE",
            title: "变更类型",
            type: "select",
            required: false,
            readonly: false,
            colSize: 6,
            data: [
              { key: "1", value: "部分变更" },
              { key: "2", value: "全部变更" },
            ],
            dataKey: "变更类型",
          },
          {
            field: "CHANGE_CONTENT",
            title: "变更内容",
            type: "text",
            required: false,
            readonly: false,
            colSize: 6,
          },
        ],
        [
          {
            field: "CHANGE_RESULT",
            title: "变更结论",
            type: "select",
            required: false,
            readonly: false,
            colSize: 6,
            data: [
              { key: "1", value: "成功" },
              { key: "2", value: "失败" },
            ],
            dataKey: "变更结论",
          },
          {
            field: "CHANGE_TIME",
            title: "变更时间",
            type: "datetime",
            required: false,
            readonly: true,
            colSize: 6,
          },
        ],
        [
          {
            field: "CHANGE_SCHEME",
            title: "修改方案",
            type: "text",
            required: false,
            readonly: false,
            colSize: 6,
          },
          {
            field: "DEVELOPMENT_PROJECT_NO",
            title: "研发方案编号",
            type: "text",
            required: false,
            readonly: true,
            colSize: 6,
          },
        ],
        [
          {
            field: "OLD_SOFTWARE_VERSION",
            title: "原软件版本号",
            type: "text",
            required: false,
            readonly: true,
            colSize: 6,
          },
          {
            field: "NEW_SOFTWARE_VERSION",
            title: "新软件版本号",
            type: "text",
            required: false,
            readonly: false,
            colSize: 6,
          },
        ],
        [
          {
            field: "OLD_HARDWARE_VERSION",
            title: "原硬件版本号",
            type: "text",
            required: false,
            readonly: true,
            colSize: 6,
          },
          {
            field: "NEW_HARDWARE_VERSION",
            title: "新硬件版本号",
            type: "text",
            required: false,
            readonly: false,
            colSize: 6,
          },
        ],
      ],
      tables: [],
      tabs: [],
    };
  },
  created() {
    this.fieldInit();
  },
  methods: {
    getCurrentTime() {
      const now = new Date();
      return `${now.getFullYear()}-${(now.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")} ${now
        .getHours()
        .toString()
        .padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}:${now
        .getSeconds()
        .toString()
        .padStart(2, "0")}`;
    },
    fieldInit() {
      // let $parent = null;
      // //当前是子页面，获取查询viewgrid页面的对象()
      // this.$emit("parentCall", ($this) => {
      //   $parent = $this;
      // });
      let dRow = this.$store.getters.data().prjDetail.dRow;
      this.fields.DEVELOPMENT_PROJECT_NO = this.$store.getters.data().prjDetail.devID;
      this.fields.OLD_SOFTWARE_VERSION = dRow.SOFTWARE_VERSION;
      this.fields.OLD_HARDWARE_VERSION = dRow.HARDWARE_VERSION;
      this.fields.CHANGE_TIME = this.getCurrentTime();
      //研发变更隐式传值保存研发详细编号id
      this.fields.PROJECT_DETAIL_ID = this.$store.getters.data().prjDetail.proDID;
    },
    submit() {
      let data = {
        delKeys: null,
        detailData: null,
        mainData: this.fields,
      };
      let Url = "api/CY_RD_PROJECT_CHANGE_RECOND/Add";
      this.http.post(Url, data, true).then((result) => {
        if (result.status == true) {
          this.$Message.success("提交成功");
          this.reset();
          this.$emit("call-parent-method");
        } else {
          this.$Message.success("提交失败");
        }
      });
    },
    reset() {
      this.$refs.form.reset();
    },
    download() {
      this.$Message.info("111");
    },
  },
};

</script>
<style lang="less" scoped>
.form-btns {
  text-align: center;
}
</style>

2.grid-系列

1) gridHeader-多vol-box嵌套volForm嵌套Tabs

<template>
  <div>
    <vol-box
      :lazy="true"
      v-model="model.box3"
      title="研发方案变更"
      :height="400"
      :width="1000"
      :padding="15"
    >
      <RD_PROJECT_CHANGE_RECOND_FORM @call-parent-method="handleCallFromChild"/>
    </vol-box>

    <vol-box
      :lazy="true"
      v-model="model.box2"
      title="业 务"
      :height="400"
      :width="1024"
      :padding="10"
    >
      <div>
        <el-tabs type="border-card" style="height: 600px">
          <!-- <el-tab-pane>
            <template #label>
              <span><i class="el-icon-date"></i> 研发方案</span>
            </template>
            <CY_RD_PROJECT />
          </el-tab-pane>
          <el-tab-pane :lazy="true" label="研发方案明细"
            ><CY_RD_PROJECT_DETAIL
          /></el-tab-pane> -->
          <el-tab-pane :lazy="true" label="产品详细信息"
            ><CY_RD_PRODUCT_DETAIL
          /></el-tab-pane>
          <el-tab-pane :lazy="true" label="研发方案变更"
            ><CY_RD_PROJECT_CHANGE_RECOND
          /></el-tab-pane>
          <!-- <el-tab-pane :lazy="true"
                            label="定时任务补偿">定时任务补偿</el-tab-pane> -->
        </el-tabs>
      </div>
    </vol-box>
  </div>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
import RD_PROJECT_CHANGE_RECOND_FORM from "@/extension/business/cy_dev_business/extend/RD_PROJECT_CHANGE_RECOND_FORM.vue";
// import CY_RD_PROJECT from "@/extension/Cy_dev_business/tabs_view/CY_RD_PROJECT.vue";
// import CY_RD_PROJECT_DETAIL from "@/extension/Cy_dev_business/tabs_view/CY_RD_PROJECT_DETAIL.vue";
import CY_RD_PRODUCT_DETAIL from "@/extension/Cy_dev_business/tabs_view/CY_RD_PRODUCT_DETAIL.vue";
import CY_RD_PROJECT_CHANGE_RECOND from "@/extension/Cy_dev_business/tabs_view/CY_RD_PROJECT_CHANGE_RECOND.vue";
export default {
  components: {
    "vol-box": VolBox,
    // CY_RD_PROJECT: CY_RD_PROJECT,
    CY_RD_PROJECT_CHANGE_RECOND: CY_RD_PROJECT_CHANGE_RECOND,
    // CY_RD_PROJECT_DETAIL: CY_RD_PROJECT_DETAIL,
    CY_RD_PRODUCT_DETAIL: CY_RD_PRODUCT_DETAIL,
    RD_PROJECT_CHANGE_RECOND_FORM: RD_PROJECT_CHANGE_RECOND_FORM,
  },
  methods: {},
  data() {
    return {
      model: {
        box2: false,
        box3: false,
      },
    };
  },
  methods: {
    handleCallFromChild() {
      this.model.box3 = false;
    },
    //弹出框2
    open2() {
      this.model.box2 = true;
    },
    //弹出框3
    open3() {
      this.model.box3 = true;
    },
  },
};
</script>

2) gridFooter-grid底部主从一对多

<template>
  <div class="tabs">
    <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick">
      <el-tab-pane :lazy="true" label="研发产品BOM清单" name="bom"
        ><CY_RD_COMPONENT_DETAIL_LIST ref="bom"
      /></el-tab-pane>
      <el-tab-pane :lazy="true" label="检测报告" name="check"
        ><CY_RD_PRODUCT_TEST_REPORT ref="check"
      /></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import CY_RD_COMPONENT_DETAIL_LIST from "@/extension/Cy_dev_business/tabs_view/CY_RD_COMPONENT_DETAIL_LIST.vue";
import CY_RD_PRODUCT_TEST_REPORT from "@/extension/Cy_dev_business/tabs_view/CY_RD_PRODUCT_TEST_REPORT.vue";
export default {
  components: {
    CY_RD_COMPONENT_DETAIL_LIST: CY_RD_COMPONENT_DETAIL_LIST,
    CY_RD_PRODUCT_TEST_REPORT: CY_RD_PRODUCT_TEST_REPORT,
  },
  methods: {},
  data() {
    return {
      activeName: "bom", //默认显示BOM清单
    };
  },
  methods: {
    tabClick(tab) {
        console.log('选项卡点击事件');
    }, //点击tab时触发的事件，可以在这里处理tab的点击事件
    rowClick() {
        this.$refs.bom.$refs.grid.search();
        this.$refs.check.$refs.grid.search();
    }, //行点击事件，可以在这里处理行点击事件
  },
};
</script>

<style>
.tabs{
    padding: 15px;
}
</style>

3.model弹出框-系列

1) modelBody选择数据

<template>
  <VolBox
    v-model="model"
    :lazy="true"
    title="选择产品信息"
    :height="800"
    :width="1000"
    :padding="15"
  >
    <!-- 设置查询条件 -->
    <div style="padding-bottom: 10px">
      <span style="margin-right: 20px">编号</span>
      <el-input
        placeholder="请输入产品编号"
        style="width: 200px"
        v-model="PRODUCT_CODE"
      />
      <span style="margin: 0 20px">名称</span>
      <el-input
        placeholder="请输入产品名称"
        style="width: 200px; margin-left: 10px"
        v-model="PRODUCT_NAME"
      />
      <span style="margin: 0 20px">型号</span>
      <el-input
        placeholder="请输入产品型号"
        style="width: 200px; margin-left: 10px"
        v-model="PRODUCT_TYPE"
      />
      <el-button
        type="primary"
        style="margin-left: 10px"
        size="small"
        icon="Search"
        @click="search"
        >搜索</el-button
      >
    </div>

    <!-- vol-table配置的这些属性见VolTable组件api文件 -->
    <vol-table
      ref="mytable"
      :loadKey="true"
      :columns="columns"
      :pagination="pagination"
      :pagination-hide="false"
      :max-height="380"
      :url="url"
      :index="true"
      :single="true"
      :defaultLoadPage="defaultLoadPage"
      @loadBefore="loadTableBefore"
      @loadAfter="loadTableAfter"
    ></vol-table>
    <!-- 设置弹出框的操作按钮 -->
    <template #footer>
      <div>
        <el-button type="primary" @click="addRow()">添加选择的数据</el-button>
        <el-button @click="model = false">关闭</el-button>
      </div>
    </template>
  </VolBox>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
import VolTable from "@/components/basic/VolTable.vue";
export default {
  components: {
    VolBox: VolBox,
    VolTable: VolTable,
  },
  data() {
    return {
      model: false,
      defaultLoadPage: true, //第一次打开时不加载table数据，openDemo手动调用查询table数据
      PRODUCT_CODE: "", //查询条件字段  产品详细信息编号
      PRODUCT_NAME: "", //查询条件字段  产品详细信息名称
      PRODUCT_TYPE: "", //查询条件字段  产品型号
      modelType: "",
      url: "api/CY_RD_PRODUCT_INFO/GetPageData", //加载数据的接口
      columns: [
        {
          field: "PRODUCT_ID",
          title: "ID",
          type: "long",
          width: 80,
          hidden: true,
          readonly: true,
          require: true,
          align: "left",
        },
        {
          field: "PRODUCT_CODE",
          title: "产品编码",
          type: "string",
          link: true,
          width: 110,
          align: "left",
          sort: true,
        },
        {
          field: "PRODUCT_TYPE",
          title: "产品型号",
          type: "string",
          bind: { key: "产品型号", data: [] },
          width: 110,
          align: "left",
        },
        {
          field: "PRODUCT_NAME",
          title: "产品名称",
          type: "string",
          bind: { key: "产品名称", data: [] },
          width: 110,
          align: "left",
        },
        {
          field: "PRODUCT_CATEGID",
          title: "产品类别",
          type: "string",
          bind: {
            key: "产品分类",
            data: [
              { key: "1", value: "电能表" },
              { key: "2", value: "采集终端" },
              { key: "3", value: "电流互感器" },
              { key: "4", value: "电压互感器" },
            ],
          },
          width: 110,
          align: "left",
        },
        {
          field: "PRODUCT_DESIGN_BASIS",
          title: "产品设计依据",
          type: "string",
          width: 110,
          align: "left",
        },
      ],
      pagination: {}, //分页配置，见voltable组件api
    };
  },
  methods: {
    openDemo(_modelType) {
      this.modelType = _modelType;
      this.model = true;
      //打开弹出框时，加载table数据

      this.$refs.mytable && this.$refs.mytable.load();
    },
    search() {
      //点击搜索
      this.$refs.mytable.load();
    },
    addRow() {
      var rows = this.$refs.mytable.getSelected();
      if (!rows || rows.length == 0) {
        return this.$message.error("请选择行数据");
      }

      //获取回写到明细表的字段
      //使用数组的map()方法对rows数组进行遍历，并返回一个新的数组。
      let _rows = rows.map((row) => {
        console.log(row);
        return {
          PRODUCT_CODE: row.PRODUCT_CODE,
          PRODUCT_TYPE: row.PRODUCT_TYPE,
          PRODUCT_DESIGN_FUNCTION_BASIS: row.PRODUCT_DESIGN_BASIS,
        };
      });

      //回写数据到表单
      this.$emit("parentCall", ($parent) => {
        //将选择的数据合并到表单中(注意框架生成的代码都是大写，后台自己写的接口是小写的)
        //enable是数字类型，框架绑定下拉框的时候要转换成字符串
        // $parent.editFormFields.Development_project_no = rows[0].Development_project_no;
        // $parent.editFormFields.Product_code = rows[0].Product_code;
        $parent.getRow(_rows, this.modelType);
      });
      //关闭当前窗口
      this.model = false;
    },
    //这里是从api查询后返回数据的方法
    loadTableAfter(row) {},
    loadTableBefore(params) {
      //查询前，设置查询条件
      if (this.PRODUCT_CODE) {
        params.wheres.push({
          name: "PRODUCT_CODE",
          value: this.PRODUCT_CODE,
          displayType: "like",
        });
      }
      if (this.PRODUCT_NAME) {
        params.wheres.push({
          name: "PRODUCT_NAME",
          value: this.PRODUCT_NAME,
          displayType: "like",
        });
      }
      if (this.PRODUCT_TYPE) {
        params.wheres.push({
          name: "PRODUCT_TYPE",
          value: this.PRODUCT_TYPE,
          displayType: "like",
        });
      }
      return true;
    },
  },
};
</script>

2)modelFooter弹出框底部(主从一对多)

<template>
  <div class="vol-tabs" style="height: 390px">
    <el-tabs
      type="border-card"
      style="
        min-height: 370px;
        box-shadow: none;
        border-bottom: 0;
        border-top: 1px solid #eee;
      "
    >
      <el-tab-pane>
        <template #label>
          <span><i class="el-icon-date"></i> 研发产品BOM清单</span>
        </template>
        <!-- 显示操作按钮 -->
        <div>
          <el-button type="primary" icon="Close" link @click="del('table1')"
            >删除行</el-button
          >
          <el-button type="success" icon="Plus" link @click="add('table1')"
            >添加行</el-button
          >
          <el-button
            type="info"
            icon="Refresh"
            link
            @click="$refs.table1.load()"
            >刷新</el-button
          >
        </div>
        <!-- :defaultLoadPage="false"打开窗口禁用默认加载数据 -->
        <vol-table
          ref="table1"
          :clickEdit="true"
          :loadKey="true"
          :columns="tableColumns1"
          :pagination-hide="false"
          :height="275"
          :url="table1Url"
          :index="true"
          :defaultLoadPage="false"
          @loadBefore="loadTableBefore"
          @loadAfter="loadTableAfter"
          :beginEdit="beginEdit"
        ></vol-table>
      </el-tab-pane>

      <!-- 从表2 -->
      <el-tab-pane :lazy="false" label="检测报告">
        <template #label>
          <span><i class="el-icon-date"></i> 检测报告</span>
        </template>
        <!-- 从表2配置 ,双击可以开启编辑-->
        <div style="padding-bottom: 10px">
          <el-button type="primary" icon="Close" link @click="del('table2')"
            >删除行</el-button
          >
          <el-button type="success" icon="Plus" link @click="add('table2')"
            >添加行</el-button
          >
          <el-button
            type="info"
            icon="Refresh"
            link
            @click="$refs.table2.load()"
            >刷新</el-button
          >
        </div>
        <vol-table
          ref="table2"
          :loadKey="true"
          :clickEdit="true"
          :columns="tableColumns2"
          :pagination-hide="false"
          :height="275"
          :url="table2Url"
          :defaultLoadPage="false"
          @loadBefore="loadTableBefore"
          @loadAfter="loadTableAfter"
          :index="true"
          :beginEdit="beginEdit"
        ></vol-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
//开发一对多从表需要参照voltable与viewgrid组件api
import VolTable from "@/components/basic/VolTable.vue";
export default {
  components: { VolTable },
  data() {
    return {
      //从表1
      table1Url: "api/CY_RD_COMPONENT_DETAIL_LIST/GetPageData", //table1获取数据的接口
      //表配置的字段注意要与后台返回的查询字段大小写一致
      //COMMENT_PROJECT_NO  PRODUCT_CODE  COMPONENT_CODE  COMPONENT_POSITION  BaseQtyN
      tableColumns1: [
        {
          field: "PRODUCT_DETAIL_LIST_ID",
          title: "ID",
          type: "long",
          width: 110,
          hidden: true,
          align: "left",
        },
        {
          field: "COMMENT_PROJECT_NO",
          title: "元器件清单编号",
          type: "string",
          link: true,
          width: 150,
          require: true,
          align: "left",
          sort: true,
          edit: { type: "text" },
        },
        {
          field: "PRODUCT_CODE",
          title: "产品编码",
          type: "string",
          width: 110,
          require: true,
          align: "left",
          hidden: true,
        },
        {
          field: "PRODUCT_DETAIL_CODE",
          title: "产品详细信息编号",
          type: "string",
          width: 200,
          require: true,
          align: "left",
          edit: { type: "text" },
          hidden: true,
        },
        {
          field: "Mat_Code",
          title: "物料编号",
          type: "string",
          width: 110,
          require: true,
          align: "left",
          edit: { type: "text" },
        },
        {
          field: "COMMENT_NAME",
          title: "物料名称",
          type: "string",
          width: 220,
          require: true,
          align: "left",
          edit: { type: "text" },
        },
        {
          field: "COMMENT_SPEC",
          title: "规格型号",
          type: "string",
          width: 220,
          require: true,
          align: "left",
          edit: { type: "text" },
        },
        {
          field: "COMPONENT_POSITION",
          title: "元器件位号",
          type: "string",
          width: 220,
          require: true,
          align: "left",
          edit: { type: "text" },
        },
        {
          field: "BaseQtyN",
          title: "单位用量",
          type: "decimal",
          width: 110,
          align: "left",
          edit: { type: "decimal" },
        },
        {
          field: "COMPONENT_CODE",
          title: "元器件编号",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          edit: { type: "text" },
        },
      ],
      //从表2
      table2Url: "api/CY_RD_PRODUCT_TEST_REPORT/GetPageData", //table2获取数据的接口
      //表配置的字段注意要与后台返回的查询字段大小写一致
      tableColumns2: [
        {
          field: "PRODUCT_REPORT_ID",
          title: "ID",
          type: "long",
          width: 110,
          hidden: true,
          align: "left",
        },
        {
          field: "PRODUCT_CODE",
          title: "产品编码",
          type: "string",
          link: true,
          width: 110,
          require: true,
          align: "left",
          sort: true,
        },
        {
          field: "TEST_REPORT_CODE",
          title: "检测报告编号",
          type: "string",
          width: 110,
          require: true,
          align: "left",
          edit: { type: "text" },
        },
        {
          field: "TEST_TYPE",
          title: "检测类型",
          type: "string",
          bind: { key: "检测类型(形式评价，入网检测)", data: [] },
          width: 110,
          require: true,
          align: "left",
          edit: { type: "select" },
        },
        {
          field: "TEST_ORGANIZATION",
          title: "检测机构",
          type: "string",
          bind: { key: "检测机构", data: [] },
          width: 110,
          require: true,
          align: "left",
          edit: { type: "select" },
        },
        {
          field: "REPORT_FROM_ORGANIZATION",
          title: "报告出具单位",
          type: "string",
          width: 110,
          require: true,
          align: "left",
          edit: { type: "select" },
          bind: { key: "REPORT_FROM_ORGANIZATION", data: [] },
        },
        {
          field: "REPORT_DATE",
          title: "报告出具日期",
          type: "string",
          width: 110,
          require: true,
          align: "left",
          edit: { type: "date" },
        },
        {
          field: "REPORT_VALID_DATE",
          title: "报告有效期",
          type: "string",
          width: 110,
          require: true,
          align: "left",
          edit: { type: "date" },
        },
        {
          field: "WITNESS_MATERIAL_URL",
          title: "见证材料附件地址",
          type: "string",
          width: 220,
          require: true,
          align: "left",
          edit: { type: "file" },
        },
      ],
    };
  },
  methods: {
    add(table) {
      let $parent = null;
      //当前是子页面，获取查询viewgrid页面的对象()
      this.$emit("parentCall", ($this) => {
        $parent = $this;
      });
      if (table === "table1") {
        if ($parent.editFormFields.PRODUCT_CODE != "") {
          this.$refs.table1.rowData.unshift({
            COMMENT_PROJECT_NO: "",
            PRODUCT_CODE: $parent.editFormFields.PRODUCT_CODE,
            PRODUCT_DETAIL_CODE: $parent.editFormFields.PRODUCT_DETAIL_CODE,
            MODULE_TYPE: "",
            DEVELOPMENT_PROJECT_NO:
              $parent.editFormFields.DEVELOPMENT_PROJECT_NO,
            HARDWARE_VERSION: "",
            COMMENT_NAME: "",
            COMMENT_SPEC: "",
            COMPONENT_CODE: "",
            COMPONENT_POSITION: "",
            // WRITE_DATE: "",
            // HANDLE_FLAG: "",
            // HANDLE_DATE: "",
            // NOTICE_NO: "",
            // ENTERPRISE_CODE: "",
            BaseQtyN: "",
            PRODUCT_DETAIL_ID: 0,
          });
        } else {
          this.$Message.info("请先选择研发方案");
        }
      } else if (table === "table2") {
        if ($parent.editFormFields.PRODUCT_CODE != "") {
          this.$refs.table2.rowData.unshift({
            PRODUCT_CODE: $parent.editFormFields.PRODUCT_CODE,
            PRODUCT_DETAIL_CODE: $parent.editFormFields.PRODUCT_DETAIL_CODE,
            DEVELOPMENT_PROJECT_NO:
              $parent.editFormFields.DEVELOPMENT_PROJECT_NO,
            TEST_REPORT_CODE: "",
            TEST_TYPE: "",
            TEST_ORGANIZATION: "",
            REPORT_FROM_ORGANIZATION: "",
            REPORT_DATE: "",
            REPORT_VALID_DATE: "",
            WITNESS_MATERIAL_URL: "",
            // WRITE_DATE: "",
            // HANDLE_FLAG: "",
            // HANDLE_DATE: "",
            // NOTICE_NO: "",
            // ENTERPRISE_CODE: "",
            PRODUCT_DETAIL_ID: 0,
          });
        } else {
          this.$Message.info("请先选择研发方案");
        }
      }
    },
    //如果要获取页面的参数请使用 this.$emit("parentCall",见下面的使用方法
    modelOpen() {
      let $parent;
      //获取生成页面viewgrid的对象
      this.$emit("parentCall", ($this) => {
        $parent = $this;
      });
      //当前如果是新建重置两个表格数据
      if ($parent.currentAction == "Add") {
        this.$refs.table1.reset();
        this.$refs.table2.reset();
      } else {
        //如果是编辑，添加两个表格的数据
        this.$refs.table1.load();
        this.$refs.table2.load();
      }
    },
    loadTableBefore(param, callBack) {
      let $parent = null;
      //当前是子页面，获取查询viewgrid页面的对象()
      this.$emit("parentCall", ($this) => {
        $parent = $this;
      });
      //如果是新建功能，禁止刷新操作
      if ($parent.currentAction == "Add") {
        return callBack(false);
      }
      //获取当前编辑主键id值
      let id = $parent.currentRow.PRODUCT_DETAIL_ID;
      //添加从表的查询参数(条件)
      //将当前选中的行主键传到后台用于查询(后台在GetTable2Data(PageDataOptions loadData)会接收到此参数)
      param.rows = 30;
      param.wheres.push({ name: "PRODUCT_DETAIL_ID", value: id });
      callBack(true);
    },
    //从后台加载从表1数据后
    loadTableAfter(data, callBack) {
      return true;
    },
    del(table) {
      if (table == "table1") {
        let rows = this.$refs.table1.getSelected();
        if (rows.length == 0) {
          return this.$Message.error("请先选中行");
        }
        //请求后台删除从表1的数据
        let url = "api/CY_RD_COMPONENT_DETAIL_LIST/del";
        let _rows = rows.map((item) => {
          return item.PRODUCT_DETAIL_LIST_ID;
        });

        this.http.post(url, _rows, false).then((reslut) => {
          if (reslut.status === true) {
            //删除行
            this.$refs.table1.delRow();
            this.$Message.error("删除成功");
          } else {
            this.$Message.error("删除失败" + reslut.message);
          }
        });
        //可以this.http.post调用后台实际执行查询
      } else if (table == "table2") {
        // //删除行后删除从表2的数据
        let rows = this.$refs.table2.getSelected();
        if (rows.length == 0) {
          return this.$Message.error("请先选中行");
        }
        //可以this.http.post调用后台实际执行查询
        //请求后台删除从表2的数据
        let url = "api/CY_RD_PRODUCT_TEST_REPORT/del";
        //处理请求参数
        let _rows = rows.map((item) => {
          return item.PRODUCT_REPORT_ID;
        });

        this.http
          .post(url, _rows, false)
          .then((reslut) => {
            if (reslut.status === true) {
              //删除行
              this.$refs.table2.delRow();
              this.$Message.error("删除成功");
            } else {
              this.$Message.error("删除失败" + reslut.message);
            }
          });
      }

      //可以this.http.post调用后台实际执行查询
    },
    clear(table) {
      table == "table1" ? this.$refs.table1.reset() : this.$refs.table2.reset();
    },
    getRows(table) {
      if (table == "table1") {
        //获取选中的行
        let rows = this.$refs.table1.getSelected();
        if (rows.length == 0) {
          return this.$Message.error("请先选中行");
        }
        this.$Message.error(JSON.stringify(rows));
      } else if (table == "table2") {
        //获取选中的行
        let rows = this.$refs.table2.getSelected();
        if (rows.length == 0) {
          return this.$Message.error("请先选中行");
        }
        this.$Message.error(JSON.stringify(rows));
      }
    },
  },
};
</script>
<style lang="less" scoped>
.vol-tabs {
  background: white;
}
</style>