cmc-web/packages/common/components/select-icon/SelectIcon.vue

/** * Created by Zhang Haijun on 2017/06/13. */
<template>
  <div>
    <cb-form-item label="选择图标：" prop="icon" validate="required">
      <el-input v-model="addData.icon" v-show="false"></el-input>
      <img @click="selectIcon()" class="model-icon" :class="disabled && 'disabled'" :src="addData.icon || '/web-common-resource/img/default_cmdb.png'" alt="" />
    </cb-form-item>
    <el-dialog title="选择图标" :close-on-click-modal="false" v-if="dialogVisible" :visible.sync="dialogVisible" width="50%" append-to-body>
      <el-row>
        <el-col :span="24">
          <el-alert title="提示" type="success" :closable="false">
            <template slot="">
              <span>没有您喜欢的图标，可以尝试上传一个新的图标。</span>
              <el-button type="primary" size="mini" class="cur-point" @click="uploadVisible = true">上传</el-button>
            </template>
          </el-alert>
        </el-col>
        <image-cropper
          field="files"
          :headers="{ token: getToken() }"
          @crop-upload-success="imageUploaded"
          v-if="uploadVisible"
          v-model="uploadVisible"
          :width="size"
          :params="{ category, ...param }"
          :height="size"
          :url="`/api${baseUrl}`"
          img-format="png"
        ></image-cropper>
        <el-col :span="24">
          <div class="icon-cell" v-for="item in list" :key="item.id" :class="{ selected: item.checked }" @click="selectItem(item)">
            <img :src="item.icon" alt="" />
            <i class="remove" v-show="!item.reserved" @click.stop="handleDelete(item)">&times;</i>
            <span><i class="el-icon-check"></i></span>
          </div>
        </el-col>
        <el-col :span="24" class="m-t-sm">
          <el-pagination
            @size-change="getList"
            @current-change="getList"
            :current-page.sync="params.page"
            :page-sizes="[5, 10, 20, 30, 50]"
            :page-size.sync="params.rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click.native="save">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { reactive, ref } from 'vue'
import useTable from 'hooks/useTable'
import { getIcon, removeIcon, baseUrl } from './services'
import ImageCropper from 'components/image-cropper/index.vue'
import { getToken } from 'utils/auth'
import { Message } from 'element-ui'
import { useSet } from '@cmp/cmp-core'
export default {
  components: {
    ImageCropper
  },
  props: {
    addData: {
      type: Object
    },
    size: {
      type: Number,
      default: 65
    },
    param: {
      type: Object,
      default: function () {
        return {}
      }
    },
    category: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean
    }
  },
  setup(props, context) {
    const { total, params, list, getList, handleDelete } = useTable({
      getService: getIcon,
      removeService: removeIcon,
      rows: 20,
      initParams: {
        category: props.category
      }
    })

    const dialogVisible = ref(false)
    const set = useSet()
    const currentSelectIcon = reactive({
      id: '',
      icon: ''
    })

    function selectIcon() {
      if (props.disabled) return
      dialogVisible.value = true
      const { iconId, icon } = props.addData
      currentSelectIcon.id = iconId
      currentSelectIcon.icon = icon
      getList()
    }

    // 选择图标
    function selectItem(item) {
      if (item.checked) return
      list.value.forEach(row => {
        set(row, 'checked', false)
      })
      item.checked = true
      const { id, icon } = item
      currentSelectIcon.id = id
      currentSelectIcon.icon = icon
    }

    function save() {
      const { id, icon } = currentSelectIcon
      if (!id) return Message.error('请选择图标')
      set(props.addData, 'iconId', id)
      set(props.addData, 'icon', icon)
      dialogVisible.value = false
    }

    const uploadVisible = ref(false)

    function imageUploaded(res) {
      if (res.success) {
        uploadVisible.value = false
        getList()
      } else {
        Message.error(res.message)
      }
    }
    return {
      baseUrl,
      params,
      list,
      total,
      getList,
      handleDelete,
      selectIcon,
      dialogVisible,
      selectItem,
      save,
      uploadVisible,
      imageUploaded,
      getToken
    }
  }
}
</script>
<style scoped lang="scss">
.model-icon {
  width: 50px;
  height: 50px;
  cursor: pointer;
  margin-top: 5px;
  &.disabled {
    cursor: default;
  }
}

div.icon-cell {
  position: relative;
  display: inline-block;
  width: 65px;
  height: 65px;
  border-radius: 10px;
  margin: 10px 10px 0 0;
  cursor: pointer;
}

div.icon-cell > span {
  display: none;
}

div.icon-cell.selected > span {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 65px;
  height: 65px;
  border: 1px dashed #8e7070;
  border-radius: 10px;
  line-height: 65px;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  color: #fff;
}

div.icon-cell.selected i.icon-ok {
  position: relative;
  left: 20px;
  top: 20px;
  color: #27c24c;
  font-size: 20px;
  font-weight: bold;
}

i.remove {
  display: none;
}

div.icon-cell:hover > i.remove {
  display: inline-block;
  position: absolute;
  top: -11px;
  right: -8px;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.64);
  border-radius: 8px;
  font-size: 20px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  padding: -2px;
}

div.icon-cell img {
  width: 100%;
}
</style>