问题整改界面 1. 优化各项状态展示效果 2. 新增左侧关键字筛选功能

riku

2024-11-21 55bd7fb6365909a0cbcf0957333c7876bd791bb9

 src/components/ToolBar.vue

@@ -1,17 +1,26 @@
<template>
  <div class="layout" >
  <div class="layout">
    <el-row v-if="title">
      <el-col :span=" 16 " class="title">{{ title }}</el-col>
      <el-col :span=" 8 ">
      <el-col :span="16" class="title">{{ title }}</el-col>
      <el-col :span="8">
        <el-row justify="end" class="btn-group">
          <el-button v-for="(b, i) in buttons" :key=" i " :type=" b.color ? b.color : 'primary' " size="small">{{ b.name
          }}</el-button>
          <el-button
            v-for="(b, i) in buttons"
            :key="i"
            :type="b.color ? b.color : 'primary'"
            size="small"
            plain
            @click="b.click"
            >{{ b.name }}</el-button
          >
        </el-row>
      </el-col>
    </el-row>
    <el-row class="tag-group" v-if="title">
      <el-space>
        <el-tag v-for="(d, i) in descriptions" :key=" i " type="info" size="small">{{ d.name + ": " + d.value }}</el-tag>
        <el-tag v-for="(d, i) in descriptions" :key="i" :type="d.type" size="small">{{
          d.name + ': ' + d.value
        }}</el-tag>
      </el-space>
    </el-row>
  </div>
@@ -27,21 +36,22 @@
      type: Array,
      default: () => [
        {
          name: "",
          value: "",
        },
      ],
          name: '',
          value: ''
        }
      ]
    },
    buttons: {
      type: Array,
      default: () => [
        {
          name: "",
          color: "primary",
        },
      ],
    },
  },
          name: '',
          color: 'primary',
          click: () => {}
        }
      ]
    }
  }
};
</script>
<style scoped>