front-end/pt/src/components/module/sj-list-layer.vue

<template>
  <el-dialog
    title="选择商家"
    :visible.sync="selDialog"
    :close-on-click-modal="false"
    :append-to-body="true"
    width="800px"
    @close="$emit('update:show', false)"
  >
    <div class="recharge-modal-content">
      <el-radio-group
        v-model="radio"
        class="radio-wrap"
      >
        <x-crud
          class="liu-crud-wrap"
          @load="onLoad"
        >
          <template #table-column-radio="{scope}">
            <div>
              <el-radio :label="scope.row.index">选择</el-radio>
            </div>
          </template>

          <template #table-column-imgUrl="{scope}">
            <div>
              <cl-avatar
                shape="square"
                :size="40"
                :src="scope.row.imgUrl | default_avatar"
                :style="{ margin: 'auto' }"
              ></cl-avatar>
            </div>
          </template>
        </x-crud>
      </el-radio-group>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="resetForm"
      >取 消</el-button>
      <el-button
        type="primary"
        size="small"
        @click="confirmFn"
      >确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'sj-list-layer',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    multi: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      selDialog: false,
      ruleForm: {},
      radio: '',
      list: [],
      selData: {}
    };
  },
  computed: {
  },
  watch: {
    show (val) {
      this.selDialog = val;
    }
  },
  created () { },
  methods: {
    confirmFn () {
      this.$emit('confirm', this.list[this.radio]);
    },
    resetForm () {
      this.$emit('cancel');
    },
    onLoad ({ ctx, app }) {
      this.app = app;
      let applyHost = () => {
        return this.$service.saasShop.merchantList({ style: '3' });
      };
      ctx.service({
        page: applyHost
      })
        .set('table', {
          columns: [
            {
              prop: 'radio',
              label: '选择',
              align: 'center',
              'min-width': 60
            },
            {
              prop: 'name',
              label: '商家名称',
              align: 'center'
            },
            {
              prop: 'currentStyle',
              label: '类型',
              align: 'center'
            }
          ],
          // 操作列
          op: {
            visible: false // 是否显示
          }
        })
        .set('dict', {
          search: {
            keyWord: 'name'
          }
        })
        .set('search', {
          key: {
            placeholder: '商家名称，支持拼音首字母'
          }
        })
        .set('pagination', {
          size: 6
        })
        .set('layout', [
          ['slot-tabs'],
          ['search-key', 'flex1', 'refresh-btn'],
          ['data-table'],
          ['flex1', 'pagination']
        ])
        .on('refresh', async (params, { next, render }) => {
          // 继续执行刷新
          let { list } = await next(params);
          list.map((e, index) => {
            e.index = index;
          });
          this.list = list;
          render(list);
        })
        .done();
      app.refresh({ type: this.tabIndex });
    }
  }
};
</script>
<style lang="scss">
// 列表
.radio-wrap {
	display: block;
}
</style>