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'">
            <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>
              <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
              @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'">
            <template v-if="item.operator == '1' || item.operator == null">
              <el-input-number v-model="item.min"></el-input-number>
              <span style="margin: 0 10px ;">-</span>
              <el-input-number v-model="item.max"></el-input-number>
            </template>
            <template v-if="item.operator == '2'">
              <span>＜</span>
              <el-input-number v-model="item.min"></el-input-number>
            </template>
            <template v-if="item.operator == '3'">
              <span>≤</span>
              <el-input-number v-model="item.min"></el-input-number>
            </template>
            <template v-if="item.operator == '4'">
              <span>＞</span>
              <el-input-number v-model="item.max"></el-input-number>
            </template>
            <template v-if="item.operator == '5'">
              <span>≥</span>
              <el-input-number v-model="item.max"></el-input-number>
            </template>
          </template>
          <template v-if="item.attrType == 'select'">
            <el-select v-model="item.minArray" placeholder="选择值" clearable filterable multiple
              @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" @change="change($event, index)" placeholder="输入内容后按回车键隔开" />
          </template>

          <template v-if="item.attrType == 'datetime'">
            <template v-if="item.operator == '1' || item.operator == null">
              <el-date-picker v-model="item.min" 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: 250px;">
              </el-date-picker>
              <span>~</span>
              <el-date-picker v-model="item.max" 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: 250px;">
              </el-date-picker>
            </template>
            <template v-if="item.operator == '2'">
              <span>＜</span>
              <el-date-picker v-model="item.min" 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: 170px;">
              </el-date-picker>
            </template>
            <template v-if="item.operator == '3'">
              <span>≤</span>
              <el-date-picker v-model="item.min" 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: 170px;">
              </el-date-picker>
            </template>
            <template v-if="item.operator == '4'">
              <span>＞</span>
              <el-date-picker v-model="item.max" 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: 170px;">
              </el-date-picker>
            </template>
            <template v-if="item.operator == '5'">
              <span>≥</span>
              <el-date-picker v-model="item.max" 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: 170px;">
              </el-date-picker>
            </template>
          </template>
        </el-col>
        <el-col :span="1">
          <el-icon color="#666" size="20" style="margin-left: 10px;" @click="attrDel(index)">
            <CircleCloseFilled />
          </el-icon>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<!-- 行为区域 -->
<script lang='ts' setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps<{
  rulesAttrList: any[],//list集合
}>();
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 })
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped>
.roleClass {
  margin-bottom: 10px;
}
</style>