tenant-Platform/src/components/ruleConditionContainer/index.vue

<!-- 模板区域 -->
<template>
  <div>
    <div class="flex f-c a-start m-top-20" style="width: 100%;">
      <el-row v-for="(item, index) in props.rulesAttrList" :key="index" class="roleClass flex a-c" style="width: 100%;">
        <el-col :span="5">
          <el-input v-model="item.attrName" disabled />
        </el-col>
        <el-col :span="3">
          <el-select v-model="item.operator" placeholder="运算符" style="width: 100px; margin: 0 10px;">
            <template v-if="item.attrType == 'inputTag' || item.attrType == 'checkbox' || item.attrType == 'select'">
              <el-option label="包含" value="1"></el-option>
              <el-option label="不包含" value="2"></el-option>
            </template>
            <template v-else>
              <el-option v-for="(rulesDictitem, rulesDictindex) in item.rulesDict" :key="rulesDictindex"
                :label="rulesDictitem.label" :value="rulesDictitem.value" />
            </template>
          </el-select>
        </el-col>
        <el-col :span="13">
          <template v-if="item.attrType == 'radio'">
            <el-select v-model="item.min" placeholder="选择值" clearable filterable :disabled="disabled">
              <el-option v-for="dictLabalitem in item.dictLabal" :key="dictLabalitem.id" :label="dictLabalitem.name"
                :value="dictLabalitem.code" />
            </el-select>
          </template>
          <template v-if="item.attrType == 'checkbox'">
            <el-select v-model="item.minArray" placeholder="选择值" clearable filterable multiple :disabled="disabled"
              @change="change($event, index)">
              <el-option v-for="dictLabalitem in item.dictLabal" :key="dictLabalitem.id" :label="dictLabalitem.name"
                :value="dictLabalitem.code" />
            </el-select>
          </template>
          <template v-if="item.attrType == 'inputNumber'">
            <el-row class="flex a-c">
              <template v-if="item.operator == '1' || item.operator == null">
                <el-col :span="11">
                  <el-input-number v-model="item.min" :disabled="disabled" style="width: 100%;"></el-input-number>
                </el-col>
                <el-col :span="2">
                  <div class="flex a-c j-c " style="font-size: 14px;color: #333;">至</div>
                </el-col>
                <el-col :span="11">
                  <el-input-number v-model="item.max" :disabled="disabled" style="width: 100%;"></el-input-number>
                </el-col>
              </template>
              <template v-if="item.operator == '2'">
                <el-col :span="24">
                  <el-input-number v-model="item.min" :disabled="disabled" style="width: 100%;"></el-input-number>
                </el-col>
              </template>
              <template v-if="item.operator == '3'">
                <el-col :span="24">
                  <el-input-number v-model="item.min" :disabled="disabled" style="width: 100%;"></el-input-number>
                </el-col>
              </template>
              <template v-if="item.operator == '4'">
                <el-col :span="24">
                  <el-input-number v-model="item.max" :disabled="disabled" style="width: 100%;"></el-input-number>
                </el-col>
              </template>
              <template v-if="item.operator == '5'">
                <el-col :span="24">
                  <el-input-number v-model="item.max" :disabled="disabled" style="width: 100%;"></el-input-number>
                </el-col>
              </template>
            </el-row>
          </template>
          <template v-if="item.attrType == 'select'">
            <el-select v-model="item.minArray" placeholder="选择值" clearable filterable multiple :disabled="disabled"
              @change="change($event, index, item)">
              <template #header>
                <el-checkbox v-model="item.checkAll" :indeterminate="item.indeterminate" :disabled="disabled"
                  @change="(val) => handleCheckAll(item, index, val)">
                  全选
                </el-checkbox>
              </template>
              <el-option v-for="dictLabalitem in item.dictLabal" :key="dictLabalitem.id" :label="dictLabalitem.name"
                :value="item.attrName == '车辆类型' ? dictLabalitem.code : dictLabalitem.name" />
            </el-select>
          </template>
          <template v-if="item.attrType == 'inputTag'">
            <el-input-tag v-model="item.minArray" :disabled="disabled" @change="change($event, index)"
              placeholder="输入内容后按回车键隔开" />
          </template>
          <template v-if="item.attrType == 'datetime'">
            <el-row class="flex a-c">
              <template v-if="item.operator == '1' || item.operator == null">
                <el-col :span="11">
                  <el-date-picker v-model="item.min" :disabled="disabled" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss" placeholder="选择日期时间" style="width: 100%;">
                  </el-date-picker>
                </el-col>
                <el-col :span="2">
                  <div class="flex a-c j-c " style="font-size: 14px;color: #333;">至</div>
                </el-col>
                <el-col :span="11">
                  <el-date-picker v-model="item.max" :disabled="disabled" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss" placeholder="选择日期时间" style="width: 100%;">
                  </el-date-picker>
                </el-col>
              </template>
              <template v-if="item.operator == '2'">
                <el-col :span="24">
                  <el-date-picker v-model="item.min" :disabled="disabled" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss" placeholder="选择日期时间" style="width: 100%;">
                  </el-date-picker>
                </el-col>
              </template>
              <template v-if="item.operator == '3'">
                <el-col :span="24"> <el-date-picker v-model="item.min" :disabled="disabled" type="datetime"
                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss"
                    placeholder="选择日期时间" style="width: 100%;">
                  </el-date-picker></el-col>
              </template>
              <template v-if="item.operator == '4'">
                <el-col :span="24"><el-date-picker v-model="item.max" :disabled="disabled" type="datetime"
                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss"
                    placeholder="选择日期时间" style="width: 100%;">
                  </el-date-picker></el-col>
              </template>
              <template v-if="item.operator == '5'">
                <el-col :span="24"> <el-date-picker v-model="item.max" :disabled="disabled" type="datetime"
                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss"
                    placeholder="选择日期时间" style="width: 100%;">
                  </el-date-picker></el-col>

              </template>
            </el-row>

          </template>
        </el-col>
        <el-col :span="1">
          <el-icon v-if="!disabled" color="#666" size="18" style="margin-left: 10px;" @click="attrDel(index)">
            <Delete />
          </el-icon>
        </el-col>
        <el-col :span="2">
          <el-checkbox v-if="item.attrName === '车牌号'" :disabled="disabled" @change="licenseNoSelect($event, item)">全选</el-checkbox>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<!-- 行为区域 -->
