basic-component

一个基于element-plus的组件二次封装库

BasicForm

<template>
    <basic-form
      ref="basicForm"
      colon
      :columns="formColumns"
      :data="formData"
      label-width="130px"
    >
      <template #materialCover>
        <img-upload
          v-model="fileList"
          @success="handleSingleImgSuccess"
        ></img-upload>
      </template>
      <template #content>
        <div class="material-content">
          <el-row class="material-content-type">
            <el-radio-group v-model="formData.materialContentType" size="small">
              <el-radio label="UD">自定义内容</el-radio>
              <el-radio label="HA">h5地址</el-radio>
            </el-radio-group>
          </el-row>
          <el-row v-if="formData.materialContentType === 'UD'">
            <el-tabs tab-position="left" v-model="formData.userdefineContentType">
              <el-tab-pane label="文本" name="RICHTEXT">
                <vue-editor v-model="formData.richText" useCustomImageHandler @image-added="onImageAdded"></vue-editor>
              </el-tab-pane>
              <el-tab-pane label="图片" name="PHOTO">
                <img-upload
                  v-model="photos"
                  :maxCount="9"
                  @success="handleMutipleSuccess"
                ></img-upload>
              </el-tab-pane>
              <el-tab-pane label="视频" name="VIDEO">
                <single-video-upload
                  v-model="video"
                  @success="data => video = data"
                ></single-video-upload>
              </el-tab-pane>
            </el-tabs>
          </el-row>
          <!-- h5 -->
          <el-row v-else>
            <el-input v-model="formData.materialAddr" placeholder="https://" />
          </el-row>
        </div>
      </template>
    </basic-form>
</template>

<script>
export default {
    data() {
        return {
            formData: {},
        }
    },
    computed: {
        formColumns() {
        return [
            { label: '素材分类', prop: 'materialType', type: 'select', list: materialTypeEnum, required: true, span: 13 },
            { label: '素材标题', prop: 'materialTitle', type: 'input', required: true, span: 13 },
            { label: '素材封面', prop: 'materialCover', type: 'slot', span: 23 },
            { label: '', prop: 'content', type: 'slot', span: 23 },
            { label: '客经标签', prop: 'weUserTags', type: 'select', list: this.userTagList, labelKey: 'tagName', valueKey: 'tagKey', span: 13 },
            { label: '企客标签', prop: 'weCustomerTags', type: 'select', list: this.customerTagList, labelKey: 'tagName', valueKey: 'tagKey', span: 13 },
        ];
        },
    },
}

BasicTable

<template>
    <basic-table
      :columns="tableColumns"
      :data="tableData"
      :pageParams="paging"
      :tableLoading="loading"
      type="checkbox"
      selectedDataKey="id"
      v-model:selectedData="selectedData"
      :disabledRow="row => row.status === 0"
      :mergeOptions="{
        isMerge: true,
        mergeKey: 'companyName',
        mergeIndex: [0, 1, 2, 3, 4],
      }"
      @handleSearch="getTableData"
    >
      <template #oper="{row}">
        <el-button type="text" @click="handleDialog(row, 'person')">添加联系人</el-button>
        <el-button type="text" @click="handleDialog(row, 'show')">查看联系人</el-button>
        <el-button type="text" @click="handleDialog(row, 'edit')">编辑</el-button>
      </template>
    </basic-table>
</template>

<script>
import { getCompanyPageList } from '@/api/company.js';
export default {
  data() {
    return {
      selectedData: [],
      loading: false,
    }
  },
  computed: {
    tableColumns() {
      return [
        { label: '创建时间', prop: 'createTime' },
        { label: '企业名称', prop: 'companyName' },
        { label: '所属行业', prop: 'industry' },
        { label: '企业地址', prop: 'address' },
        { label: '标签', prop: 'tags', type: 'tag-select', list: this.tagList },
        { label: '备注', prop: 'remark' },
        { label: '来源客经编号', prop: 'sourceUserid', labelWidth: '120px' },
        { label: '联系人数量', prop: 'customerCount' },
        { label: '操作', prop: 'oper', fixed: 'right', width: 220 },
      ];
    },
  },
  methods: {
    getTableData() {
      this.loading = true;
      const params = {
        ...this.paging,
        ...this.formData,
      };
      getCompanyPageList(params).then(({ data = {} }) => {
        this.tableData = data.data || [];
        this.total = data.pageInfo ? data.pageInfo.total : 0;
      }).finally(() => {
        this.loading = false;
      });
    },
  },
  created() {
    this.getTableData();
  }
}