byte-sailing-new/src/components/byTable/demo.vue

<template>
  <div class="box-container">
    <!-- <Banner /> -->
    <div class="content">
      <byTable
        ref="singleTable"
        :source="sourceList.data"
        :pagination="sourceList.pagination"
        :config="config"
        :loading="loading"
        :height="tableHeight"
        highlight-current-row
        :selectConfig="selectConfig"
        :table-events="{
          //element talbe事件都能传
          'row-click': handleRowClick,
          'cell-contextmenu': handleRowClick.apply,
          'select-all': select,
        }"
        :action-list="[
          {
            text: '新建合同',
            plain: true,
            type: 'warning',
            action: () => openModal('add'),
          },
        ]"
        @get-list="getList"
      >
        <template #slotName="{ item }">
          {{ item.createTime }}
        </template>
      </byTable>
    </div>
    <el-dialog
      :title="modalType == 'add' ? '新增' : '编辑'"
      v-model="dialogVisible"
      width="500"
      :before-close="handleClose"
    >
      <byForm
        :formConfig="formConfig"
        :formOption="formOption"
        v-model="formData"
      >
        <template #slot> 可自定义所需功能 </template>
      </byForm>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
<script setup>
/* eslint-disable vue/no-unused-components */
import { ElMessage, ElMessageBox } from "element-plus";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import { computed, defineComponent, ref } from "vue";
const loading = ref(false);
const fixedRight = ref("right");
const align = ref("center");
const tableHeight = ref(null);
const border = ref(true);
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
  },
});
const singleTable = ref({});
const dialogVisible = ref(false);
const modalType = ref("add");
const { proxy } = getCurrentInstance();
const selectConfig = computed(() => {
  return [
    {
      label: "合同状态1",
      prop: "tdaProductId",

      data: [
        {
          label: "已关闭",
          value: "123",
        },
      ],
    },
    {
      label: "合同状态22",
      prop: "tdaApplicationId",
      data: [
        {
          label: "已关闭",
          value: "123",
        },
      ],
    },
  ];
});
const config = computed(() => {
  return [
    {
      type: "selection",
      attrs: {
        checkAtt: "isCheck",
      },
    },
    {
      attrs: {
        label: "权限字符",
        prop: "roleKey",
      },
    },
    {
      attrs: {
        label: "显示顺序",
        prop: "dataScope",
        align: "center",
        width: 200,
      },
      // 渲染字符串，默认不想展示 prop 的值，而是想对它做一些处理的时候，可以用这个方法
      render(isForbid) {
        return isForbid ? "禁用中" : "非禁用";
      },
    },
    {
      attrs: {
        label: "状态",
        align: align.value,
        width: 100,
        click: (items) => {
          console.log(items);
        },
      },
      // 渲染组件，返回值为一个数组， data 作为组件的 v-model，适用于需要展示复杂的数据的场景
      renderComponent(row) {
        return [
          {
            name: "el-switch",
            data: row.menuCheckStrictly,
            change: (e) => {
              console.log(e, "change事件");
            },
            click: (e) => {
              console.log(e, "click事件");
            },
          },
        ];
      },
    },
    {
      attrs: {
        label: "创建时间",
        align: align.value,
        width: 200,
        prop: "createTime",
        slot: "slotName",
      },
    },
    {
      attrs: {
        label: "操作",
        width: "400",
        align: align.value,
        // 设置当前列恢复点击事件冒泡
        // isBubble: false,
        fixed: fixedRight.value,
      },
      // 渲染 el-button，一般用在最后一列。
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "修改",
              type: "primary",
              text: true,
              bg: true,
            },
            el: "button",
            click() {
              ElMessage({
                message: JSON.stringify(row),
              });
            },
          },
          {
            attrs: {
              label: "删除",
              type: "danger",
              text: true,
              bg: true,
            },
            el: "button",
            click() {
              ElMessage({
                message: `编号${row.id} router -> 已跳转到编辑页面！`,
              });
            },
          },
          // {
          // 	attrs: {
          // 		label: '发布',
          // 		type: 'primary',
          // 		text: true,
          // 		bg: true,
          // 	},
          // 	el: 'button',
          // 	click() {
          // 		setPublish(row)
          // 	},
          // },
          // !row.isForbid
          // 	? {
          // 			attrs: {
          // 				label: '三元写法ture',
          // 				type: 'primary',
          // 				text: true,
          // 				bg: true,
          // 				disabled: false,
          // 			},
          // 			el: 'button',
          // 			click() {
          // 				setForbid(row)
          // 			},
          // 	  }
          // 	: {
          // 			attrs: {
          // 				label: '三元写法false',
          // 				text: true,
          // 				bg: true,
          // 				type: 'primary',
          // 				disabled: false,
          // 				style: {
          // 					color: '#e6a23c',
          // 				},
          // 			},
          // 			el: 'button',
          // 			click() {
          // 				setForbid(row)
          // 			},
          // 	  },
        ];
      },
    },
  ];
});

