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;"
            :disabled="item.attrType !== 'inputNumber' && item.attrType !== 'datetime' && item.attrType !== 'inputTag' || disabled">
            <template v-if="item.attrType == 'inputTag'">
              <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="15">
          <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.name" />
            </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)">
              <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-row>
    </div>
  </div>
</template>

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

const change = (e: string[] | undefined, index: number) => {
  console.log(e)
  emits('selectChange', { e, index })
}
onMounted(() => {
  console.log('规则数据', props.rulesAttrList)
})
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
.roleClass {
  margin-bottom: 10px;
}
</style>