newtv-ui-3.0 0.0.1

package/packages/cardTable/src/cardTable.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="fgCard">
+    <el-row :gutter="10" v-if="data.length > 0">
+      <el-col
+        :sm="IsShowDetail ? 24 : 12"
+        :md="IsShowDetail ? 12 : 6"
+        :lg="IsShowDetail ? 6 : 4"
+        :xl="IsShowDetail ? 4 : 3"
+        v-for="(item, index) in data"
+        style="margin-bottom: 20px"
+        :key="`cardTable${index}`"
+      >
+        <div
+          class="cardBox"
+          :class="{
+            checked: item.checked,
+            hoverBg: index == hoverIndex,
+            activeBg: item.id == activeId,
+          }"
+          @mouseover="hoverIndex = index"
+          @mouseout="hoverIndex = -1"
+        >
+          <!-- 卡片的头部位 -->
+          <div class="cardContent">
+            <slot name="poster" :data="item"></slot>
+            <slot name="leftState" :data="item"></slot>
+            <el-checkbox
+              class="IsCheckbox checkbox"
+              v-model="item.checked"
+              @click.stop
+              @change="change(item, index)"
+            ></el-checkbox>
+            <slot name="imgBottom" :data="item"></slot>
+          </div>
+
+          <div class="cardFooter">
+            <slot name="footer" :data="item"></slot>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <div class="empty" v-else>暂无数据</div>
+  </div>
+</template>
+
+<script>
+import { ref, toRefs, defineComponent, reactive, watch } from 'vue'
+export default defineComponent({
+  name: 'fgCard',
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    IsShowDetail: {
+      type: Boolean,
+      default: false,
+    },
+    selectAllList: {
+      type: Array,
+      default: () => [],
+    },
+    checkAll: {
+      type: Boolean,
+      default: false,
+    },
+    activeId: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['selectChecked'],
+  setup(props, ctx) {
+    const state = reactive({
+      hoverIndex: -1,
+      selectList: [],
+      tableData: [],
+    })
+    const change = (val) => {
+      state.selectList = JSON.parse(JSON.stringify(props.data))
+      ctx.emit('selectChecked', state.selectList)
+    }
+    // watch(() => props.checkAll,
+    //     (newVal, oldValue) => {
+    //         if(newVal){
+    //             props.data.forEach(item=>{
+    //                   item.checked = true
+    //              })
+    //         }else{
+    //             props.data.forEach(item=>{
+    //                 item.checked = false
+    //             })
+    //         }
+    //         console.log(props.data,1111)
+    //     }
+    // )
+    return {
+      ...toRefs(state),
+      change,
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.fgCard {
+  .el-row {
+    margin-bottom: 20px;
+    .cardBox {
+      padding: 10px;
+      border: 1px solid transparent;
+      .cardContent {
+        width: 100%;
+        position: relative;
+        .IsCheckbox {
+          display: none;
+        }
+        .checkbox {
+          display: block;
+          position: absolute;
+          top: 1px;
+          right: 1px;
+        }
+      }
+      .cardFooter {
+        margin-top: 10px;
+        text-align: center;
+      }
+    }
+    .checked {
+      background-color: #f2f2f4;
+    }
+    .hoverBg {
+      /*border: 1px solid #3e89fa;*/
+      background-color: #f1f5fb;
+    }
+    .activeBg {
+      background-color: #f1f5fb;
+    }
+  }
+  .el-row:last-child {
+    margin-bottom: 0;
+  }
+  .empty {
+    line-height: 60px;
+    color: var(--el-text-color-secondary);
+    text-align: center;
+    font-size: 14px;
+  }
+}
+</style>

package/packages/form/index.js

@@ -0,0 +1,10 @@
+// 导入组件，组件必须声明 name
+import fgForm from './src/form.vue'
+
+// 为组件提供 install 安装方法，供按需引入
+fgForm.install = function (Vue) {
+  Vue.component(fgForm.name, fgForm)
+}
+
+// 默认导出组件
+export default fgForm

package/packages/form/src/EllipsisTooltip.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { ref } from 'vue'
+defineProps({
+    text: { type: [String, Number], default: '' },
+    itemStyle: { type: Object, default: () => {} },
+})
+
+const ellipsis = ref(null)
+const disableTip = ref(false)
+const onMouseOver = () => {
+    let parentWidth = ellipsis.value.parentNode.offsetWidth
+    let contentWidth = ellipsis.value.offsetWidth
+    disableTip.value = contentWidth <= parentWidth
+}
+</script>
+<template>
+    <el-tooltip effect="dark" :content="text" :disabled="disableTip" placement="top">
+        <div class="ellipsis" :style="itemStyle" @mouseover="onMouseOver">
+            <span ref="ellipsis">{{ text }}</span>
+        </div>
+    </el-tooltip>
+</template>
+<style scoped>
+    .ellipsis {
+        /*width: 100%;*/
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        cursor: pointer;
+    }
+</style>

package/packages/form/src/TextOverflow.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="name">
+    <span
+      :style="{ 'max-height': status ? textHeight : '' }"
+      :class="{ statusText: status }"
+      class="titleText"
+      ref="desc"
+    >
+      {{ content }}
+    </span>
+    <span
+      v-if="idShowText"
+      @click="status = !status"
+      :class="{ openSpan: status }"
+      class="openClose"
+      >{{ status ? '展开' : '收起' }}</span
+    >
+  </div>
+</template>
+
+<script>
+import { ref, toRefs, reactive, nextTick, onMounted, watch } from 'vue'
+export default {
+  name: 'text-overflow',
+  props: {
+    content: {
+      type: [String, Number],
+      default: '',
+    },
+    isHide: {
+      default: false,
+    },
+  },
+  setup(props, ctx) {
+    const desc = ref(null)
+    const state = reactive({
+      textHeight: null,
+      status: false,
+      idShowText: false,
+    })
+    onMounted(() => {})
+
+    const calculateText = (val) => {
+      // 这是默认两行数据的高度，一行的高度可以自定义 可以*3 *4达到三行或者四行显示展示和收起的效果
+      let defHeight = 22 * 3
+      state.textHeight = `${defHeight}px`
+      let curHeight = desc.value.offsetHeight
+      nextTick(() => {
+        if (curHeight > defHeight) {
+          state.status = true
+          state.idShowText = true
+        } else {
+          state.status = false
+          state.idShowText = false
+        }
+      })
+    }
+    watch(
+      () => [props.content, props.isHide],
+      (newValue, oldValue) => {
+        if (newValue[0]) {
+          setTimeout(() => {
+            calculateText(newValue)
+          }, 300)
+        }
+        if (newValue[1]) {
+          setTimeout(() => {
+            calculateText(newValue)
+          }, 300)
+        }
+      },
+      { immediate: true },
+    )
+    return {
+      ...toRefs(state),
+      desc,
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.name {
+  position: relative;
+  line-height: 22px;
+  padding: 5px 0;
+  .titleText {
+    color: #253555;
+    line-height: 22px;
+    word-wrap: break-word;
+    white-space: normal;
+    word-break: break-all;
+    font-size: 14px;
+  }
+  .openClose {
+    font-size: 14px;
+    color: #3e89fa;
+    padding-left: 5px;
+    cursor: pointer;
+  }
+  .openSpan {
+    position: absolute;
+    right: 0;
+    bottom: 5px;
+  }
+  .statusText {
+    overflow: hidden;
+    display: block;
+  }
+  .statusText:after {
+    content: '...';
+    position: absolute;
+    bottom: 5px;
+    right: 2px;
+    width: 49px;
+    font-size: 18px;
+    /*padding-left: 30px;*/
+    background-color: white;
+    /*background: linear-gradient(to right, rgba(255,255,255,0.2), #fff 45%);*/
+  }
+}
+</style>

package/packages/form/src/form-item.vue

@@ -0,0 +1,395 @@
+<script>
+import { defineComponent, toRef } from 'vue'
+import fgTag from '../../tags/src/tag.vue'
+import textOverFlow from './TextOverflow.vue'
+import ellipsisTooltip from './EllipsisTooltip.vue'
+import fgIconTips from '../../icon-tips'
+export default defineComponent({
+  name: 'formItem',
+  components: { fgTag, textOverFlow, fgIconTips, ellipsisTooltip },
+  props: {
+    item: {
+      type: Object,
+      default: () => {},
+    },
+    form: {
+      type: Object,
+      default: () => {},
+    },
+    edit: {
+      type: Boolean,
+      default: false,
+    },
+    key: {
+      type: Number,
+      default: 0,
+    },
+  },
+  setup(__props, { emit }) {
+    const props = __props
+    const item = props.item
+    const form = props.form
+    const handleKey = 'handler' + props.key
+
+    /* -------------- tag ./S -------------- */
+
+    const addTag = (key, tag) => {
+      emit('addTag', key, tag)
+    }
+
+    const deleteTag = (key, tag) => {
+      emit('deleteTag', key, tag)
+    }
+    /* -------------- tag ./E -------------- */
+
+    /* -------------- change 事件 ./S -------------- */
+
+    const handleChange = (val, prop, event) => {
+      emit('change', val, prop, event)
+    }
+
+    const selectRemoveTag = (val, prop) => {
+      emit('selectRemoveTag', val, prop)
+    }
+    /* -------------- change 事件 ./E -------------- */
+
+    return {
+      edit: toRef(props, 'edit'),
+      item,
+      handleKey,
+      form,
+      addTag,
+      deleteTag,
+      handleChange,
+      selectRemoveTag,
+    }
+  },
+})
+</script>
+<template>
+  <el-form-item
+    class="fg-form-item"
+    :label="item.label"
+    :prop="item.props"
+    :required="item.required"
+    :label-width="item.labelWidth"
+    :class="item.class"
+  >
+    <!--autoComplete-->
+    <el-autocomplete
+      v-if="item.type == 'autoComplete'"
+      clearable
+      :debounce="500"
+      :placeholder="item.placeholder || '请选择'"
+      v-model="form[item.props]"
+      :fetch-suggestions="item.fetchSuggestions"
+      @clear="handleChange(form[item.props], item.props, 'clear')"
+      @blur="handleChange(form[item.props], item.props, 'change')"
+      @select="handleChange(form[item.props], item.props, 'select')"
+      :trigger-on-focus="false"
+    >
+    </el-autocomplete>
+    <!-- select -->
+    <el-select
+      v-else-if="item.type == 'select'"
+      v-model="form[item.props]"
+      :placeholder="(edit || item.disabled) && !item.placeholderShow ? ' ' : item.placeholder || '请选择'"
+      :clearable="item.clearable == null ? true : item.clearable"
+      :multiple="item.multiple"
+      :disabled="item.disabled"
+      :filterable="!!item.filterable"
+      :remote="!!item.remote"
+      :remote-method="item.remoteMethod"
+      :collapse-tags="item.collapseTags"
+      :collapse-tags-tooltip="item.collapseTagsTooltip"
+      :max-collapse-tags="item.maxCollapseTags || 1"
+      @remove-tag="(tag) => selectRemoveTag(tag, item.props)"
+      @change="handleChange(form[item.props], item.props, 'change')"
+      @blur="handleChange(form[item.props], item.props, 'blur')"
+      popper-class="selectOp"
+      :teleported="false"
+      :class="{ defaultSelect: !item.remote, detailTag: edit }"
+    >
+      <el-option
+        v-for="(opt, index) in item.options"
+        :key="`${item.props}_${index}`"
+        :label="opt.label"
+        :value="opt.value"
+      >
+      </el-option>
+    </el-select>
+
+    <!-- selectSpace -->
+    <el-select
+      v-else-if="item.type == 'selectSpace'"
+      v-model="form[item.props]"
+      :placeholder="edit ? ' ' : item.placeholder || '请选择'"
+      :clearable="item.clearable == null ? true : item.clearable"
+      :multiple="item.multiple"
+      :disabled="item.disabled"
+      :filterable="!!item.filterable"
+      :remote="!!item.remote"
+      :remote-method="item.remoteMethod"
+      @remove-tag="(tag) => selectRemoveTag(tag, item.props)"
+      @change="handleChange(form[item.props], item.props, 'change')"
+      @blur="handleChange(form[item.props], item.props, 'blur')"
+      class="selectSpace"
+      popper-class="selectSpace"
+      :teleported="false"
+    >
+      <el-option
+        v-for="(opt, index) in item.options"
+        :key="`${item.props}_${index}`"
+        :label="opt.label"
+        :value="opt.value"
+      >
+        <span style="float: left">{{ opt.label }}</span>
+        <span style="float: right; color: #8492a6; font-size: 13px">{{ opt.value }}</span>
+      </el-option>
+    </el-select>
+    <!-- radio -->
+    <template v-else-if="item.type == 'radio'">
+      <template v-if="edit">
+        <span style="color: var(--el-text-color-placeholder); padding-left: 8px">
+          {{ form[item.props] }}
+        </span>
+      </template>
+      <el-radio-group
+        v-else
+        v-model="form[item.props]"
+        :disabled="item.disabled"
+        @change="handleChange(form[item.props], item.props, 'change')"
+      >
+        <span v-if="edit">
+          {{ form[item.props] }}
+        </span>
+        <template v-else>
+          <el-radio
+            v-for="(opt, index) in item.options"
+            :key="`${item.props}_${index}`"
+            :label="opt.value"
+          >
+            {{ opt.label }}
+          </el-radio>
+        </template>
+      </el-radio-group>
+    </template>
+
+    <!-- checkbox -->
+    <template v-else-if="item.type == 'checkbox'">
+      <template v-if="edit">
+        <span
+          style="color: var(--el-text-color-placeholder); padding-left: 8px"
+          v-for="(item, index) in form[item.props]"
+          :key="index"
+        >
+          {{ item }}
+        </span>
+      </template>
+      <el-checkbox-group
+        v-else
+        @change="handleChange(form[item.props], item.props, 'change')"
+        v-model="form[item.props]"
+        :disabled="item.disabled || edit"
+        :min="item.min"
+        :max="item.max"
+      >
+        <el-checkbox
+          v-for="(opt, index) in item.options"
+          :key="`${item.props}_${index}`"
+          :name="item.props"
+          :label="opt.value"
+          >{{ opt.label }}</el-checkbox
+        >
+      </el-checkbox-group>
+    </template>
+
+    <!-- tag -->
+    <fg-tag
+      v-else-if="item.type == 'tag'"
+      :tagList="form[item.props]"
+      :tagKey="item.props"
+      :label="`添加${item.label}`"
+      :edit="item.disabled || edit"
+      :maxlength="item.maxlength"
+      :limit="item.limit"
+      :repeat="item.repeat == null ? true : item.repeat"
+      @addTag="addTag"
+      @deleteTag="deleteTag"
+      :tagType="item.tagType || 'warning'"
+      :effect="item.effect || 'plain'"
+    />
+
+    <!-- daterange -->
+    <template v-else-if="item.type == 'daterange'">
+      <template v-if="edit">
+        <span style="color: var(--el-text-color-placeholder)">
+          {{ form[item.props][0] ? `${form[item.props][0]} 至 ${form[item.props][1]}` : '' }}
+        </span>
+      </template>
+      <el-date-picker
+        v-else
+        :type="item.type"
+        v-model="form[item.props]"
+        :disabled="item.disabled"
+        :clearable="item.clearable == null ? true : item.clearable"
+        value-format="YYYY-MM-DD"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        :disabledDate="item.disabledDate"
+        :shortcuts="item.shortcuts || null"
+        @change="handleChange(form[item.props], item.props, 'change')"
+      />
+    </template>
+
+    <!-- timeselect -->
+    <template v-else-if="item.type == 'timeSelect'">
+      <!-- <template v-if="edit">
+        <el-button type="text" text>
+          {{ form[item.props] || '' }}
+        </el-button>
+      </template> -->
+      <el-time-select
+        v-model="form[item.props]"
+        :disabled="item.disabled"
+        :start="item.start || '00:01'"
+        :end="item.end || '10:00'"
+        :step="item.step || '00:01'"
+        :placeholder="edit ? ' ' : item.placeholder || '请选择'"
+      />
+    </template>
+
+    <!-- timeselect -->
+    <template v-else-if="item.type == 'datePicker'">
+      <el-date-picker
+        v-model="form[item.props]"
+        :type="item.dateType || 'datetime'"
+        :placeholder="edit ? ' ' : item.placeholder || '请选择'"
+        :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
+        :value-format="item.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
+        :disabled="item.disabled"
+        :shortcuts="item.shortcuts || null"
+        :popper-class="item.popperClass"
+        :disabled-date="item.disabledDate"
+        :disabled-hours="item.disabledHours"
+        :default-time="item.defaultTime"
+        @change="handleChange(form[item.props], item.props, 'change')"
+      />
+    </template>
+
+    <template v-else-if="item.type == 'timePicker'">
+      <el-time-picker
+        v-model="form[item.props]"
+        :placeholder="edit ? ' ' : item.placeholder || '请选择'"
+        :format="item.format || 'hh:mm:ss'"
+        :default-value="item.defaultValue || new Date(0, 0, 0, 0, 0, 0)"
+        :disabled="item.disabled"
+        @change="handleChange(form[item.props], item.props, 'change')"
+      />
+    </template>
+    <template v-else-if="item.type == 'inputBreak'">
+      <textOverFlow :content="form[item.props]" :isHide="item.isHide"></textOverFlow>
+    </template>
+    <template v-else-if="item.type == 'inputTooltip'">
+      <ellipsisTooltip :text="form[item.props]" ></ellipsisTooltip>
+    </template>
+    <!-- input -->
+    <template v-else>
+      <el-input
+        v-if="item.link == null"
+        :type="item.type || 'text'"
+        v-model="form[item.props]"
+        :placeholder="(edit || item.disabled) && !item.placeholderShow ? ' ' : item.placeholder || '请输入'"
+        :clearable="item.clearable == null ? true : item.clearable"
+        :disabled="item.disabled"
+        :maxlength="item.maxlength"
+        :minlength="item.minlength"
+        :min="item.min"
+        :max="item.max"
+        :show-word-limit="item.showWordLimit"
+        :resize="item.resize || 'none'"
+        :rows="item.autosize ? item.rows : 3"
+        :autosize="item.autosize || false"
+        :class="item.className"
+        :prefix-icon="item.prefixIcon || null"
+        :suffix-icon="item.suffixIcon || null"
+        @change="handleChange(form[item.props], item.props, 'change')"
+      >
+        <template
+            v-if="item.prependTitle"
+            #prepend
+        >
+          {{ item.prependTitle }}
+        </template>
+      </el-input>
+      <el-link
+        v-else
+        type="primary"
+        @click="item.link"
+        :underline="false"
+        style="padding: 1px 11px"
+      >
+        {{ form[item.props] }}
+      </el-link>
+    </template>
+    <fgIconTips
+        v-if="item.iconTooltipContent"
+        :content="item.iconTooltipContent"
+    ></fgIconTips>
+  </el-form-item>
+</template>
+
+<style lang="scss">
+.fg-form-item {
+  .el-select,
+  .el-date-editor.el-input,
+  .el-input,
+  .el-input-group {
+    width: 100%;
+    flex: 1;
+  }
+
+  .icon-tip.el-icon {
+    color: #fa983e;
+    margin-left: 5px;
+  }
+
+  .add-tag {
+    color: #a3aec1;
+  }
+}
+.fg-tag .el-tag {
+  border-style: none;
+}
+:deep(fg-tag .el-tag.el-tag--warning) {
+  --el-tag-text-color: #fa983e !important;
+}
+:deep(fg-tag .el-tag.el-tag--warning) {
+  --el-tag-bg-color: #fff5ec !important;
+}
+:deep(fg-tag .el-tag) {
+  background-color: #fff5ec !important;
+  color: #fa983e !important;
+}
+.detailTag {
+  .el-select__tags .el-tag--info {
+    background-color: transparent !important;
+    padding: 0 10px !important;
+    margin: 2px 0;
+    border-radius: 0 !important;
+    height: 16px;
+    border-right: 1px solid #253555;
+  }
+  .el-select__tags {
+    margin-left: -8px;
+  }
+  .el-select__tags .el-tag--info:nth-last-child(1) {
+    border-right: 0;
+  }
+  .el-select__tags-text {
+    color: #253555;
+    font-size: 14px;
+  }
+}
+</style>