<template>
  <hoc-el-table
    title="产品列表"
    :paginationFilter="filterFormParams"
    :source="sourceList"
    :config="config"
    @getList="getList"
  >
  </hoc-el-table>
</template>
<script>
import XxxComponent from '@/components/XxxComponent'
export default {
  components: {
    XxxComponent,
  }
  computed: {
    ...mapGetters({
      sourceList: 'Xxxmodule/sourceList',
    })
  },
  methods: {
    copyLink () {},
    setForbidden () {},
    setUnForbidden () {},
    async getList (query = this.filterFormParams) {
      const res = await this.$store.dispatch(ProductLib.getAction('GetProductsList'), query)
      return res
    },
  }
  data () {
    return {
      loading: false,
      filterFormParams: { // 获取列表时传递的参数
        type: '',
        // ...
      },
      config: [
        {
          attrs: {
            label: '编号',
            prop: 'id',
            width: '90'
          }
        },
        {
          attrs: {
            label: '产品信息',
            width: '350'
          },
          renderComponent (data) {
            return [ // 必须为数组
              { name: 'XxxComponent', data } // 返回「组件名」和「组件需要的数据」(使用 v-model 来绑定 data)
            ]
          }
        },
        {
          attrs: {
            label: '最后更新人',
            width: '100',
            prop: 'lastModifierBy'
          }
        },
        {
          attrs: {
            label: '更新时间',
            prop: 'updatedAt'
          }
        },
        {
          attrs: {
            label: '操作',
            width: '260'
          },
          renderHTML (row) {
            return [
              {
                attrs: {
                  label: '编辑',
                  type: 'text',
                  size: 'medium'
                },
                el: 'button',
                click (row) {
                  this.$router.push(`/product_lib/products/${row.id}/edit/`)
                }
              },
              !row.isForbid ? {
                attrs: {
                  label: '禁用',
                  type: 'text',
                  size: 'medium'
                },
                el: 'button',
                click () {
                  this.setForbidden(row.id)
                }
              } : {
                attrs: {
                  label: '解除禁用',
                  type: 'text',
                  size: 'medium',
                  style: {
                    color: '#e6a23c'
                  }
                },
                el: 'button',
                click () {
                  this.setUnForbidden(row.id)
                }
              },
              {
                attrs: {
                  label: '复制链接',
                  type: 'text',
                  size: 'medium',
                  // 这里的指令来自 clipboard，只做为演示用，如有需要请自行安装
                  directives: [
                    {
                      name: 'clipboard',
                      value: `https://www.google.com`,
                      arg: 'copy'
                    }
                  ]
                },
                el: 'button',
                click () {
                  this.copyLink(row)
                }
              }
            ]
          }
        }
      ]
    }
  }
}
</script>

<template>
  <hoc-el-affix>
    <div class="demo"></div>
  </hoc-el-affix>
</template>
<style lang="scss" scoped>
  .demo {
    position: absolute;
    width: 150px;
    height: 300px;
    border: 1px solid red;
  }
</style>

<template>
  <hoc-el-upload-single
    action="your API"
    v-model="value"
  />
</template>

<template>
  <hoc-el-upload-multiple
    action="your API"
    v-model="imageList"
  />
</template>
<script>
export default {
  data () {
    return {
      imageList: [
        { url: '' },
        { url: '' }
      ]
    }
  }
}
</script>

<template>
  <!-- code... -->
  <el-row :gutter="24">
    <el-col :span="24">
      <el-form-item
        label="标题"
        :prop="title"
        :rules="getRequiredRules('change')"
      >
        <el-input
          v-model="value.title"
          placeholder="请输入标题"
        />
      </el-form-item>
    </el-col>
  </el-row>
  <!-- code... -->
</template>
<!-- code... -->