crm_extend/src/pages/indent-manage/indent/components/skuSelect.vue

<template>
  <div class="component-sku-select">
    <el-dialog
      v-model.sync="show"
      class="custom-select-sku-dialog"
      title="选择SKU"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="close"
      width="1200px"
    >
      <div
        v-loading="loading"
        class="flex items-start"
        style="max-height: 100%"
      >
        <div>
          <el-input
            v-model="keywords"
            placeholder="SKU / 商品名"
            style="margin-bottom: 24px"
          >
            <template #append>
              <el-button
                size="small"
                @click="search"
              >
                查询
              </el-button>
            </template>
          </el-input>
          <div class="catgory-area">
            <el-tree
              node-key="id"
              :default-expanded-keys="defaultExpandID"
              :data="categoryList"
              :props="defaultProps"
              @node-click="clickNode"
            ></el-tree>
          </div>
        </div>
        <div
          v-if="skuList.length"
          class="sku-area flex-auto flex flex-wrap items-center"
        >
          <div
            v-for="sku in skuList"
            :key="sku.id"
            class="sku-item"
          >
            <div class="image"></div>
            <div class="sku-name">{{ sku.product_name }}</div>
            <div class="flex justify-between items-center">
              <div class="sku-code">Product Code: {{ sku.product_sku }}</div>
              <el-button
                type="primary"
                size="small"
                plain
                @click="selectSku(sku)"
              >
                使用
              </el-button>
            </div>
          </div>
        </div>
        <div
          v-else
          class="sku-area flex-auto flex items-center"
          style="padding-left: 25%"
        >
          未找到你想要的Indent商品, 可进行
          <el-button
            link
            type="primary"
            @click="dialogApplySkuVisible = true"
          >
            申请
          </el-button>
        </div>
      </div>
      <template #footer>
        <div class="flex items-center justify-end">
          <el-pagination
            v-show="total > 0"
            v-model:current-page="pageForm.page"
            v-model:page-size="pageForm.limit"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            :layout="'total, sizes, prev, pager, next, jumper'"
            @size-change="getSku"
            @current-change="getSku"
          />
        </div>
      </template>
    </el-dialog>
    <sku-apply
      v-model:visible="dialogApplySkuVisible"
      @apply="onSkuApply"
    ></sku-apply>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, watch } from 'vue'
import { ElButton, ElInput, ElTree, ElDialog, ElPagination } from 'element-plus'

import { getCategoryTree, getSkuList } from '@/api/indent.js'
import skuApply from './skuApply.vue'
defineComponent({
  name: 'ComponentSkuSelect',
})
const { visible = false } = defineProps<{ visible: boolean }>()

const $emit = defineEmits(['update:visible', 'select'])
const defaultProps = {
  children: 'children',
  label: 'name',
}
const dialogApplySkuVisible = ref(false)
const loading = ref(false)
const keywords = ref('')
const defaultExpandID = ref([] as any[])
const show = ref(false)
const currentCategory = ref('')
const categoryList = ref([] as any[])
const skuList = ref([] as any[])
const pageForm = ref({
  page: 1,
  limit: 20,
})
const total = ref(0)
const onSkuApply = (data: any) => {
  $emit('select', {
    product_name: data.product_name,
    product_sku: '申请中',
    id: '',
  })
  close()
}
const search = () => {
  currentCategory.value = ''
  skuList.value = []
  pageForm.value = {
    page: 1,
    limit: 20,
  }
  total.value = 0
  getSku()
}
const resetData = () => {
  currentCategory.value = ''
  categoryList.value = []
  skuList.value = []
  pageForm.value = {
    page: 1,
    limit: 20,
  }
  total.value = 0
}
const selectSku = (item: any) => {
  $emit('select', item)
  close()
}
const clickNode = (obj: any) => {
  currentCategory.value = obj.path
}
const getCategory = () => {
  getCategoryTree().then((response: any) => {
    const res = response.result
    categoryList.value = res
    categoryList.value.forEach((i) => {
      defaultExpandID.value.push(i.id)
      i.path = `${i.id}`
      if (Array.isArray(i.children) && i.children.length > 0) {
        i.children.forEach((son: any) => {
          son.path = `${i.id},${son.id}`
          if (Array.isArray(son.children) && son.children.length > 0) {
            defaultExpandID.value.push(son.id)
            son.children.forEach((grandson: any) => {
              grandson.path = `${i.id},${son.id},${grandson.id}`
            })
          }
        })
      }
    })
  })
}
const getSku = () => {
  const params = Object.assign(
    { keywords: keywords.value, category: currentCategory.value },
    pageForm.value,
  )
  loading.value = true
  getSkuList(params)
    .then((response: any) => {
      const res = response.result
      skuList.value = res.data
      total.value = res.total
    })
    .finally(() => {
      loading.value = false
    })
}
watch(
  () => visible,
  () => {
    show.value = visible
    resetData()
    if (show.value) {
      getSku()
      getCategory()
    }
  },
)
const close = (done = {} as any) => {
  $emit('update:visible', false)
  if (typeof done === 'function') done()
}
</script>
<style lang="scss">
.component-sku-select {
  .custom-select-sku-dialog {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 100vh;
    .el-dialog__body {
      position: relative;
      // max-height: 87vh;
      // overflow-y: scroll;
      // overflow-x: auto;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }
}
</style>
<style lang="scss" scoped>
.component-sku-select {
  .catgory-area {
    width: 180px;
    min-width: 180px;
    border: 1px solid #eee;
    padding: 0 0 24px 0;
  }
  .sku-area {
    width: 100%;
    padding-left: 24px;
    height: 82vh;
    overflow-y: auto;
  }
  .sku-item {
    border: 1px solid #eee;
    padding: 12px;
    width: 280px;
    margin: 0 18px 12px 0;
    .sku-name {
      overflow: hidden;
      font-size: 18px;
      line-height: 24px;
      height: 48px;
      max-height: 48px;
      color: #222;
      margin-bottom: 8px;
      word-break: break-word;
    }
    .sku-code {
      color: #409eff;
    }
    .image {
      border: 1px solid #eee;
      position: relative;
      width: 100%;
      height: 120px;
      margin-bottom: 8px;
    }
  }
}
</style>