超级表格

<template title="项目列表">
  <div class="subRoot_pageview">
    <ta-tabs
      defaultActiveKey="1"
      @change="changeTab"
      :style="{ background: '#fff' }"
    >
      <ta-tab-pane :tab="title" key="1"></ta-tab-pane>
    </ta-tabs>

    <fh-face-plate
      :shadow="true"
      :innerPad="10"
      :outerMarg="20"
      :allStyle="{ paddingTop: '25px', marginTop: '10px' }"
    >
      <hlta-superSearch
        @valueChange="searchItemChange"
        ref="dom_superSearch"
        class="hlta-s-search-item"
        :search-items="searchItems"
        :item="searchItem"
        :query-url="queryUrl"
        :gSize="'large'"
        :displayShowRow="2"
      >
        <div slot="moreBtn">
          <ta-button
            class="mt-10"
            @click="add"
            type="primary"
            icon="plus"
          >
            新增
          </ta-button>
          <ta-button
            class="mr-10 mt-10"
            @click="deleteByIds"
            type="primary"
            icon="delete"
          >
            批量删除
          </ta-button>
        </div>
      </hlta-superSearch>
      <br />
      <!-- <br /> -->
      <!-- <br />
      <br /> -->
      <hlta-superTable
        ref="sTable"
        :noSerial="false"
        :needCheckbox="true"
        :query-url="queryUrl"
        :table-data.sync="tableData"
        :column-define="columnDefine"
        :actions="actions"
        :page-info="pageInfo"
        :page-name="'collaborateProject'"
      >
      </hlta-superTable>
      <philanthropicVentureInfo
        ref="philanthropicVentureInfo"
        @reTable="reTable"
        :projectQuality="projectQuality"
        :title="titleAdd"
        :business-dep-list="businessDepList"
      ></philanthropicVentureInfo>
      <philanthropicVentureView
        ref="philanthropicVentureView"
        :title="title + '详情'"
        :projectQuality="projectQuality"
        :business-dep-list="businessDepList"
      ></philanthropicVentureView>
    </fh-face-plate>
  </div>
</template>

import superTableMx from "@bizCp/hlta-superTable/src/js/tableMx.js";

