性能指标配置

src/views/business/performance/zhiBiaoConfig.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-dialog :visible.sync="visible" fullscreen :show-close="false">
+    <template #title>
+      <div class="dialog-title"></div>
+      <div class="dialog-header-buttons">
+        <el-button type="primary" size="mini" @click="save">保存</el-button>
+        <el-button type="danger" size="mini" @click="close">关闭</el-button>
+      </div>
+    </template>
+    <div>
+      <div class="dialog-content">
+        <div class="subtitle">性能指标配置</div>
+        <div class="reagentChange">
+          <el-row type="flex" justify="end" class="table-actions">
+            <el-button type="primary" size="mini" @click="addRow">添加</el-button>
+            <el-button type="danger" size="mini" @click="deleteRow">删除</el-button>
+          </el-row>
+          <el-row type="flex">
+            <el-col>
+              <el-table :data="tableData">
+                <el-table-column label="性能指标名称" prop="target_">
+                  <template slot-scope="{ row }">
+                    <el-input v-model="row.target_" size="mini" placeholder="请输入性能指标名称" />
+                  </template>
+                </el-table-column>
+                <el-table-column label="性能指标代码" prop="target_key_">
+                  <template slot-scope="{ row }">
+                    <el-input v-model="row.target_key_" size="mini" placeholder="请输入性能指标代码" />
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tableData: []
+    };
+  },
+  mounted() {
+    this.loadData();
+  },
+  methods: {
+    loadData() {
+      const sql = 'select * from t_xnyzpzxx';
+      this.$common.request('sql', sql).then((response) => {
+        this.tableData = response.variables.data || [];
+      });
+    },
+    addRow() {
+      this.tableData.push({ target_: '', target_key_: '' });
+    },
+    deleteRow() {
+      if (this.tableData.length > 0) {
+        this.tableData.pop();
+      }
+    },
+    save() {
+      console.log('Save clicked', this.tableData);
+    },
+    close() {
+      this.$emit('update:visible', false);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-title {
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  margin-top: 20px;
+  margin-bottom: 15px;
+  position: relative;
+}
+.subtitle {
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  margin-top: 50px;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.dialog-header-buttons {
+  position: absolute;
+  top: 10px;
+  right: 50px;
+  display: flex;
+  gap: 10px;
+}
+
+.table-actions {
+  margin-bottom: 10px;
+}
+
+.dialog-content {
+  margin-left: 200px;
+  margin-right: 200px;
+}
+</style>