const formData = reactive({});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const formConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "name",
      label: "label名称",
      required: true,
      itemWidth: 100,
      //disabled:true,
      itemType: "textarea",
    },
    {
      type: "select",
      prop: "xiala",
      label: "下拉框",
      multiple: true,
      style: {
        width: "300px",
      },
      isLoad: {
        url: "/getRouters",
        resUrl: "data",
        //如果接口回来为stringArray，可以把labelkey和labelval都设置为stringArray
        labelKey: "name",
        labelVal: "path",
      },
      //所有组件的change事件监听
      fn: (e) => {
        console.log(e);
      },
    },
    {
      type: "date",
      prop: "date",
      label: "时间",
      itemType: "date",
    },
    {
      type: "radio",
      prop: "radio",
      label: "单选",
    },
    {
      type: "slot",
      slotName: "slot",
      label: "插槽",
    },

    {
      //使用此功能需要初始化prop数据至少是对象
      type: "json",
      prop: "standardJson",
      json: [
        {
          type: "input",
          prop: "englishName",
          label: "英文名",
        },
        {
          type: "input",
          prop: "code",
          label: "备注",
        },
        {
          type: "input",
          prop: "netWeight",
          label: "净重",
        },
        {
          type: "input",
          prop: "customhouse",
          label: "海关编码",
        },
      ],
    },
  ];
});

const sleep = (time = 1000) => {
  return new Promise((resolve) => setTimeout(resolve, time));
};
const getList = async (res) => {
  console.log(sourceList.value);
  console.log({ ...sourceList.value.pagination, ...res });
  loading.value = true;
  proxy.get("/system/role/list?pageNum=1&pageSize=10").then((message) => {
    console.log(message);
    sourceList.value.data = message.rows;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
const openModal = () => {
  dialogVisible.value = true;
};
const select = (row, column, cell) => {
  ElMessage({
    dangerouslyUseHTMLString: true, // Be careful :)
    message: `点了全选`,
  });
};
const handleRowClick = (row, column, cell) => {
  ElMessage({
    dangerouslyUseHTMLString: true, // Be careful :)
    message: `row-click 事件，单击了<span style="color: red;"> 第${row.$index}行 </span>请看控制台 log`,
  });
  console.log("回调参数分别为: row, column, cell");
  console.log(row, column, cell);
};
const setPublish = (row) => {
  ElMessageBox.confirm(
    `此操作会将${row.name}发布到线上, 是否继续?`,
    `编号${row.id}提示`,
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      ElMessage({
        type: "success",
        message: "发布成功!",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消发布",
      });
    });
};
const setForbid = async (row) => {
  loading.value = true;
  await sleep();
  loading.value = false;
  row.isForbid = !row.isForbid;
};
const copyLink = (row) => {
  ElMessage({
    type: "success",
    message: "指令测试-复制成功，可以粘贴啦!",
  });
};
getList();
</script>
  
  <style lang="scss" scoped>
.box-container {
  .content {
    position: relative;
    margin: 0 auto;
  }
}
</style>