<script lang='ts' setup>
import type { CheckboxValueType } from 'element-plus'
const props = defineProps<{
  rulesAttrList: any[],//list集合
  disabled?: boolean,
}>();
const emits = defineEmits(["Del", 'save', 'selectChange']);
//右侧删除图标
const attrDel = (index: number) => {
  emits('Del', index)
}

const change = (e: string[] | undefined, index: number, item: any) => {
  if (item?.attrType == 'select') {
    if (item.minArray.length === 0) {
      item.checkAll = false
      item.indeterminate = false
    } else if (item.minArray.length === item.dictLabal.length) {
      item.checkAll = true
      item.indeterminate = false
    } else {
      item.indeterminate = true
    }
  }
  emits('selectChange', { e, index })
}

const licenseNoSelect = (e, item) => {
  if (e) {
    item.minArray = item.dictLabal.map(a => {
      return a.name
    })
  } else {
    item.minArray = []
  }
}

const handleCheckAll = (item, index: number, val: boolean) => {

  item.indeterminate = false
  if (val) {
    item.minArray = item.dictLabal.map((_) => _.attrName == '车辆类型' ? _.code : _.name)
  } else {
    item.minArray = []
  }
}
onMounted(() => {
  console.log('规则数据', props.rulesAttrList)
})
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
.roleClass {
  margin-bottom: 10px;
}
</style>