export default {
  name: "collaborateProject",
  components: {
    philanthropicVentureInfo,
    philanthropicVentureView,
    // philanthropicVentureAdd,
  },
  extends: superTableMx,
  props: {},
  data() {
    return {
      defaultActiveKey: "1",
      areaList: [],
      businessDepList: [],
      titleAdd: '',
      title:
        this.$route.query.projectQuality == "01"
          ? "公益创投项目"
          : this.$route.query.projectQuality == "02"
          ? "组织自有项目"
          : "组织间协作项目",
      wrapStyleOb: {
        padding: "10px 0 13px 0",
      },
      dcVisible: false,
      isTabIndex: "",
      projectQuality: this.$route.query.projectQuality,
      searchItems: [
        {
          type: "text",
          placeholder: "输入项目名称",
          property: "projectName",
          colSpan: 6,
          cb_change: (value) => {
            console.log("输入项目名称:", value);
          },
        },
        {
          type: "text",
          placeholder: "输入机构名称",
          property: "socialOrgName",
          colSpan: 6,
          cb_change: (value) => {
            console.log("输入机构名称:", value);
          },
        },
        {
          type: "multiSingleSelected",
          placeholder: "实施区域",
          property: "admsAreaList",
          treeId: "result",
          replaceFields: {
            title: "areaName",
            key: "areaCode",
            value: "areaCode",
          },
          treeDataLabel: "areaName",
          treeDataValue: "areaCode",
          treeNodeId: "areaCode",
          url: "area/select",
          treeCheckable: false,
          multiple: true,
          treeDataAsync: [],

        },

        {
          type: "checkGroupDict",
          // Talabel: "服务领域",
          label: "服务领域",
          newline:1,
          colSpan:21,
          labelCol: {
            // span: 3,
            span: 0,
          },
          wrapperCol: {
            span: 24,
          },
          floatLabelStyle:{
            paddingLeft:'10px'
          },
          collectionType: "REQUIRETYPE",
          property: "serviceAreaList",
          width: '100%',
          // width: 400,
        },
        {
          type: "checkGroupDict",
          newline:1,
          colSpan:21,
          // Talabel: "项目状态",
          label: "项目状态",
          floatLabelStyle:{
            paddingLeft:'10px'
          },
          labelCol: {
            span: 0,
          },
          wrapperCol: {
            span: 24,
          },
          collectionType: "PROJECTSTATUS",
          property: "projectStatusList",
          // width: 440,
          // width: 800,
          width: '100%',
        },
      ],
      searchItem: {},
      tableData: [],
      queryUrl:
        "collaborateProject/listPage?projectQuality=" +
        this.$route.query.projectQuality,
      columnDefine: [
        {
          label: "项目名称",
          property: "projectName",
          width: "15%",
          showOverflow: true,
        },
        {
          label: "执行机构名称",
          property: "socialOrgName",
          width: "15%",
          showOverflow: true,
        },
        {
          label: "项目开始时间",
          property: "projectStartTime",
          width: "15%",
          sortable: true,
          remoteSort: true,
          showOverflow: true,
        },
        {
          label: "项目结束时间",
          property: "projectEndTime",
          width: "15%",
          sortable: true,
          remoteSort: true,
          showOverflow: true,
        },
        {
          label: "经费预算（万元）",
          property: "budget",
          width: "15%",
          precision: 2,
          showOverflow: true,
          remoteSort: true,
          sortable: true,
        },
        {
          label: "服务领域",
          property: "demandType",
          collectionType: "REQUIRETYPE",
          width: "15%",
          showOverflow: true,
        },
        {
          label: "实施区域",
          property: "admsAreaListName",
          collectionType: "REQUIRETYPE",
          width: "15%",
          showOverflow: true,
        },
        {
          label: "项目状态",
          property: "projectStatus",
          collectionType: "PROJECTSTATUS",
          width: "15%",
          showOverflow: true,
        },
      ],
      actions: [
        {
          label: "操作",
          width: 200,
          operateMenu: [
            {
              name: "编辑",
              icon: "edit",
              onClick: (record, index) => {
                this.titleAdd='编辑项目'
                this.$refs.philanthropicVentureInfo.showDrawer(record);
              },
            },
            {
              name: "查看",
              icon: "eye",
              onClick: (record, index) => {
                this.$refs.philanthropicVentureView.showDrawer(record);
              },
            },
            {
              name: "删除",
              icon: "delete",
              type: "confirm",
              confirmTitle: "确认删除该信息？",
              onOk: (record, index) => {
                let param = {};
                let idList = [];
                idList.push(record.id);
                param.idList = idList;
                this.Base.submit(null, {
                  method: "post",
                  url: "collaborateProject/delete",
                  data: param,
                  autoQs: false,
                }).then((data) => {
                  this.doQuery();
                });
              },
            },
          ],
        },
      ],
      pageInfo: {
        fnParams: () => {
          return {
            ...this.searchItem,
          };
        },
      },
    };
  },
  created() {
    this.getBusinessDepList();
    if (this.projectQuality == "02") {
      this.title = "组织自有项目";
    } else if (this.projectQuality == "03") {
      this.title = "组织间协作项目";
    } else {
      this.title = "公益创投项目";
    }
    // this.Base.submit(null, {
    //   url: "area/select",
    //   data: {
    //     areaCode: null,
    //     // arealevel: "4",
    //   },
    // }).then((data) => {
    //   hlta_SetComps_general_initOptdata.call(
    //     this,
    //     this.searchItems,
    //     "admsAreaList",
    //     data.data.result
    //   )
    // });
  },
  methods: {
    getBusinessDepList() {
      this.Base.submit(null, {
        method: "post",
        url: "taOrg/inputSelectMzDpmt",
      }).then((data) => {
        data.data.result.forEach((it) => {
          let item = {};
          item.label = it.orgName;
          item.value = it.orgId;
          this.businessDepList.push(item);
        });
        // hlta_SetComps_general_initOptdata.call(this, this.createItems2,
        //   'funder', bdeptList
        // )
      });
    },
    //刷新表格
    reTable() {
      this.doQuery();
    },
    //批量删除
    deleteByIds() {
      this.$confirm({
        title: '删除',
        content: '确定批量删除吗？',
        onOk: () => {
          let param = {};
          let idList = [];
          let selectRecords = this.$refs.sTable.$refs.mTable.getCheckboxRecords();
          selectRecords.map((item) => {
            idList.push(item.id);
          });
          param.idList = idList;
          if (param.idList.length == 0) {
            this.$message.warning("至少选择一行");
            return;
          }
          this.Base.submit(null, {
            method: "post",
            url: "collaborateProject/delete",
            data: param,
            autoQs: false,
          })
            .then((data) => {
              this.$message.success("删除成功!");
              this.doQuery();
            })
            .catch(() => {
              this.$message.error("删除失败!!!");
            });
        }})
    },
    add() {
      this.titleAdd='新增项目'
      this.$refs.philanthropicVentureInfo.showDrawer();
    },
    //   切换tab
    changeTab(key) {
      this.isTabIndex = key;
    },
    searchItemChange(item) {
      console.log(
        "searchItemChange===",
        item,
        "this.searchItem:",
        this.searchItem
      );

      // let allChange = this.form99.getAllChangeEventArgs()

      // console.log("allChange==",allChange);
    },
    openWin() {
      this.choosedData = [];
      /*if (this.rowSelection.selectedRows.length == 0) {
                    this.$message.warning('请选择数据!')
                    return
                }*/
      this.Visible = true;
      this.$nextTick(() => {
        this.$refs.newOrgPaging.loadData();
      });
    },
    openWinExcel() {
      this.dcVisible = true;
    },
    zdhz_test() {
      this.$refs.dom_superSearch.fnFoldToggle();
    },
  },
};

prop(属性)

参数	说明	类型	默认值	必传项
noSerial	序号列	boolean	true	-
needCheckbox	多选checkbox按钮	boolean	false	-
query-url	接口请求地址	string	-	Y
column-define	列模型	Array	具体用法详见options	Y
actions	按钮组	Array	具体用法和ta404ui文档一致	-
page-info	分页关键信息对象	Object	{ fnParams:()=>({ [分页查询Object] })}	Y
page-name	组件标记名	string	必须和当前vue文件的name名称一致	Y

options(可选项配置)

column-define

参数	说明	类型
label	列头名称	string
property	api键名	string
width	列宽	string
showOverflow	文本内容超出省略+气泡效果	boolean
sortable	列排序功能	boolean
remoteSort	远程查询	boolean
collectionType	字典文本匹配展示，传入字典名称	string

更多属性用法详见：ta404ui1.5.x版本中的bigTable组件释义

Events(事件)

方法名称	说明	返回类型	参数	调用方式
loadData	查询数据	Array	-	this.$refs.sTable.$refs.elTablePage.loadData()

slots(插槽)

属性	说明	默认值
defineCol	原生404组件插入布局法	{}

protocol(规约)

> 1. 该组件外层要包裹fh-face-plate组件
> 2. hlta-superTable组件标签上要定义ref锚点名称，页面多个该组件名称不要重复

dependency(依赖)

import superTableMx from "@bizCp/hlta-superTable/src/js/tableMx.js";

export default {
  // ...
  extends: superTableMx,
  // ...
  data(){
    return {

    }
  }
}