!78 全系统按钮列表等优化 Merge pull request !78 from Alioo/develop_alioo

zhitan-cloud

2025-02-14 ddad886321455b5f5569ec6335eea478ae7fe7df

!78 全系统按钮列表等优化
Merge pull request !78 from Alioo/develop_alioo

 zhitan-vue/src/assets/styles/index.scss

@@ -135,7 +135,8 @@

//main-container全局样式
.app-container {
  padding: 20px;
  // padding: 0 12px; 
  padding-right: 12px;
}

.components-container {

 zhitan-vue/src/assets/styles/page.scss

@@ -33,6 +33,7 @@
    }

    .table-bg-style {
      margin-top: 12px;
      .theme-dark-mt20 {
        margin-top: 20px;
      }
@@ -56,7 +57,7 @@
  }

  .table-box {
    margin: 20px;
    margin: 0;

    .table-title-box {
      font-weight: bold;
@@ -106,10 +107,12 @@

    .form-card {
      background: #fff;
      // background: #F7F8FA;
      border-radius: 0px 0px 0px 0px;
      // border: 1px solid #000000;
      padding: 18px 0 0 15px;
    }
    
    .table-bg-style {
      background-color: #fff;
      padding-top: 12px;
@@ -134,7 +137,7 @@
  }

  .table-box {
    margin: 20px;
    margin: 10px 20px;

    .table-title-box {
      font-weight: bold;

 zhitan-vue/src/components/Echarts/LineChart.vue

@@ -74,7 +74,8 @@
        color: "#2979ff",
      },
    },
    color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
    color: ["#4dadf8", "#19be6b", "#ff9900", "#3d8a32", "#e8463a", "#ff4e3f"],
    // color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
    tooltip: {
      trigger: "axis",
      axisPointer: {

 zhitan-vue/src/views/alarmmanage/alarmrecord/alarmRecord.vue

@@ -6,7 +6,7 @@
      </div>
      <div class="page-container-right">
        <div class="form-card">
          <el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
          <el-form :model="form" ref="queryRef" :inline="true" label-width="68px">
            <el-form-item prop="eierarchyFlag">
              <el-radio-group v-model="form.eierarchyFlag">
                <el-radio label="B" name="eierarchyFlag">本级</el-radio>
@@ -14,14 +14,25 @@
              </el-radio-group>
            </el-form-item>
            <el-form-item label="时间选择">
              <el-date-picker v-model="form.dataTime" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss" placeholder="时间" style="width: 370px" unlink-panels
                time-format="HH:mm:ss" />
              <el-date-picker
                v-model="form.dataTime"
                type="datetimerange"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="时间"
                style="width: 340px"
                unlink-panels
                time-format="HH:mm:ss"
              />
            </el-form-item>
            <el-form-item label="报警类别" prop="indexType">
              <el-select v-model="form.indexType" placeholder="请选择报警类别" style="width: 200px">
                <el-option v-for="dict in alarm_record_category" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
                <el-option
                  v-for="dict in alarm_record_category"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="能源类型" prop="energyType">
@@ -39,18 +50,26 @@
            </el-form-item>
          </el-form>
        </div>
        <BaseCard :title="currentNode ? currentNode.label + '--节点配置' : '暂无节点配置'
          ">
        <BaseCard :title="currentNode ? currentNode.label + '--节点配置' : '暂无节点配置'">
          <div class="table-box">
            <el-table :data="tableData" v-loading="loading" height="calc(100vh - 450px)">
              <el-table-column type="index" label="序号" width="70" />
              <el-table-column label="用能单元" prop="modelName" align="center" show-overflow-tooltip />
              <el-table-column label="指标名称" prop="indexName" align="center" show-overflow-tooltip />
              <el-table-column label="报警类别" prop="indexType" align="center" show-overflow-tooltip :formatter="(row, column) =>
                proxy.selectDictLabel(alarm_record_category, row.indexType)
                " />
              <el-table-column label="能源类型" prop="energyId" align="center" show-overflow-tooltip :formatter="(row, column) => formatterLabel(energyTypeList, row.energyId)
                " />
              <el-table-column
                label="报警类别"
                prop="indexType"
                align="center"
                show-overflow-tooltip
                :formatter="(row, column) => proxy.selectDictLabel(alarm_record_category, row.indexType)"
              />
              <el-table-column
                label="能源类型"
                prop="energyId"
                align="center"
                show-overflow-tooltip
                :formatter="(row, column) => formatterLabel(energyTypeList, row.energyId)"
              />
              <el-table-column label="预设值" prop="energyType" align="center" show-overflow-tooltip />
              <el-table-column label="报警值" prop="alarmValue" align="center" show-overflow-tooltip />
              <el-table-column label="报警时间" prop="alarmBeginTime" align="center" show-overflow-tooltip />
@@ -58,17 +77,22 @@
          </div>
        </BaseCard>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="getList(currentNode)" />
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList(currentNode)"
        />
      </div>
    </div>
  </div>
</template>
<script setup name="alarmRecord">
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
const { proxy } = getCurrentInstance();
let { alarm_record_category } = proxy.useDict("alarm_record_category");
import { historicalAlarm } from "@/api/alarmManage/alarmManage";
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
const { proxy } = getCurrentInstance()
let { alarm_record_category } = proxy.useDict("alarm_record_category")
import { historicalAlarm } from "@/api/alarmManage/alarmManage"
let form = ref({
  eierarchyFlag: "B",
  dataTime: [
@@ -79,74 +103,77 @@
  indexType: "",
  // energyType: '',
  indexName: "",
});
const energyTypeList = ref();
})
const energyTypeList = ref()
function getEnergyTypeList() {
  listEnergyTypeList().then((res) => {
    energyTypeList.value = res.data;
    form.value.indexType = alarm_record_category.value[0].value;
    energyTypeList.value = res.data
    form.value.indexType = alarm_record_category.value[0].value
    // form.value.energyType = energyTypeList.value[0].enersno
    getList();
  });
    getList()
  })
}
// getEnergyTypeList()
let currentNode = ref();
let currentNode = ref()
function handleNodeClick(data) {
  currentNode.value = data;
  getEnergyTypeList();
  currentNode.value = data
  getEnergyTypeList()
}

let tableData = ref([]);
let total = ref(0);
let loading = ref(false);
let tableData = ref([])
let total = ref(0)
let loading = ref(false)
let queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
})

function formatterLabel(list, value) {
  let dict = list.find((item) => item.enersno == value);
  return dict ? dict.enername : "";
  let dict = list.find((item) => item.enersno == value)
  return dict ? dict.enername : ""
}

function getList() {
  form.value.nodeId = currentNode.value.id;
  loading.value = true;
  form.value.nodeId = currentNode.value.id
  loading.value = true
  historicalAlarm({
    ...form.value,
    ...queryParams.value,
    beginTime: form.value.dataTime[0],
    endTime: form.value.dataTime[1],
  }).then((response) => {
    console.log(11, response);
    console.log(11, response)
    if (response.code === 200) {
      tableData.value = response.rows;
      total.value = response.total;
      loading.value = false;
      tableData.value = response.rows
      total.value = response.total
      loading.value = false
    } else {
      proxy.$modal.msgError(response.msg);
      proxy.$modal.msgError(response.msg)
    }
  });
  })
}

function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  queryParams.value.pageNum = 1
  getList()
}
function resetQuery() {
  form.value = {
    eierarchyFlag: 'B',
    dataTime: [proxy.dayjs(new Date()).format("YYYY-MM-DD 00:00:00"), proxy.dayjs(new Date()).format("YYYY-MM-DD 23:59:59")],
    nodeId: '',
    eierarchyFlag: "B",
    dataTime: [
      proxy.dayjs(new Date()).format("YYYY-MM-DD 00:00:00"),
      proxy.dayjs(new Date()).format("YYYY-MM-DD 23:59:59"),
    ],
    nodeId: "",
    indexType: alarm_record_category.value[0].value,
    // energyType: '',
    indexName: '',
    indexName: "",
  }
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  };
  getList();
  }
  getList()
}
</script>

@@ -190,4 +217,4 @@
.table-box {
  height: calc(100vh - 464px);
}
</style>
</style>

 zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue

@@ -40,12 +40,12 @@
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="Plus" @click="handleAdd"> 新增 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-bg-style">
      <div class="theme-dark-mt20 mb20 ml20">
        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
      </div>
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column prop="time" label="时间" show-overflow-tooltip align="center" />

 zhitan-vue/src/views/auxiliaryentry/productoutput/productOutput.vue

@@ -6,12 +6,7 @@
      </div>
      <div class="page-container-right">
        <div class="form-card">
          <el-form
            :model="queryParams"
            ref="queryRef"
            :inline="true"
            v-show="showSearch"
          >
          <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
            <el-form-item label="期间" prop="timeType">
              <el-select
                v-model="queryParams.timeType"
@@ -19,12 +14,7 @@
                style="width: 120px"
                @change="handleTimeType"
              >
                <el-option
                  v-for="dict in period"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
                <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
@@ -58,33 +48,20 @@
              />
            </el-form-item>
            <el-form-item label="产品类型">
              <el-select
                v-model="queryParams.productType"
                placeholder="产品类型"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in product_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              <el-select v-model="queryParams.productType" placeholder="产品类型" style="width: 100%">
                <el-option v-for="dict in product_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">
                搜索
              </el-button>
              <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
              <el-button icon="Refresh" @click="resetQuery"> 重置 </el-button>
            </el-form-item>
            <el-form-item style="float: right">
              <el-button type="primary" icon="Plus" @click="handleAdd"> 新增 </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table-box">
          <div class="mt20 mb20">
            <el-button type="primary" icon="Plus" @click="handleAdd">
              新增
            </el-button>
          </div>
          <el-table v-loading="loading" :data="productoutputList">
            <el-table-column
              label="用能单元"
@@ -93,13 +70,7 @@
              prop="nodeName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="期间"
              align="center"
              key="timeType"
              prop="timeType"
              :show-overflow-tooltip="true"
            >
            <el-table-column label="期间" align="center" key="timeType" prop="timeType" :show-overflow-tooltip="true">
              <template #default="scope">
                <dict-tag :options="period" :value="scope.row.timeType" />
              </template>
@@ -120,10 +91,7 @@
              :show-overflow-tooltip="true"
            >
              <template #default="scope">
                <dict-tag
                  :options="product_type"
                  :value="scope.row.productType"
                />
                <dict-tag :options="product_type" :value="scope.row.productType" />
              </template>
            </el-table-column>
            <!-- <el-table-column
@@ -133,24 +101,12 @@
              prop="name"
              :show-overflow-tooltip="true"
            /> -->
            <el-table-column
              label="单位"
              align="center"
              key="unit"
              prop="unit"
              :show-overflow-tooltip="true"
            >
            <el-table-column label="单位" align="center" key="unit" prop="unit" :show-overflow-tooltip="true">
              <template #default="scope">
                <dict-tag :options="sys_unit" :value="scope.row.unit" />
              </template>
            </el-table-column>
            <el-table-column
              label="产量"
              align="center"
              key="number"
              prop="number"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="产量" align="center" key="number" prop="number" :show-overflow-tooltip="true" />
            <el-table-column
              label="提交时间"
              align="center"
@@ -158,32 +114,13 @@
              :show-overflow-tooltip="true"
              width="200"
            />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="200"
            >
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
              <template #default="scope">
                <el-tooltip content="编辑" placement="top">
                  <el-button
                    link
                    type="primary"
                    icon="Edit"
                    @click="handleUpdate(scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"> 编辑 </el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                  <el-button
                    link
                    type="primary"
                    icon="Delete"
                    @click="handleDelete(scope.row)"
                  >
                    删除
                  </el-button>
                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
@@ -203,11 +140,7 @@
        <el-row>
          <el-col :span="12">
            <el-form-item label="用能单元" prop="nodeName">
              <el-input
                v-model="form.nodeName"
                placeholder="请输入用能单元"
                disabled
              />
              <el-input v-model="form.nodeName" placeholder="请输入用能单元" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -219,12 +152,7 @@
                style="width: 100%"
                @change="handleTimeTypeAdd"
              >
                <el-option
                  v-for="dict in period"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
                <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
@@ -261,18 +189,8 @@
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品类型" prop="productType">
              <el-select
                v-model="form.productType"
                placeholder="产品类型"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="dict in product_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              <el-select v-model="form.productType" placeholder="产品类型" clearable style="width: 100%">
                <el-option v-for="dict in product_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
@@ -287,18 +205,8 @@
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="单位" prop="unit">
              <el-select
                v-model="form.unit"
                placeholder="请选择单位"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="dict in sys_unit"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              <el-select v-model="form.unit" placeholder="请选择单位" clearable style="width: 100%">
                <el-option v-for="dict in sys_unit" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
@@ -331,19 +239,15 @@
  addProductoutput,
  updateProductoutput,
  delProductoutput,
} from "@/api/auxiliaryEntry/productOutput";
const { proxy } = getCurrentInstance();
import { useRoute } from "vue-router";
const { period, sys_unit, product_type } = proxy.useDict(
  "period",
  "sys_unit",
  "product_type"
);
const productoutputList = ref([]);
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const title = ref("");
} from "@/api/auxiliaryEntry/productOutput"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
const { period, sys_unit, product_type } = proxy.useDict("period", "sys_unit", "product_type")
const productoutputList = ref([])
const open = ref(false)
const loading = ref(false)
const showSearch = ref(true)
const title = ref("")
const data = reactive({
  form: {},
  queryParams: {
@@ -358,12 +262,8 @@
  },
  query: { ...useRoute().query },
  rules: {
    timeType: [
      { required: true, message: "期间不能为空", trigger: ["blur", "change"] },
    ],
    dataTime: [
      { required: true, message: "时间不能为空", trigger: ["blur", "change"] },
    ],
    timeType: [{ required: true, message: "期间不能为空", trigger: ["blur", "change"] }],
    dataTime: [{ required: true, message: "时间不能为空", trigger: ["blur", "change"] }],
    productType: [
      {
        required: true,
@@ -373,78 +273,74 @@
    ],
    // name: [{ required: true, message: "产品名称不能为空", trigger: "blur" }],
    unit: [{ required: true, message: "单位不能为空", trigger: "blur" }],
    number: [
      { required: true, message: "产量不能为空", trigger: ["blur", "change"] },
    ],
    number: [{ required: true, message: "产量不能为空", trigger: ["blur", "change"] }],
  },
});
const { queryParams, query, form, rules } = toRefs(data);
})
const { queryParams, query, form, rules } = toRefs(data)
/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id;
  queryParams.value.nodeName = data.label;
  queryParams.value.productType = null;
  handleTimeType(period.value[0].value);
  handleQuery();
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  queryParams.value.productType = null
  handleTimeType(period.value[0].value)
  handleQuery()
}
function handleTimeType(e) {
  queryParams.value.timeType = e;
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy
    .dayjs(new Date())
    .format(e == "YEAR" ? "YYYY" : e == "MONTH" ? "YYYY-MM" : "YYYY-MM-DD");
    .format(e == "YEAR" ? "YYYY" : e == "MONTH" ? "YYYY-MM" : "YYYY-MM-DD")
}
// 辅助录入-产品产量录入-列表
function getList() {
  loading.value = true;
  loading.value = true
  listProductoutput(
    proxy.addDateRange({
      ...queryParams.value,
      ...query.value,
    })
  ).then((res) => {
    loading.value = false;
    productoutputList.value = res.rows;
    queryParams.value.total = res.total;
  });
    loading.value = false
    productoutputList.value = res.rows
    queryParams.value.total = res.total
  })
}
// 辅助录入-产品产量录入-搜索
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  queryParams.value.pageNum = 1
  getList()
}
// 辅助录入-产品产量录入-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = 10;
  queryParams.value.total = 0;
  queryParams.value.timeType = null;
  queryParams.value.dataTime = null;
  queryParams.value.productType = null;
  handleTimeType(period.value[0].value);
  handleQuery();
  proxy.resetForm("queryRef")
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  queryParams.value.total = 0
  queryParams.value.timeType = null
  queryParams.value.dataTime = null
  queryParams.value.productType = null
  handleTimeType(period.value[0].value)
  handleQuery()
}
// 辅助录入-产品产量录入-新增
function handleAdd() {
  reset();
  form.value.nodeId = queryParams.value.nodeId;
  form.value.nodeName = queryParams.value.nodeName;
  handleTimeTypeAdd(period.value[0].value);
  title.value = "新增产品产量录入";
  open.value = true;
  reset()
  form.value.nodeId = queryParams.value.nodeId
  form.value.nodeName = queryParams.value.nodeName
  handleTimeTypeAdd(period.value[0].value)
  title.value = "新增产品产量录入"
  open.value = true
}
function handleTimeTypeAdd(e) {
  form.value.timeType = e;
  form.value.dataTime = proxy
    .dayjs(new Date())
    .format(e == "YEAR" ? "YYYY" : e == "MONTH" ? "YYYY-MM" : "YYYY-MM-DD");
  form.value.timeType = e
  form.value.dataTime = proxy.dayjs(new Date()).format(e == "YEAR" ? "YYYY" : e == "MONTH" ? "YYYY-MM" : "YYYY-MM-DD")
}
// 辅助录入-产品产量录入-编辑
function handleUpdate(row) {
  reset();
  form.value = { ...row };
  open.value = true;
  title.value = "编辑产品产量录入";
  reset()
  form.value = { ...row }
  open.value = true
  title.value = "编辑产品产量录入"
}
// 辅助录入-产品产量录入-新增/编辑-保存
function submitForm() {
@@ -452,24 +348,24 @@
    if (valid) {
      if (form.value.productOutputId != undefined) {
        updateProductoutput(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addProductoutput(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  });
  })
}
// 辅助录入-产品产量录入-新增/编辑-取消
function cancel() {
  open.value = false;
  reset();
  open.value = false
  reset()
}
// 辅助录入-产品产量录入-新增/编辑-表单重置
function reset() {
@@ -480,8 +376,8 @@
    number: "1",
    timeType: "",
    unit: "",
  };
  proxy.resetForm("formRef");
  }
  proxy.resetForm("formRef")
}
// 辅助录入-产品产量录入-删除
function handleDelete(row) {
@@ -489,13 +385,13 @@
    .confirm('是否确认删除时间为"' + row.dataTime + '"的数据项？')
    // .confirm('是否确认删除产品名称为"' + row.name + '"的数据项？')
    .then(function () {
      return delProductoutput(row.productOutputId);
      return delProductoutput(row.productOutputId)
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {});
    .catch(() => {})
}
</script>
<style scoped lang="scss">

 zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue

@@ -9,14 +9,13 @@
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-bg-style">
      <div class="theme-dark-mt20 mb20 ml20">
        <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        <!-- <el-button type="primary" icon="Delete">删除</el-button> -->
      </div>
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column prop="limitName" label="限值类型名称" show-overflow-tooltip align="center" />

 zhitan-vue/src/views/businessconfiguration/gatewayledger/gatewayLedger.vue

@@ -11,14 +11,13 @@
        <el-form-item label="测点数量:" class="header-box">
          <span class="count">{{ ptNum || 0 }}</span>
        </el-form-item>
        <div class="mb20 ml20 mr20" style="float: right">
          <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
          <el-button type="primary" icon="Download" @click="handleExport">导出</el-button>
        </div>
      </el-form>
    </div>
    <div class="table-bg-style">
      <div class="theme-dark-mt20 mb20 ml20">
        <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        <el-button type="primary" icon="Download" @click="handleExport">导出</el-button>
      </div>

      <div class="table-box">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column prop="gatewayNum" label="网关编号" show-overflow-tooltip align="center" />

 zhitan-vue/src/views/businessconfiguration/prealarmmanage/prealarmmanage.vue

@@ -1,140 +1,143 @@
<template>
    <div class="page">
        <div class="page-container">
            <div class="page-container-left">
                <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" />
  <div class="page">
    <div class="page-container">
      <div class="page-container-left">
        <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" />
      </div>
      <div class="page-container-right">
        <div class="page-container-right">
          <div class="tab-box">
            <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')">采集点管理</div>
            <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')">统计指标管理</div>
          </div>
          <BaseCard :title="currentNode ? currentNode.label + '--节点配置' : '暂无节点配置'">
            <div>
              <div class="content-box" v-if="tab == '1'">
                <CollectionPointManage ref="collectionPointManageRef" />
              </div>
              <div class="content-box" v-if="tab == '2'">
                <StatisticalIndicatorsManage ref="statisticalIndicatorsManageRef" />
              </div>
            </div>
            <div class="page-container-right">
                <div class="page-container-right">
                    <div class="mb20 mt20 ml20 tab-box">
                        <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')">
                            采集点管理
                        </div>
                        <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')">
                            统计指标管理
                        </div>
                    </div>
                    <BaseCard :title="currentNode ? currentNode.label + '--节点配置' : '暂无节点配置'">
                        <div>
                            <div class="content-box" v-if="tab == '1'">
                                <CollectionPointManage ref="collectionPointManageRef" />
                            </div>
                            <div class="content-box" v-if="tab == '2'">
                                <StatisticalIndicatorsManage ref="statisticalIndicatorsManageRef" />
                            </div>
                        </div>
                    </BaseCard>
                </div>
            </div>

          </BaseCard>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="preAlarmManage">
import CollectionPointManage from './components/collectionpointmanage/CollectionPointManage.vue'
import StatisticalIndicatorsManage from './components/statisticalindicatorsmanage/StatisticalIndicatorsManage.vue'
import CollectionPointManage from "./components/collectionpointmanage/CollectionPointManage.vue"
import StatisticalIndicatorsManage from "./components/statisticalindicatorsmanage/StatisticalIndicatorsManage.vue"

let currentNode = ref()
let tab = ref('1')
let tab = ref("1")
let collectionPointManageRef = ref()
let statisticalIndicatorsManageRef = ref('1')
let statisticalIndicatorsManageRef = ref("1")

function handleTab(value) {
    tab.value = value
    nextTick(() => {
        if (value == 1 && collectionPointManageRef.value) {
            collectionPointManageRef.value.getList(currentNode.value)
        }
        if (value == 2 && statisticalIndicatorsManageRef.value) {
            statisticalIndicatorsManageRef.value.getList(currentNode.value)
        }
    });

  tab.value = value
  nextTick(() => {
    if (value == 1 && collectionPointManageRef.value) {
      collectionPointManageRef.value.getList(currentNode.value)
    }
    if (value == 2 && statisticalIndicatorsManageRef.value) {
      statisticalIndicatorsManageRef.value.getList(currentNode.value)
    }
  })
}

function handleNodeClick(data) {
    currentNode.value = data
    handleTab(tab.value)
    // handleQuery();
  currentNode.value = data
  handleTab(tab.value)
  // handleQuery();
}

</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";


.page-box {
    height: calc(100vh - 145px);
  height: calc(100vh - 145px);

    .tree-box {
        height: calc(100% - 70px);
        overflow-y: auto !important;
  .tree-box {
    height: calc(100% - 70px);
    overflow-y: auto !important;
  }

  .select-box {
    display: flex;
    align-items: center;

    :deep .el-icon {
      color: #fff;
      margin: 0 10px 0 15px;
      font-size: 20px;
      // &:hover{
      //     color: #3371EB;
      // }
    }
  }

    .select-box {
        display: flex;
        align-items: center;
  .node-opt {
    flex: 1;
    text-align: right;
    margin-right: 5px;

        :deep .el-icon {
            color: #fff;
            margin: 0 10px 0 15px;
            font-size: 20px;
            // &:hover{
            //     color: #3371EB;
            // }
        }
    :deep .el-icon {
      color: #fff;
      margin-right: 5px;
    }

    .node-opt {
        flex: 1;
        text-align: right;
        margin-right: 5px;

        :deep .el-icon {
            color: #fff;
            margin-right: 5px;
        }
    }


  }
}

:deep .el-tabs__nav-wrap:after {
    background: transparent;
  background: transparent;
}

:deep .el-tabs__item {
    color: #fff;
    font-size: 20px;
    padding: 0 20px;
  color: #fff;
  //   font-size: 20px;
  padding: 0 20px;

    &.is-active,
    &:hover {
        color: #999 !important;
    }
  &.is-active,
  &:hover {
    color: #999 !important;
  }
}

.tab-box {
    display: flex;
    align-items: center;
  display: flex;
  align-items: center;
  color: #fff;
  border-bottom: 1px solid #3371eb;
  margin-right: 20px;
  font-size: 15px;
  margin-left: 15px;

  .tab-li {
    cursor: pointer;
    border: 1px solid #3371eb;
    padding: 8px 20px;
    border-radius: 5px 5px 0 0;
  }

  .is-tab {
    background: #3371eb;
    color: #fff;
    border-bottom: 1px solid #3371EB;
    margin-right: 20px;
  }
}
.themeDark {
  .tab-box {
    color: #fff;
  }
}

    .tab-li {
        cursor: pointer;
        border: 1px solid #3371EB;
        padding: 10px 25px;
        border-radius: 5px 5px 0 0;
    }

    .is-tab {
        background: #3371EB;
    }
.themeLight {
  .tab-box {
    color: #333;
  }
}

.content-box {
    height: calc(100vh - 317px) !important;

  height: calc(100vh - 317px) !important;
}
</style>
</style>

 zhitan-vue/src/views/carbonemission/carbonEmission.vue

@@ -35,16 +35,16 @@
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport"> 导出 </el-button>
              <el-button type="warning" icon="Download" @click="handleExport"> 导出 </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div
          style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto"
        >
          <div class="card-list" v-if="listTop.length > 1">
          <!-- <div class="" v-if="listTop.length > 1" style="margin: 12px 0 0 18px">
            <el-button @click="dialogVisible = true"> 查看更多 </el-button>
          </div>
          </div> -->
          <template v-for="(row, rowIndex) in listTop" :key="rowIndex" v-loading="loading">
            <div class="card-list" v-if="rowIndex == 0">
              <template v-for="(item, index) in row" :key="index">

 zhitan-vue/src/views/comprehensive/comps/LineChart.vue

@@ -49,7 +49,7 @@
        color: "#2979ff",
      },
    },
    color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
    color: ["#40c2ff", "#2979ff", "#ff9900", "#fa3534"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
@@ -65,7 +65,7 @@
      },
    },
    grid: {
      top: "40",
      top: "60",
      left: "50",
      right: "40",
      bottom: "20",

 zhitan-vue/src/views/comprehensive/dailyComprehensive/index.vue

@@ -154,32 +154,6 @@
    console.log(expectedData)

    lineChartData.value = {
      // xData: [
      //   "0时",
      //   "1时",
      //   "2时",
      //   "3时",
      //   "4时",
      //   "5时",
      //   "6时",
      //   "7时",
      //   "8时",
      //   "9时",
      //   "10时",
      //   "11时",
      //   "12时",
      //   "13时",
      //   "14时",
      //   "15时",
      //   "16时",
      //   "17时",
      //   "18时",
      //   "19时",
      //   "20时",
      //   "21时",
      //   "22时",
      //   "23时",
      // ],
      xData: actualData,
      yData: expectedData,
      title,

 zhitan-vue/src/views/dataMonitoring/historyDataTrend/index.vue

@@ -52,7 +52,7 @@
              </div>
            </div>
            <div class="chart-box" v-loading="loading" v-show="activeKey === 1">
              <LineChart ref="LineChartRef" :chartData="lineChartData" />
              <LineChart ref="LineChartRef" :chartData="lineChartData" :chartType="'bar'" />
            </div>
            <div style="margin-top: 16px" v-show="activeKey === 2">
              <div class="" style="padding: 0 16px">

 zhitan-vue/src/views/energyanalysis/comprehensive/comprehensive.vue

@@ -8,42 +8,40 @@
        <div class="form-card">
          <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item label="期间" prop="timeType">
              <el-select v-model="queryParams.timeType" placeholder="期间" clearable style="width: 120px"
                @change="handleTimeType">
              <el-select
                v-model="queryParams.timeType"
                placeholder="期间"
                clearable
                style="width: 120px"
                @change="handleTimeType"
              >
                <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker v-model="queryParams.dataTime" :type="queryParams.timeType == 'YEAR'
                ? 'year'
                : queryParams.timeType == 'MONTH'
                  ? 'month'
                  : 'date'
                " :format="queryParams.timeType == 'YEAR'
                  ? 'YYYY'
                  : queryParams.timeType == 'MONTH'
                    ? 'YYYY-MM'
                    : 'YYYY-MM-DD'
                  " value-format="YYYY-MM-DD" placeholder="时间" style="width: 100%" />
              <el-date-picker
                v-model="queryParams.dataTime"
                :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                :format="
                  queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'
                "
                value-format="YYYY-MM-DD"
                placeholder="时间"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">
                搜索
              </el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
              <!-- <el-button icon="Refresh" @click="resetQuery">重置</el-button> -->
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport">
                导出
              </el-button>
              <el-button type="warning" icon="Download" @click="handleExport"> 导出 </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="
            height: calc(100vh - 220px) !important;
            max-height: calc(100vh - 220px) !important;
            overflow-y: auto;
          ">
        <div
          style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto"
        >
          <BaseCard :title="queryParams.nodeName + '-综合能耗趋势'">
            <div class="chart-box" v-loading="loading">
              <div id="Chart1" />
@@ -53,13 +51,16 @@
            <el-col :span="7">
              <BaseCard :title="queryParams.nodeName + '-综合能耗同比环比'">
                <div class="card-list" v-loading="loading">
                  <div class="card-list-item" v-show="settingsStore.sideTheme == 'theme-dark'"
                    :style="{ backgroundImage: 'url(' + item.bg + ')' }" v-for="item in comprehensiveTable"
                    :key="item.title">
                  <div
                    class="card-list-item"
                    v-show="settingsStore.sideTheme == 'theme-dark'"
                    :style="{ backgroundImage: 'url(' + item.bg + ')' }"
                    v-for="item in comprehensiveTable"
                    :key="item.title"
                  >
                    <div class="item-left">
                      {{ Math.abs(item.icon) }}%
                      <el-icon :color="item.icon > 0 ? 'green' : item.icon < 0 ? 'red' : ''
                        ">
                      <el-icon :color="item.icon > 0 ? 'green' : item.icon < 0 ? 'red' : ''">
                        <Top v-if="item.icon > 0" />
                        <Bottom v-if="item.icon < 0" />
                      </el-icon>
@@ -72,18 +73,19 @@
                        <div class="item-right-bottom-left">
                          {{ node.label }}
                        </div>
                        <div class="item-right-bottom-right">
                          {{ Number(node.value.toFixed(2)) }} tce
                        </div>
                        <div class="item-right-bottom-right">{{ Number(node.value.toFixed(2)) }} tce</div>
                      </div>
                    </div>
                  </div>
                  <div class="card-list-item" v-show="settingsStore.sideTheme == 'theme-light'"
                    v-for="item in comprehensiveTable" :key="item.title">
                  <div
                    class="card-list-item"
                    v-show="settingsStore.sideTheme == 'theme-light'"
                    v-for="item in comprehensiveTable"
                    :key="item.title"
                  >
                    <div class="item-left">
                      {{ Math.abs(item.icon) }} %
                      <el-icon :color="item.icon > 0 ? 'green' : item.icon < 0 ? 'red' : ''
                        ">
                      <el-icon :color="item.icon > 0 ? 'green' : item.icon < 0 ? 'red' : ''">
                        <Top v-if="item.icon > 0" />
                        <Bottom v-if="item.icon < 0" />
                      </el-icon>
@@ -96,9 +98,7 @@
                        <div class="item-right-bottom-left">
                          {{ node.label }}
                        </div>
                        <div class="item-right-bottom-right">
                          {{ Number(node.value.toFixed(2)) }}tce
                        </div>
                        <div class="item-right-bottom-right">{{ Number(node.value.toFixed(2)) }}tce</div>
                      </div>
                    </div>
                  </div>
@@ -123,10 +123,20 @@
          <BaseCard :title="queryParams.nodeName + '-综合能耗统计分析表'" v-loading="loading">
            <div class="table-box">
              <el-table :data="comprehensiveList" show-summary>
                <el-table-column label="日期" align="center" key="currentTime" prop="currentTime"
                  :show-overflow-tooltip="true" />
                <el-table-column label="综合能耗量(tce)" align="center" key="currentValue" prop="currentValue"
                  :show-overflow-tooltip="true" />
                <el-table-column
                  label="日期"
                  align="center"
                  key="currentTime"
                  prop="currentTime"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="综合能耗量(tce)"
                  align="center"
                  key="currentValue"
                  prop="currentValue"
                  :show-overflow-tooltip="true"
                />
              </el-table>
            </div>
          </BaseCard>
@@ -137,26 +147,22 @@
</template>

<script setup name="comprehensive">
import {
  listComprehensive,
  listYoY,
  listEnergyRanking,
} from "@/api/energyAnalysis/energyAnalysis";
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const { period } = proxy.useDict("period");
import { useRoute } from "vue-router";
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
import { listComprehensive, listYoY, listEnergyRanking } from "@/api/energyAnalysis/energyAnalysis"
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
import * as echarts from "echarts"
const { proxy } = getCurrentInstance()
const { period } = proxy.useDict("period")
import { useRoute } from "vue-router"
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList();
    getList()
  }
);
import index_card_1 from "@/assets/images/home/index-card-3.png";
import index_card_2 from "@/assets/images/home/index-card-4.png";
)
import index_card_1 from "@/assets/images/home/index-card-3.png"
import index_card_2 from "@/assets/images/home/index-card-4.png"
const comprehensiveTable = ref([
  {
    bg: index_card_1,
@@ -188,9 +194,9 @@
      },
    ],
  },
]);
const comprehensiveList = ref([]);
const loading = ref(false);
])
const comprehensiveList = ref([])
const loading = ref(false)
const data = reactive({
  queryParams: {
    nodeId: null,
@@ -200,35 +206,35 @@
  query: {
    modelCode: null,
  },
});
const { queryParams, query } = toRefs(data);
})
const { queryParams, query } = toRefs(data)
/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id;
  queryParams.value.nodeName = data.label;
  handleTimeType(period.value[0].value);
  handleQuery();
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  handleTimeType(period.value[0].value)
  handleQuery()
}
function handleTimeType(e) {
  queryParams.value.timeType = e;
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
}
// 能耗对比分析-综合能耗分析-列表
function getList() {
  loading.value = true;
  loading.value = true
  // 在初始化之前，先dispose旧的实例
  if (echarts.getInstanceByDom(document.getElementById("Chart1"))) {
    echarts.dispose(document.getElementById("Chart1"));
    echarts.dispose(document.getElementById("Chart1"))
  }
  if (echarts.getInstanceByDom(document.getElementById("Chart2"))) {
    echarts.dispose(document.getElementById("Chart2"));
    echarts.dispose(document.getElementById("Chart2"))
  }
  if (echarts.getInstanceByDom(document.getElementById("Chart3"))) {
    echarts.dispose(document.getElementById("Chart3"));
    echarts.dispose(document.getElementById("Chart3"))
  }
  const myChart1 = echarts.init(document.getElementById("Chart1"));
  const myChart2 = echarts.init(document.getElementById("Chart2"));
  const myChart3 = echarts.init(document.getElementById("Chart3"));
  const myChart1 = echarts.init(document.getElementById("Chart1"))
  const myChart2 = echarts.init(document.getElementById("Chart2"))
  const myChart3 = echarts.init(document.getElementById("Chart3"))
  listComprehensive(
    proxy.addDateRange({
      ...queryParams.value,
@@ -236,28 +242,24 @@
    })
  ).then((res) => {
    if (!!res.code && res.code == 200) {
      loading.value = false;
      let xdata = [];
      let yvalue = [];
      let ycompareValue = [];
      let yqoq = [];
      loading.value = false
      let xdata = []
      let yvalue = []
      let ycompareValue = []
      let yqoq = []
      if (!!res.data.chartDataList) {
        res.data.chartDataList.map((item) => {
          xdata.push(
            proxy
              .dayjs(item.xdata)
              .format(
                queryParams.value.timeType == "YEAR"
                  ? "MM月"
                  : queryParams.value.timeType == "MONTH"
                    ? "DD日"
                    : "HH时"
                queryParams.value.timeType == "YEAR" ? "MM月" : queryParams.value.timeType == "MONTH" ? "DD日" : "HH时"
              )
          );
          yvalue.push(!!item.yvalue ? item.yvalue : 0);
          ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0);
          yqoq.push(!!item.yqoq ? item.yqoq : 0);
        });
          )
          yvalue.push(!!item.yvalue ? item.yvalue : 0)
          ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0)
          yqoq.push(!!item.yqoq ? item.yqoq : 0)
        })
      }
      setTimeout(() => {
        myChart1.setOption({
@@ -273,13 +275,12 @@
            itemWidth: 14,
            itemHeight: 10,
            textStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
            },
          },
          grid: {
            top: "45",
            left: "7%",
            top: "60",
            left: "5%",
            right: "5%",
            bottom: "10",
            containLabel: true,
@@ -292,10 +293,7 @@
            axisLine: {
              show: true,
              lineStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -308,8 +306,7 @@
              show: false,
            },
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [5, 0, 0, 0],
              //   formatter: '{value} ml'
@@ -321,10 +318,7 @@
              type: "value",
              name: "tce",
              nameTextStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
                padding: [0, 0, 5, 0],
              },
@@ -335,10 +329,7 @@
                show: true,
                lineStyle: {
                  type: "dashed",
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                },
              },
              axisTick: {
@@ -348,10 +339,7 @@
                show: false,
              },
              axisLabel: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
              },
            },
@@ -363,7 +351,7 @@
              barWidth: "16",
              tooltip: {
                valueFormatter: function (value) {
                  return value + "tce";
                  return value + "tce"
                },
              },
              itemStyle: {
@@ -383,7 +371,7 @@
              barWidth: "16",
              tooltip: {
                valueFormatter: function (value) {
                  return value + "tce";
                  return value + "tce"
                },
              },
              itemStyle: {
@@ -398,29 +386,29 @@
              },
            },
          ],
        });
      }, 100);
      let total = 0;
      let seriesData = [];
        })
      }, 100)
      let total = 0
      let seriesData = []
      if (!!res.data.energyProportion && res.data.energyProportion.length > 0) {
        res.data.energyProportion.map((item) => {
          seriesData.push({
            name: item.energyName,
            value: Number(item.count).toFixed(2),
          });
        });
          })
        })
        seriesData.forEach(function (val) {
          total += Number(val.value);
        });
          total += Number(val.value)
        })
      } else {
        listEnergyTypeList().then((resEnergyTypeList) => {
          resEnergyTypeList.data.map((item) => {
            seriesData.push({
              name: item.enername,
              value: Number(0),
            });
          });
        });
            })
          })
        })
      }
      setTimeout(() => {
        myChart2.setOption({
@@ -449,40 +437,30 @@
              verticalAlign: "middle",
              rich: {
                name: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
                value: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
                rate: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                  fontSize: 14,
                },
              },
            },
            data: seriesData,
            formatter: (name) => {
              let target, percent, muid;
              let target, percent, muid
              for (let i = 0; i < seriesData.length; i++) {
                if (seriesData[i].name === name) {
                  target = seriesData[i].value;
                  muid = seriesData[i].muid;
                  percent =
                    total != 0 ? ((target / total) * 100).toFixed(2) : 0;
                  target = seriesData[i].value
                  muid = seriesData[i].muid
                  percent = total != 0 ? ((target / total) * 100).toFixed(2) : 0
                }
              }
              return `{name|${name}(tce)  }{value| ${target}} {rate| ${percent}%}`;
              return `{name|${name}(tce)  }{value| ${target}} {rate| ${percent}%}`
            },
          },
          series: [
@@ -500,76 +478,54 @@
              data: seriesData,
            },
          ],
        });
      }, 100);
        })
      }, 100)

      comprehensiveList.value = !!res.data.dataList ? res.data.dataList : [];
      comprehensiveList.value = !!res.data.dataList ? res.data.dataList : []
      window.addEventListener(
        "resize",
        () => {
          myChart1.resize();
          myChart2.resize();
          myChart1.resize()
          myChart2.resize()
        },
        { passive: true }
      );
      )
    }
  });
  })
  listYoY(
    proxy.addDateRange({
      ...queryParams.value,
    })
  ).then((res) => {
    if (!!res.data.tongbi) {
      comprehensiveTable.value[0].icon = !!res.data.tongbi.ratio
        ? res.data.tongbi.ratio
        : 0;
      comprehensiveTable.value[0].data[0].label = !!res.data.tongbi.currentTime
        ? res.data.tongbi.currentTime
        : 0;
      comprehensiveTable.value[0].data[0].value = !!res.data.tongbi.currentValue
        ? res.data.tongbi.currentValue
        : 0;
      comprehensiveTable.value[0].data[1].label = !!res.data.tongbi.compareTime
        ? res.data.tongbi.compareTime
        : 0;
      comprehensiveTable.value[0].data[1].value = !!res.data.tongbi.compareValue
        ? res.data.tongbi.compareValue
        : 0;
      comprehensiveTable.value[0].icon = !!res.data.tongbi.ratio ? res.data.tongbi.ratio : 0
      comprehensiveTable.value[0].data[0].label = !!res.data.tongbi.currentTime ? res.data.tongbi.currentTime : 0
      comprehensiveTable.value[0].data[0].value = !!res.data.tongbi.currentValue ? res.data.tongbi.currentValue : 0
      comprehensiveTable.value[0].data[1].label = !!res.data.tongbi.compareTime ? res.data.tongbi.compareTime : 0
      comprehensiveTable.value[0].data[1].value = !!res.data.tongbi.compareValue ? res.data.tongbi.compareValue : 0
    }
    if (!!res.data.huanbi) {
      comprehensiveTable.value[1].icon = !!res.data.huanbi.ratio
        ? res.data.huanbi.ratio
        : 0;
      comprehensiveTable.value[1].data[0].label = !!res.data.huanbi.currentTime
        ? res.data.huanbi.currentTime
        : 0;
      comprehensiveTable.value[1].data[0].value = !!res.data.huanbi.currentValue
        ? res.data.huanbi.currentValue
        : 0;
      comprehensiveTable.value[1].data[1].label = !!res.data.huanbi.compareTime
        ? res.data.huanbi.compareTime
        : 0;
      comprehensiveTable.value[1].data[1].value = !!res.data.huanbi.compareValue
        ? res.data.huanbi.compareValue
        : 0;
      comprehensiveTable.value[1].icon = !!res.data.huanbi.ratio ? res.data.huanbi.ratio : 0
      comprehensiveTable.value[1].data[0].label = !!res.data.huanbi.currentTime ? res.data.huanbi.currentTime : 0
      comprehensiveTable.value[1].data[0].value = !!res.data.huanbi.currentValue ? res.data.huanbi.currentValue : 0
      comprehensiveTable.value[1].data[1].label = !!res.data.huanbi.compareTime ? res.data.huanbi.compareTime : 0
      comprehensiveTable.value[1].data[1].value = !!res.data.huanbi.compareValue ? res.data.huanbi.compareValue : 0
    }
  });
  })
  listEnergyRanking(
    proxy.addDateRange({
      ...queryParams.value,
    })
  ).then((res) => {
    let nodeName = [];
    let energyConsumption = [];
    let maxenergyConsumption = [];
    let nodeName = []
    let energyConsumption = []
    let maxenergyConsumption = []
    if (!!res.data) {
      res.data.map((item, index) => {
        nodeName.push(item.nodeName);
        energyConsumption.push(
          !!item.energyConsumption ? item.energyConsumption : 0
        );
        maxenergyConsumption[index] = res.data[0].energyConsumption;
      });
        nodeName.push(item.nodeName)
        energyConsumption.push(!!item.energyConsumption ? item.energyConsumption : 0)
        maxenergyConsumption[index] = res.data[0].energyConsumption
      })
    }
    setTimeout(() => {
      myChart3.setOption({
@@ -586,7 +542,7 @@
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
            return params[0].name + " : " + params[0].value
          },
        },
        xAxis: {
@@ -599,38 +555,17 @@
            inverse: true,
            axisLabel: {
              interval: 0,
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              fontSize: 14,
              formatter: function (value, index) {
                if (index == 0) {
                  return (
                    "{idx0|" +
                    (1 + index + 0) +
                    "}{title|" +
                    value +
                    "}"
                  );
                  return "{idx0|" + (1 + index + 0) + "}{title|" + value + "}"
                } else if (index == 1) {
                  return (
                    "{idx1|" +
                    (1 + index + 0) +
                    "}{title|" +
                    value +
                    "}"
                  );
                  return "{idx1|" + (1 + index + 0) + "}{title|" + value + "}"
                } else if (index == 2) {
                  return (
                    "{idx2|" +
                    (1 + index + 0) +
                    "}{title|" +
                    value +
                    "}"
                  );
                  return "{idx2|" + (1 + index + 0) + "}{title|" + value + "}"
                } else {
                  return (
                    "{idx|" + (1 + index + 0) + "}{title|" + value + "}"
                  );
                  return "{idx|" + (1 + index + 0) + "}{title|" + value + "}"
                }
              },
              rich: {
@@ -681,8 +616,7 @@
            axisLine: "none",
            show: true,
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000",
              fontSize: "12",
            },
            data: energyConsumption,
@@ -721,27 +655,27 @@
            data: energyConsumption,
          },
        ],
      });
    }, 100);
      })
    }, 100)
    window.addEventListener(
      "resize",
      () => {
        myChart3.resize();
        myChart3.resize()
      },
      { passive: true }
    );
  });
    )
  })
}
// 能耗对比分析-综合能耗分析-搜索
function handleQuery() {
  getList();
  getList()
}
// 能耗对比分析-综合能耗分析-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  handleTimeType(period.value[0].value);
  queryParams.value.analysisType = "YOY";
  handleQuery();
  proxy.resetForm("queryRef")
  handleTimeType(period.value[0].value)
  queryParams.value.analysisType = "YOY"
  handleQuery()
}
// 能耗对比分析-综合能耗分析-导出
function handleExport() {
@@ -752,7 +686,7 @@
      ...query.value,
    },
    `${queryParams.value.nodeName}-综合能耗统计分析表_${new Date().getTime()}.xlsx`
  );
  )
}
</script>
<style scoped lang="scss">

 zhitan-vue/src/views/energyanalysis/department/department.vue

@@ -8,58 +8,56 @@
        <div class="form-card">
          <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item label="期间" prop="timeType">
              <el-select v-model="queryParams.timeType" placeholder="期间" clearable style="width: 120px"
                @change="handleTimeType">
              <el-select
                v-model="queryParams.timeType"
                placeholder="期间"
                clearable
                style="width: 120px"
                @change="handleTimeType"
              >
                <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker v-model="queryParams.dataTime" :type="queryParams.timeType == 'YEAR'
                ? 'year'
                : queryParams.timeType == 'MONTH'
                  ? 'month'
                  : 'date'
                " :format="queryParams.timeType == 'YEAR'
                  ? 'YYYY'
                  : queryParams.timeType == 'MONTH'
                    ? 'YYYY-MM'
                    : 'YYYY-MM-DD'
                  " value-format="YYYY-MM-DD" placeholder="时间" style="width: 100%" />
              <el-date-picker
                v-model="queryParams.dataTime"
                :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                :format="
                  queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'
                "
                value-format="YYYY-MM-DD"
                placeholder="时间"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="能源类型" prop="energyType">
              <el-select v-model="queryParams.energyType" placeholder="能源类型" clearable style="width: 120px">
                <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList"
                  :key="item.enersno" @click="handleEnergyType(item)" />
                <el-option
                  :label="item.enername"
                  :value="item.enersno"
                  v-for="item in energyTypeList"
                  :key="item.enersno"
                  @click="handleEnergyType(item)"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">
                搜索
              </el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
              <!-- <el-button icon="Refresh" @click="resetQuery">重置</el-button> -->
            </el-form-item>
            <el-form-item>
              <el-button :type="queryParams.analysisType == 'YOY' ? 'primary' : ''" @click="handleAnalysisType('YOY')">
                同比
              </el-button>
              <el-button :type="queryParams.analysisType == 'MOM' ? 'primary' : ''" @click="handleAnalysisType('MOM')">
                环比
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport">
                导出
              </el-button>
              <el-button type="warning" icon="Download" @click="handleExport"> 导出 </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="
            height: calc(100vh - 220px) !important;
            max-height: calc(100vh - 220px) !important;
            overflow-y: auto;
          " v-loading="loading">
          <!-- <el-row :gutter="24">
            <el-col :span="16"> -->
        <div
          style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto"
          v-loading="loading"
        >
          <el-tabs v-model="queryParams.analysisType" type="card" @tab-change="handleAnalysisType">
            <el-tab-pane label="同比" name="YOY"> </el-tab-pane>
            <el-tab-pane label="环比" name="MOM"> </el-tab-pane>
          </el-tabs>
          <BaseCard :title="queryParams.nodeName + '-厂区能耗分析'">
            <div class="chart-box">
              <div id="Chart1" />
@@ -74,30 +72,45 @@
              </BaseCard>
            </el-col>
            <el-col :span="24"> -->
          <BaseCard :title="queryParams.nodeName +
            '-厂区能耗分析统计分析表-' +
            queryParams.enername
            ">
          <BaseCard :title="queryParams.nodeName + '-厂区能耗分析统计分析表-' + queryParams.enername">
            <div class="table-box">
              <el-table :data="departmentList" show-summary>
                <el-table-column label="本期时间" align="center" key="currentTime" prop="currentTime"
                  :show-overflow-tooltip="true" />
                <el-table-column :label="'本期耗' +
                  queryParams.enername +
                  '(' +
                  queryParams.muid +
                  ')'
                  " align="center" key="currentValue" prop="currentValue" :show-overflow-tooltip="true" />
                <el-table-column label="同期时间" align="center" key="compareTime" prop="compareTime"
                  :show-overflow-tooltip="true" />
                <el-table-column :label="'同期耗' +
                  queryParams.enername +
                  '(' +
                  queryParams.muid +
                  ')'
                  " align="center" key="compareValue" prop="compareValue" :show-overflow-tooltip="true" />
                <el-table-column :label="(queryParams.analysisType == 'YOY' ? '同' : '环') + '比(%)'
                  " align="center" key="ratio" prop="ratio" :show-overflow-tooltip="true" width="200" />
                <el-table-column
                  label="本期时间"
                  align="center"
                  key="currentTime"
                  prop="currentTime"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="'本期耗' + queryParams.enername + '(' + queryParams.muid + ')'"
                  align="center"
                  key="currentValue"
                  prop="currentValue"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="同期时间"
                  align="center"
                  key="compareTime"
                  prop="compareTime"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="'同期耗' + queryParams.enername + '(' + queryParams.muid + ')'"
                  align="center"
                  key="compareValue"
                  prop="compareValue"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="(queryParams.analysisType == 'YOY' ? '同' : '环') + '比(%)'"
                  align="center"
                  key="ratio"
                  prop="ratio"
                  :show-overflow-tooltip="true"
                  width="200"
                />
              </el-table>
            </div>
          </BaseCard>
@@ -110,26 +123,23 @@
</template>

<script setup name="department">
import {
  listRegion,
  listDepartment,
} from "@/api/energyAnalysis/energyAnalysis";
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const { period } = proxy.useDict("period");
import { useRoute } from "vue-router";
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
import { listRegion, listDepartment } from "@/api/energyAnalysis/energyAnalysis"
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
import * as echarts from "echarts"
const { proxy } = getCurrentInstance()
const { period } = proxy.useDict("period")
import { useRoute } from "vue-router"
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList();
    getList()
  }
);
const energyTypeList = ref(undefined);
const departmentList = ref([]);
const loading = ref(false);
)
const energyTypeList = ref(undefined)
const departmentList = ref([])
const loading = ref(false)
const data = reactive({
  queryParams: {
    nodeId: null,
@@ -141,45 +151,45 @@
  query: {
    modelCode: null,
  },
});
const { queryParams, query } = toRefs(data);
})
const { queryParams, query } = toRefs(data)
/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id;
  queryParams.value.nodeName = data.label;
  handleTimeType(period.value[0].value);
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  handleTimeType(period.value[0].value)
  listEnergyTypeList().then((res) => {
    energyTypeList.value = res.data;
    queryParams.value.energyType = energyTypeList.value[0].enersno;
    queryParams.value.enername = energyTypeList.value[0].enername;
    queryParams.value.muid = energyTypeList.value[0].muid;
    handleQuery();
  });
    energyTypeList.value = res.data
    queryParams.value.energyType = energyTypeList.value[0].enersno
    queryParams.value.enername = energyTypeList.value[0].enername
    queryParams.value.muid = energyTypeList.value[0].muid
    handleQuery()
  })
}
function handleTimeType(e) {
  queryParams.value.timeType = e;
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
}
function handleEnergyType(item) {
  queryParams.value.enername = item.enername;
  queryParams.value.muid = item.muid;
  handleQuery();
  queryParams.value.enername = item.enername
  queryParams.value.muid = item.muid
  handleQuery()
}
function handleAnalysisType(analysisType) {
  queryParams.value.analysisType = analysisType;
  getList();
  queryParams.value.analysisType = analysisType
  getList()
}
// 能耗对比分析-科室能耗分析-列表
function getList() {
  loading.value = true;
  loading.value = true
  // 在初始化之前，先dispose旧的实例
  if (echarts.getInstanceByDom(document.getElementById("Chart1"))) {
    echarts.dispose(document.getElementById("Chart1"));
    echarts.dispose(document.getElementById("Chart1"))
  }
  // if (echarts.getInstanceByDom(document.getElementById("Chart2"))) {
  //   echarts.dispose(document.getElementById("Chart2"));
  // }
  const myChart1 = echarts.init(document.getElementById("Chart1"));
  const myChart1 = echarts.init(document.getElementById("Chart1"))
  // const myChart2 = echarts.init(document.getElementById("Chart2"));
  listRegion(
    proxy.addDateRange({
@@ -188,35 +198,31 @@
    })
  ).then((res) => {
    if (!!res.code && res.code == 200) {
      loading.value = false;
      let xdata = [];
      let yvalue = [];
      let ycompareValue = [];
      let yqoq = [];
      loading.value = false
      let xdata = []
      let yvalue = []
      let ycompareValue = []
      let yqoq = []
      if (!!res.data.chartDataList) {
        res.data.chartDataList.map((item) => {
          xdata.push(
            proxy
              .dayjs(item.xdata)
              .format(
                queryParams.value.timeType == "YEAR"
                  ? "MM月"
                  : queryParams.value.timeType == "MONTH"
                    ? "DD日"
                    : "HH时"
                queryParams.value.timeType == "YEAR" ? "MM月" : queryParams.value.timeType == "MONTH" ? "DD日" : "HH时"
              )
          );
          yvalue.push(!!item.yvalue ? item.yvalue : 0);
          ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0);
          yqoq.push(!!item.yqoq ? item.yqoq : 0);
        });
          )
          yvalue.push(!!item.yvalue ? item.yvalue : 0)
          ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0)
          yqoq.push(!!item.yqoq ? item.yqoq : 0)
        })
      }
      setTimeout(() => {
        myChart1.setOption({
          color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
          grid: {
            top: "45",
            left: "7%",
            top: "60",
            left: "5%",
            right: "5%",
            bottom: "10",
            containLabel: true,
@@ -232,8 +238,7 @@
            itemWidth: 14,
            itemHeight: 10,
            textStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
            },
          },
          xAxis: {
@@ -244,10 +249,7 @@
            axisLine: {
              show: true,
              lineStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -260,8 +262,7 @@
              show: false,
            },
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [5, 0, 0, 0],
              //   formatter: '{value} ml'
@@ -271,17 +272,9 @@
          yAxis: [
            {
              type: "value",
              name:
                "耗" +
                queryParams.value.enername +
                "量(" +
                queryParams.value.muid +
                ")",
              name: "耗" + queryParams.value.enername + "量(" + queryParams.value.muid + ")",
              nameTextStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
                padding: [0, 0, 5, 0],
              },
@@ -292,10 +285,7 @@
                show: true,
                lineStyle: {
                  type: "dashed",
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                },
              },
              axisTick: {
@@ -305,10 +295,7 @@
                show: false,
              },
              axisLabel: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
              },
            },
@@ -317,10 +304,7 @@
              name: queryParams.value.analysisType == "YOY" ? "同比(%)" : "环比(%)",
              alignTicks: true,
              nameTextStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
                padding: [0, 0, 5, 0],
              },
@@ -334,20 +318,14 @@
                show: true,
                lineStyle: {
                  type: "dashed",
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                },
              },
              splitArea: {
                show: false,
              },
              axisLabel: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
              },
            },
@@ -359,7 +337,7 @@
              barWidth: "8",
              tooltip: {
                valueFormatter: function (value) {
                  return value + queryParams.value.muid;
                  return value + queryParams.value.muid
                },
              },
              itemStyle: {
@@ -379,7 +357,7 @@
              barWidth: "8",
              tooltip: {
                valueFormatter: function (value) {
                  return value + queryParams.value.muid;
                  return value + queryParams.value.muid
                },
              },
              itemStyle: {
@@ -400,24 +378,24 @@
              symbol: "none", // 设置为 'none' 去掉圆点
              tooltip: {
                valueFormatter: function (value) {
                  return value + "%";
                  return value + "%"
                },
              },
              data: yqoq,
            },
          ],
        });
      }, 100);
      departmentList.value = !!res.data.dataList ? res.data.dataList : [];
        })
      }, 100)
      departmentList.value = !!res.data.dataList ? res.data.dataList : []
      window.addEventListener(
        "resize",
        () => {
          myChart1.resize();
          myChart1.resize()
        },
        { passive: true }
      );
      )
    }
  });
  })
  // listDepartment(
  //   proxy.addDateRange({
  //     ...queryParams.value,
@@ -566,17 +544,17 @@
}
// 能耗对比分析-科室能耗分析-搜索
function handleQuery() {
  getList();
  getList()
}
// 能耗对比分析-科室能耗分析-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  handleTimeType(period.value[0].value);
  queryParams.value.energyType = energyTypeList.value[0].enersno;
  queryParams.value.enername = energyTypeList.value[0].enername;
  queryParams.value.muid = energyTypeList.value[0].muid;
  queryParams.value.analysisType = "YOY";
  handleQuery();
  proxy.resetForm("queryRef")
  handleTimeType(period.value[0].value)
  queryParams.value.energyType = energyTypeList.value[0].enersno
  queryParams.value.enername = energyTypeList.value[0].enername
  queryParams.value.muid = energyTypeList.value[0].muid
  queryParams.value.analysisType = "YOY"
  handleQuery()
}
// 能耗对比分析-科室能耗分析-导出
function handleExport() {
@@ -587,9 +565,16 @@
      ...query.value,
    },
    `${queryParams.value.nodeName}-厂区能耗分析_${new Date().getTime()}.xlsx`
  );
  )
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";
.el-tabs {
  padding: 0 12px;
  margin-top: 12px;
  :deep(.el-tabs__header) {
    margin: 0;
  }
}
</style>

 zhitan-vue/src/views/energyanalysis/equipment/equipment.vue

@@ -8,97 +8,101 @@
        <div class="form-card">
          <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item label="期间" prop="timeType">
              <el-select v-model="queryParams.timeType" placeholder="期间" clearable style="width: 120px"
                @change="handleTimeType">
              <el-select
                v-model="queryParams.timeType"
                placeholder="期间"
                clearable
                style="width: 120px"
                @change="handleTimeType"
              >
                <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker v-model="queryParams.dataTime" :type="queryParams.timeType == 'YEAR'
                ? 'year'
                : queryParams.timeType == 'MONTH'
                  ? 'month'
                  : 'date'
                " :format="queryParams.timeType == 'YEAR'
                  ? 'YYYY'
                  : queryParams.timeType == 'MONTH'
                    ? 'YYYY-MM'
                    : 'YYYY-MM-DD'
                  " value-format="YYYY-MM-DD" placeholder="时间" style="width: 100%" />
              <el-date-picker
                v-model="queryParams.dataTime"
                :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                :format="
                  queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD'
                "
                value-format="YYYY-MM-DD"
                placeholder="时间"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="能源类型" prop="timeType">
              <el-select v-model="queryParams.energyType" placeholder="能源类型" clearable style="width: 120px">
                <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList"
                  :key="item.enersno" @click="handleEnergyType(item)" />
                <el-option
                  :label="item.enername"
                  :value="item.enersno"
                  v-for="item in energyTypeList"
                  :key="item.enersno"
                  @click="handleEnergyType(item)"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">
                搜索
              </el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
              <!-- <el-button icon="Refresh" @click="resetQuery">重置</el-button> -->
            </el-form-item>
            <el-form-item>
              <el-button :type="queryParams.analysisType == 'YOY' ? 'primary' : ''" @click="handleAnalysisType('YOY')">
                同比
              </el-button>
              <el-button :type="queryParams.analysisType == 'MOM' ? 'primary' : ''" @click="handleAnalysisType('MOM')">
                环比
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport">
                导出
              </el-button>
              <el-button type="warning" icon="Download" @click="handleExport"> 导出 </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="
            height: calc(100vh - 220px) !important;
            max-height: calc(100vh - 220px) !important;
            overflow-y: auto;
          " v-loading="loading">
          <!-- <el-row :gutter="24">
            <el-col :span="16"> -->
        <div
          style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto"
          v-loading="loading"
        >
          <el-tabs v-model="queryParams.analysisType" type="card" @tab-change="handleAnalysisType">
            <el-tab-pane label="同比" name="YOY"> </el-tab-pane>
            <el-tab-pane label="环比" name="MOM"> </el-tab-pane>
          </el-tabs>
          <BaseCard :title="queryParams.nodeName + '-设备能耗趋势'">
            <div class="chart-box">
            <div class="chart-box" style="padding: 12px 0 0">
              <div id="Chart1" />
            </div>
          </BaseCard>
          <!-- </el-col>
            <el-col :span="8">
              <BaseCard title="设备能耗趋势">
                <div class="chart-box">
                  <div id="Chart2" />
                </div>
              </BaseCard>
            </el-col>
            <el-col :span="24"> -->

          <BaseCard :title="queryParams.nodeName +
            '-设备能耗统计分析表-' +
            queryParams.enername
            ">
          <BaseCard :title="queryParams.nodeName + '-设备能耗统计分析表-' + queryParams.enername">
            <div class="table-box">
              <el-table :data="departmentList" show-summary>
                <el-table-column label="本期时间" align="center" key="currentTime" prop="currentTime"
                  :show-overflow-tooltip="true" />
                <el-table-column :label="'本期耗' +
                  queryParams.enername +
                  '(' +
                  queryParams.muid +
                  ')'
                  " align="center" key="currentValue" prop="currentValue" :show-overflow-tooltip="true" />
                <el-table-column label="同期时间" align="center" key="compareTime" prop="compareTime"
                  :show-overflow-tooltip="true" />
                <el-table-column :label="'同期耗' +
                  queryParams.enername +
                  '(' +
                  queryParams.muid +
                  ')'
                  " align="center" key="compareValue" prop="compareValue" :show-overflow-tooltip="true" />
                <el-table-column :label="(queryParams.analysisType == 'YOY' ? '同' : '环') + '比(%)'
                  " align="center" key="ratio" prop="ratio" :show-overflow-tooltip="true" width="200" />
                <el-table-column
                  label="本期时间"
                  align="center"
                  key="currentTime"
                  prop="currentTime"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="'本期耗' + queryParams.enername + '(' + queryParams.muid + ')'"
                  align="center"
                  key="currentValue"
                  prop="currentValue"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  label="同期时间"
                  align="center"
                  key="compareTime"
                  prop="compareTime"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="'同期耗' + queryParams.enername + '(' + queryParams.muid + ')'"
                  align="center"
                  key="compareValue"
                  prop="compareValue"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="(queryParams.analysisType == 'YOY' ? '同' : '环') + '比(%)'"
                  align="center"
                  key="ratio"
                  prop="ratio"
                  :show-overflow-tooltip="true"
                  width="200"
                />
              </el-table>
            </div>
          </BaseCard>
@@ -111,26 +115,23 @@
</template>

<script setup name="equipment">
import {
  listRegion,
  listDepartment,
} from "@/api/energyAnalysis/energyAnalysis";
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const { period } = proxy.useDict("period");
import { useRoute } from "vue-router";
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
import { listRegion, listDepartment } from "@/api/energyAnalysis/energyAnalysis"
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
import * as echarts from "echarts"
const { proxy } = getCurrentInstance()
const { period } = proxy.useDict("period")
import { useRoute } from "vue-router"
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList();
    getList()
  }
);
const energyTypeList = ref(undefined);
const departmentList = ref([]);
const loading = ref(false);
)
const energyTypeList = ref(undefined)
const departmentList = ref([])
const loading = ref(false)
const data = reactive({
  queryParams: {
    nodeId: null,
@@ -142,45 +143,45 @@
  query: {
    modelCode: null,
  },
});
const { queryParams, query } = toRefs(data);
})
const { queryParams, query } = toRefs(data)
/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id;
  queryParams.value.nodeName = data.label;
  handleTimeType(period.value[0].value);
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  handleTimeType(period.value[0].value || "DAY")
  listEnergyTypeList().then((res) => {
    energyTypeList.value = res.data;
    queryParams.value.energyType = energyTypeList.value[0].enersno;
    queryParams.value.enername = energyTypeList.value[0].enername;
    queryParams.value.muid = energyTypeList.value[0].muid;
    handleQuery();
  });
    energyTypeList.value = res.data
    queryParams.value.energyType = energyTypeList.value[0].enersno
    queryParams.value.enername = energyTypeList.value[0].enername
    queryParams.value.muid = energyTypeList.value[0].muid
    handleQuery()
  })
}
function handleTimeType(e) {
  queryParams.value.timeType = e;
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD");
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
}
function handleEnergyType(item) {
  queryParams.value.enername = item.enername;
  queryParams.value.muid = item.muid;
  handleQuery();
  queryParams.value.enername = item.enername
  queryParams.value.muid = item.muid
  handleQuery()
}
function handleAnalysisType(analysisType) {
  queryParams.value.analysisType = analysisType;
  getList();
  queryParams.value.analysisType = analysisType
  getList()
}
// 能耗对比分析-设备能耗分析-列表
function getList() {
  loading.value = true;
  loading.value = true
  // 在初始化之前，先dispose旧的实例
  if (echarts.getInstanceByDom(document.getElementById("Chart1"))) {
    echarts.dispose(document.getElementById("Chart1"));
    echarts.dispose(document.getElementById("Chart1"))
  }
  // if (echarts.getInstanceByDom(document.getElementById("Chart2"))) {
  //   echarts.dispose(document.getElementById("Chart2"));
  // }
  const myChart1 = echarts.init(document.getElementById("Chart1"));
  const myChart1 = echarts.init(document.getElementById("Chart1"))
  // const myChart2 = echarts.init(document.getElementById("Chart2"));
  listRegion(
    proxy.addDateRange({
@@ -189,35 +190,31 @@
    })
  ).then((res) => {
    if (!!res.code && res.code == 200) {
      loading.value = false;
      let xdata = [];
      let yvalue = [];
      let ycompareValue = [];
      let yqoq = [];
      loading.value = false
      let xdata = []
      let yvalue = []
      let ycompareValue = []
      let yqoq = []
      if (!!res.data.chartDataList) {
        res.data.chartDataList.map((item) => {
          xdata.push(
            proxy
              .dayjs(item.xdata)
              .format(
                queryParams.value.timeType == "YEAR"
                  ? "MM月"
                  : queryParams.value.timeType == "MONTH"
                    ? "DD日"
                    : "HH时"
                queryParams.value.timeType == "YEAR" ? "MM月" : queryParams.value.timeType == "MONTH" ? "DD日" : "HH时"
              )
          );
          yvalue.push(!!item.yvalue ? item.yvalue : 0);
          ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0);
          yqoq.push(!!item.yqoq ? item.yqoq : 0);
        });
          )
          yvalue.push(!!item.yvalue ? item.yvalue : 0)
          ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0)
          yqoq.push(!!item.yqoq ? item.yqoq : 0)
        })
      }
      setTimeout(() => {
        myChart1.setOption({
          color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
          grid: {
            top: "45",
            left: "7%",
            top: "60",
            left: "5%",
            right: "5%",
            bottom: "10",
            containLabel: true,
@@ -233,8 +230,7 @@
            itemWidth: 14,
            itemHeight: 10,
            textStyle: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
            },
          },
          xAxis: {
@@ -245,10 +241,7 @@
            axisLine: {
              show: true,
              lineStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              },
            },
            axisTick: {
@@ -261,8 +254,7 @@
              show: false,
            },
            axisLabel: {
              color:
                settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
              fontSize: 14,
              padding: [5, 0, 0, 0],
              //   formatter: '{value} ml'
@@ -272,17 +264,9 @@
          yAxis: [
            {
              type: "value",
              name:
                "耗" +
                queryParams.value.enername +
                "量(" +
                queryParams.value.muid +
                ")",
              name: "耗" + queryParams.value.enername + "量(" + queryParams.value.muid + ")",
              nameTextStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
                padding: [0, 0, 5, 0],
              },
@@ -293,10 +277,7 @@
                show: true,
                lineStyle: {
                  type: "dashed",
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                },
              },
              axisTick: {
@@ -306,23 +287,16 @@
                show: false,
              },
              axisLabel: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
              },
            },
            {
              type: "value",
              name:
                queryParams.value.analysisType == "YOY" ? "同比(%)" : "环比(%)",
              name: queryParams.value.analysisType == "YOY" ? "同比(%)" : "环比(%)",
              alignTicks: true,
              nameTextStyle: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
                padding: [0, 0, 5, 0],
              },
@@ -336,20 +310,14 @@
                show: true,
                lineStyle: {
                  type: "dashed",
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#FFFFFF"
                      : "#222222",
                  color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                },
              },
              splitArea: {
                show: false,
              },
              axisLabel: {
                color:
                  settingsStore.sideTheme == "theme-dark"
                    ? "#FFFFFF"
                    : "#222222",
                color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
                fontSize: 14,
              },
            },
@@ -361,7 +329,7 @@
              barWidth: "8",
              tooltip: {
                valueFormatter: function (value) {
                  return value + queryParams.value.muid;
                  return value + queryParams.value.muid
                },
              },
              itemStyle: {
@@ -381,7 +349,7 @@
              barWidth: "8",
              tooltip: {
                valueFormatter: function (value) {
                  return value + queryParams.value.muid;
                  return value + queryParams.value.muid
                },
              },
              itemStyle: {
@@ -402,24 +370,24 @@
              symbol: "none", // 设置为 'none' 去掉圆点
              tooltip: {
                valueFormatter: function (value) {
                  return value + "%";
                  return value + "%"
                },
              },
              data: yqoq,
            },
          ],
        });
      }, 100);
      departmentList.value = !!res.data.dataList ? res.data.dataList : [];
        })
      }, 100)
      departmentList.value = !!res.data.dataList ? res.data.dataList : []
      window.addEventListener(
        "resize",
        () => {
          myChart1.resize();
          myChart1.resize()
        },
        { passive: true }
      );
      )
    }
  });
  })
  // listDepartment(
  //   proxy.addDateRange({
  //     ...queryParams.value,
@@ -568,17 +536,17 @@
}
// 能耗对比分析-设备能耗分析-搜索
function handleQuery() {
  getList();
  getList()
}
// 能耗对比分析-设备能耗分析-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  handleTimeType(period.value[0].value);
  queryParams.value.energyType = energyTypeList.value[0].enersno;
  queryParams.value.enername = energyTypeList.value[0].enername;
  queryParams.value.muid = energyTypeList.value[0].muid;
  queryParams.value.analysisType = "YOY";
  handleQuery();
  proxy.resetForm("queryRef")
  handleTimeType(period.value[0].value)
  queryParams.value.energyType = energyTypeList.value[0].enersno
  queryParams.value.enername = energyTypeList.value[0].enername
  queryParams.value.muid = energyTypeList.value[0].muid
  queryParams.value.analysisType = "YOY"
  handleQuery()
}
// 能耗对比分析-设备能耗分析-导出
function handleExport() {
@@ -589,9 +557,17 @@
      ...query.value,
    },
    `${queryParams.value.nodeName}-设备能耗统计分析表-${queryParams.enername}_${new Date().getTime()}.xlsx`
  );
  )
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";

.el-tabs {
  padding: 0 12px;
  margin-top: 12px;
  :deep(.el-tabs__header) {
    margin: 0;
  }
}
</style>

 zhitan-vue/src/views/energyconservation/policyrule/policyRule.vue

@@ -14,35 +14,36 @@
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="Plus" @click="handleAdd"> 新增 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <div class="mt20 mb20">
        <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        <!-- <el-button type="primary" icon="Delete">删除</el-button> -->
    <div class="table-bg-style">
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column prop="title" label="文件标题" show-overflow-tooltip align="center" />
          <el-table-column prop="typeName" label="文件类别" show-overflow-tooltip align="center" />
          <el-table-column prop="dept" label="印发部门" show-overflow-tooltip align="center" />
          <el-table-column prop="issuingTime" label="印发时间" show-overflow-tooltip align="center" />
          <el-table-column label="操作" width="300" align="center">
            <template #default="scope">
              <el-button v-if="scope.row.url" link type="primary" icon="Files" @click="handleFile(scope.row.url)">
                附件
              </el-button>
              <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 修改 </el-button>
              <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <el-table :data="tableData" v-loading="loading">
        <el-table-column prop="title" label="文件标题" show-overflow-tooltip align="center" />
        <el-table-column prop="typeName" label="文件类别" show-overflow-tooltip align="center" />
        <el-table-column prop="dept" label="印发部门" show-overflow-tooltip align="center" />
        <el-table-column prop="issuingTime" label="印发时间" show-overflow-tooltip align="center" />
        <el-table-column label="操作" width="300" align="center">
          <template #default="scope">
            <el-button v-if="scope.row.url" link type="primary" icon="Files" @click="handleFile(scope.row.url)">
              附件
            </el-button>
            <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 修改 </el-button>
            <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <EditModal ref="editModalRef" @get-list="getList" />
  </div>

 zhitan-vue/src/views/energyconservation/projectmanage/projectmanage/projectManage.vue

@@ -22,40 +22,41 @@
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <div class="mt20 mb20">
        <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        <!-- <el-button type="primary" icon="Download" @click="handleAdd"> 导出 </el-button> -->
      </div>
      <el-table :data="tableData" v-loading="loading">
        <el-table-column prop="plan" label="总体计划" show-overflow-tooltip align="center" />
        <el-table-column prop="implementationPlan" label="实施计划" show-overflow-tooltip align="center" />
        <el-table-column prop="savingAmount" label="节约量" show-overflow-tooltip align="center" />
        <!-- <el-table-column prop="value4" label="开始时间" show-overflow-tooltip align="center" />
    <div class="table-bg-style">
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column prop="plan" label="总体计划" show-overflow-tooltip align="center" />
          <el-table-column prop="implementationPlan" label="实施计划" show-overflow-tooltip align="center" />
          <el-table-column prop="savingAmount" label="节约量" show-overflow-tooltip align="center" />
          <!-- <el-table-column prop="value4" label="开始时间" show-overflow-tooltip align="center" />
        <el-table-column prop="value5" label="结束时间" show-overflow-tooltip align="center" /> -->
        <el-table-column prop="currentWork" label="当前工作" show-overflow-tooltip align="center" />
        <el-table-column prop="liablePerson" label="负责人" show-overflow-tooltip align="center" />
        <el-table-column prop="completionTime" label="完成时间" show-overflow-tooltip align="center" />
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip align="center" />
        <el-table-column prop="remark" label="备注" show-overflow-tooltip align="center" />
          <el-table-column prop="currentWork" label="当前工作" show-overflow-tooltip align="center" />
          <el-table-column prop="liablePerson" label="负责人" show-overflow-tooltip align="center" />
          <el-table-column prop="completionTime" label="完成时间" show-overflow-tooltip align="center" />
          <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip align="center" />
          <el-table-column prop="remark" label="备注" show-overflow-tooltip align="center" />

        <el-table-column label="操作" width="300" align="center">
          <template #default="scope">
            <!-- <el-button link type="primary" icon="Files" @click=""> 附件 </el-button> -->
            <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 修改 </el-button>
            <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
          <el-table-column label="操作" width="300" align="center">
            <template #default="scope">
              <!-- <el-button link type="primary" icon="Files" @click=""> 附件 </el-button> -->
              <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 修改 </el-button>
              <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <edit-modal ref="EditModalRef" @getList="getList" />
  </div>

 zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue

@@ -12,12 +12,12 @@
          <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-bg-style">
      <div class="ml20 mb20 theme-dark-mt20">
        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
      </div>
      <div class="table-box">
        <el-table v-loading="loading" :data="energyTypeList">
          <el-table-column label="编号" align="center" key="code" prop="code" :show-overflow-tooltip="true" />

 zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue

@@ -17,12 +17,12 @@
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-bg-style">
      <div class="ml20 mb20 theme-dark-mt20">
        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
      </div>
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column prop="code" label="编码" show-overflow-tooltip align="center" />

 zhitan-vue/src/views/modelconfiguration/businessmodel/businessModel.vue

@@ -1,158 +1,171 @@
<template>
    <div class="page">
        <div class="page-container">
            <div class="page-container-left">
                <div class="tree page-box">
                    <!-- <CardHeader class="mb20">数据模型管理</CardHeader> -->
                    <div class="select-box mb20">
                        <el-select v-model="modelData" placeholder="请选择模型" filterable @change="changeModel">
                            <el-option v-for="model in modelInfoOptions" :key="model.modelCode" :label="model.modelName"
                                :value="model.modelCode" />
                        </el-select>
                        <el-icon @click="handleModel">
                            <Setting />
                        </el-icon>
                    </div>
                    <!-- <el-input v-model="filterText" style="width: 240px" placeholder="输入关键字进行过滤" class="mb10" /> -->
                    <div class="tree-box" v-loading="treeLoading">
                        <el-link icon="el-icon-plus" style="margin-top: 8px;width:100%" @click="addNode"
                            v-if="treeData.length === 0">添加根节点
                        </el-link>
                        <template v-else>
                            <el-tree ref="treeRef" :props="defaultProps" :data="treeData" node-key="id"
                                highlight-current :filter-node-method="filterNode"
                                :default-expanded-keys="treeExpandData" :expand-on-click-node="false"
                                @node-click="changeNode" accordion>
                                <template #default="{ node, data }">
                                    <span>
                                        <el-tooltip v-if="node.label.length > 6" class="item" effect="dark"
                                            :content="node.label" placement="top-end">
                                            <span>{{ node.label.slice(0, 6) + "..." }}</span>
                                        </el-tooltip>
                                        <span v-else id="b">{{ node.label }}</span>
                                    </span>
                                    <span class="node-opt">
                                        <el-link title="新增下级节点" icon="Plus" @click="() => addNode(node, data)">
                                        </el-link>
                                        <el-link title="修改节点" icon="EditPen" @click="() => editNode(node, data)">
                                        </el-link>
                                        <el-link title="删除节点" icon="Delete" @click="() => delNode(node, data)">
                                        </el-link>
                                    </span>
                                </template>
                            </el-tree>
                        </template>
                    </div>
                </div>
            </div>
            <div class="page-container-right">
                <div class="mb20 mt20 ml20 tab-box">
                    <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')">
                        计量器具配置信息
                    </div>
                    <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')">
                        统计指标
                    </div>
                    <div class="tab-li" :class="tab == 3 ? 'is-tab' : ''" @click="handleTab('3')">
                        采集指标
                    </div>
                    <!-- <el-radio-group v-model="tab">
  <div class="page">
    <div class="page-container">
      <div class="page-container-left">
        <div class="tree page-box">
          <!-- <CardHeader class="mb20">数据模型管理</CardHeader> -->
          <div class="select-box mb20">
            <el-select v-model="modelData" placeholder="请选择模型" filterable @change="changeModel">
              <el-option
                v-for="model in modelInfoOptions"
                :key="model.modelCode"
                :label="model.modelName"
                :value="model.modelCode"
              />
            </el-select>
            <el-icon @click="handleModel">
              <Setting />
            </el-icon>
          </div>
          <!-- <el-input v-model="filterText" style="width: 240px" placeholder="输入关键字进行过滤" class="mb10" /> -->
          <div class="tree-box" v-loading="treeLoading">
            <el-link
              icon="el-icon-plus"
              style="margin-top: 8px; width: 100%"
              @click="addNode"
              v-if="treeData.length === 0"
              >添加根节点
            </el-link>
            <template v-else>
              <el-tree
                ref="treeRef"
                :props="defaultProps"
                :data="treeData"
                node-key="id"
                highlight-current
                :filter-node-method="filterNode"
                :default-expanded-keys="treeExpandData"
                :expand-on-click-node="false"
                @node-click="changeNode"
                accordion
              >
                <template #default="{ node, data }">
                  <span>
                    <el-tooltip
                      v-if="node.label.length > 6"
                      class="item"
                      effect="dark"
                      :content="node.label"
                      placement="top-end"
                    >
                      <span>{{ node.label.slice(0, 6) + "..." }}</span>
                    </el-tooltip>
                    <span v-else id="b">{{ node.label }}</span>
                  </span>
                  <span class="node-opt">
                    <el-link title="新增下级节点" icon="Plus" @click="() => addNode(node, data)"> </el-link>
                    <el-link title="修改节点" icon="EditPen" @click="() => editNode(node, data)"> </el-link>
                    <el-link title="删除节点" icon="Delete" @click="() => delNode(node, data)"> </el-link>
                  </span>
                </template>
              </el-tree>
            </template>
          </div>
        </div>
      </div>
      <div class="page-container-right">
        <div class="tab-box">
          <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')">计量器具配置信息</div>
          <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')">统计指标</div>
          <div class="tab-li" :class="tab == 3 ? 'is-tab' : ''" @click="handleTab('3')">采集指标</div>
          <!-- <el-radio-group v-model="tab">
                                <el-radio-button label="1" @click="handleTab('1')"> 设备配置</el-radio-button>
                                <el-radio-button label="2" @click="handleTab('2')"> 采集指标</el-radio-button>
                            </el-radio-group>-->
                </div>
                <BaseCard :title="currentNode ? currentNode.label + '--节点配置' : '暂无节点配置'">
                    <div>
                        <div class="content-box" v-if="tab == '1'">
                            <deviceConfig ref='deviceConfigRef' />
                        </div>
                        <div class="content-box" v-if="tab == '2'">
                            <statisticalIndicators ref='statisticalIndicatorsRef' />
                        </div>
                        <div class="content-box" v-if="tab == '3'">
                            <collectIndicators ref='collectIndicatorsRef' />
                        </div>
                    </div>
                </BaseCard>
            </div>
        </div>

        <treeNodeModal ref="treeNodeModalRef" @getList="getTreeList" :modelCode="modelData"
            @addTreeList="addTreeList" @addTreeSelectList="addTreeSelectList" />
        <modelManagementModal ref="modelManagementModalRef" @selectTreeFun="searchList" />

        <BaseCard :title="currentNode ? currentNode.label + '--节点配置' : '暂无节点配置'">
          <div>
            <div class="content-box" v-if="tab == '1'">
              <deviceConfig ref="deviceConfigRef" />
            </div>
            <div class="content-box" v-if="tab == '2'">
              <statisticalIndicators ref="statisticalIndicatorsRef" />
            </div>
            <div class="content-box" v-if="tab == '3'">
              <collectIndicators ref="collectIndicatorsRef" />
            </div>
          </div>
        </BaseCard>
      </div>
    </div>

    <treeNodeModal
      ref="treeNodeModalRef"
      @getList="getTreeList"
      :modelCode="modelData"
      @addTreeList="addTreeList"
      @addTreeSelectList="addTreeSelectList"
    />
    <modelManagementModal ref="modelManagementModalRef" @selectTreeFun="searchList" />
  </div>
</template>

<script setup>
import treeNodeModal from './components/TreeNodeModal.vue'
import modelManagementModal from './components/modelManagement/modelManagement'
import { listModel } from '@/api/modelConfiguration/businessModel'
import { treeList, delModelNode, hasEnergyIndex, } from '@/api/modelConfiguration/indexWarehouse'
import deviceConfig from './components/deviceConfig/DeviceConfig.vue'
import collectIndicators from './components/collectIndicators/CollectIndicators.vue'
import statisticalIndicators from './components/statisticalIndicators/statisticalIndicators.vue'
import { nextTick } from 'vue';
import treeNodeModal from "./components/TreeNodeModal.vue"
import modelManagementModal from "./components/modelManagement/modelManagement"
import { listModel } from "@/api/modelConfiguration/businessModel"
import { treeList, delModelNode, hasEnergyIndex } from "@/api/modelConfiguration/indexWarehouse"
import deviceConfig from "./components/deviceConfig/DeviceConfig.vue"
import collectIndicators from "./components/collectIndicators/CollectIndicators.vue"
import statisticalIndicators from "./components/statisticalIndicators/statisticalIndicators.vue"
import { nextTick } from "vue"
let { proxy } = getCurrentInstance()
let modelManagementModalRef = ref(null)
let treeLoading = ref(true)
//模型管理
function handleModel() {
    if (modelManagementModalRef.value) {
        modelManagementModalRef.value.handleOpen()
    }
  if (modelManagementModalRef.value) {
    modelManagementModalRef.value.handleOpen()
  }
}
let modelData = ref(null)
let modelInfoOptions = ref([]) //下拉列表
//获取下拉列表
function searchList(flag) {
    listModel({ isShow: 1 }).then(response => {
        modelInfoOptions.value = response.data;
        if (flag) {
            if (modelInfoOptions.value.length > 0) {
                modelData.value = modelInfoOptions.value[0].modelCode;
                getTreeList(modelData.value)
            }
        }
    });
  listModel({ isShow: 1 }).then((response) => {
    modelInfoOptions.value = response.data
    if (flag) {
      if (modelInfoOptions.value.length > 0) {
        modelData.value = modelInfoOptions.value[0].modelCode
        getTreeList(modelData.value)
      }
    }
  })
}

searchList(true)


//下拉选中触发树列表
function changeModel(item) {
    // console.log('changeModel', item)
    getTreeList(item)
  // console.log('changeModel', item)
  getTreeList(item)
}

let treeRef = ref(null)
let treeData = ref([])

const defaultProps = ref({
    children: 'children',
    label: 'label',
  children: "children",
  label: "label",
})

//检索树
let filterText = ref('')
let filterText = ref("")

const filterNode = (value, data) => {
    if (!value) return true
    return data.label.includes(value)
  if (!value) return true
  return data.label.includes(value)
}
watch(filterText, (val) => {
    // 检查treeRef.value是否是一个有效的ElTree实例
    if (treeRef.value && typeof treeRef.value.filter === 'function') {
        // 调用filter方法
        treeRef.value.filter(val);
    } else {
        // treeRef.value无效，处理错误
        console.error('error');
    }
});


  // 检查treeRef.value是否是一个有效的ElTree实例
  if (treeRef.value && typeof treeRef.value.filter === "function") {
    // 调用filter方法
    treeRef.value.filter(val)
  } else {
    // treeRef.value无效，处理错误
    console.error("error")
  }
})

let currentNode = ref(null)
let treeExpandData = ref([])
@@ -163,156 +176,153 @@

//获取树列表
function getTreeList(modelCode) {
    treeLoading.value = true
    treeList({ modelCode }).then(res => {
        treeLoading.value = false
        let { data } = res
        treeData.value = data;
        let chooseNode = null;
        if (data.length > 0) {
            if (data[0].children && data[0].children.length !== 0 && isFirstLeafNode.value) {
                if (data[0].children[0].children && data[0].children[0].children.length !== 0) {
                    chooseNode = data[0].children[0].children[0];
                } else {
                    chooseNode = data[0].children[0];
                }
            } else {
                chooseNode = data[0];
            }
            currentNode.value = chooseNode;
            treeExpandData.value.push(chooseNode.id);
            nextTick(() => {
                treeRef.value.setCurrentKey(chooseNode.id);
                if (tab.value == 1 && deviceConfigRef.value) {
                    deviceConfigRef.value.getList(chooseNode)
                }
                if (tab.value == 2 && statisticalIndicatorsRef.value) {
                    statisticalIndicatorsRef.value.getList(chooseNode)
                }
                if (tab.value == 3 && collectIndicatorsRef.value) {
                    collectIndicatorsRef.value.getList(chooseNode)
                }
            });
  treeLoading.value = true
  treeList({ modelCode }).then((res) => {
    treeLoading.value = false
    let { data } = res
    treeData.value = data
    let chooseNode = null
    if (data.length > 0) {
      if (data[0].children && data[0].children.length !== 0 && isFirstLeafNode.value) {
        if (data[0].children[0].children && data[0].children[0].children.length !== 0) {
          chooseNode = data[0].children[0].children[0]
        } else {
          chooseNode = data[0].children[0]
        }
    })
      } else {
        chooseNode = data[0]
      }
      currentNode.value = chooseNode
      treeExpandData.value.push(chooseNode.id)
      nextTick(() => {
        treeRef.value.setCurrentKey(chooseNode.id)
        if (tab.value == 1 && deviceConfigRef.value) {
          deviceConfigRef.value.getList(chooseNode)
        }
        if (tab.value == 2 && statisticalIndicatorsRef.value) {
          statisticalIndicatorsRef.value.getList(chooseNode)
        }
        if (tab.value == 3 && collectIndicatorsRef.value) {
          collectIndicatorsRef.value.getList(chooseNode)
        }
      })
    }
  })
}
//新增后更新树列表
function addTreeList(newChild) {
    treeData.value.push(newChild)
  treeData.value.push(newChild)
}
//新增成功后更新默认选中,并触发方法
function addTreeSelectList(addedNode, newChild) {
    treeExpandData.value.push(addedNode.nodeId)
    nextTick(() => {
        treeRef.value.setCurrentNode(newChild)
        currentNode.value = newChild;
        if (tab.value == 1) {
            if (deviceConfigRef.value) {
                deviceConfigRef.value.getList(newChild)
            }
        }
        if (tab.value == 2) {
            if (statisticalIndicatorsRef.value) {
                statisticalIndicatorsRef.value.getList(newChild)
            }
        }
        if (tab.value == 3) {

            if (collectIndicatorsRef.value) {
                collectIndicatorsRef.value.getList(newChild)
            }
        }
    })

  treeExpandData.value.push(addedNode.nodeId)
  nextTick(() => {
    treeRef.value.setCurrentNode(newChild)
    currentNode.value = newChild
    if (tab.value == 1) {
      if (deviceConfigRef.value) {
        deviceConfigRef.value.getList(newChild)
      }
    }
    if (tab.value == 2) {
      if (statisticalIndicatorsRef.value) {
        statisticalIndicatorsRef.value.getList(newChild)
      }
    }
    if (tab.value == 3) {
      if (collectIndicatorsRef.value) {
        collectIndicatorsRef.value.getList(newChild)
      }
    }
  })
}
//树点击
function changeNode(data, node, ev) {
    console.log('树点击', data)
    currentNode.value = data;
    if (tab.value == 1) {
        if (deviceConfigRef.value) {
            deviceConfigRef.value.getList(data)
        }
  console.log("树点击", data)
  currentNode.value = data
  if (tab.value == 1) {
    if (deviceConfigRef.value) {
      deviceConfigRef.value.getList(data)
    }
    if (tab.value == 2) {
        if (statisticalIndicatorsRef.value) {
            statisticalIndicatorsRef.value.getList(data)
        }
  }
  if (tab.value == 2) {
    if (statisticalIndicatorsRef.value) {
      statisticalIndicatorsRef.value.getList(data)
    }
    if (tab.value == 3) {
        if (collectIndicatorsRef.value) {
            collectIndicatorsRef.value.getList(data)
        }
  }
  if (tab.value == 3) {
    if (collectIndicatorsRef.value) {
      collectIndicatorsRef.value.getList(data)
    }
  }
}

let treeNodeModalRef = ref(null)
function addNode(node, data) {
    if (treeNodeModalRef.value) {
        console.log('treeNodeModalRef', node, data)
        treeNodeModalRef.value.handleOpen(node, data, true)
    }
  if (treeNodeModalRef.value) {
    console.log("treeNodeModalRef", node, data)
    treeNodeModalRef.value.handleOpen(node, data, true)
  }
}
function editNode(node, data) {
    if (treeNodeModalRef.value) {
        treeNodeModalRef.value.handleOpen(node, data, false)
    }
  if (treeNodeModalRef.value) {
    treeNodeModalRef.value.handleOpen(node, data, false)
  }
}

function delNode(node, data) {
    if (data.children && data.children.length > 0) {
        proxy.$modal.msgWarning('包含子节点，不能进行删除！')
        return
  if (data.children && data.children.length > 0) {
    proxy.$modal.msgWarning("包含子节点，不能进行删除！")
    return
  }

  hasEnergyIndex(data.id).then((response) => {
    if (response.data) {
      proxy.$modal.msgWarning("当前节点下存在指标，不能进行删除！")
    } else {
      proxy.$modal
        .confirm('是否确认删除名为"' + data.label + '"的节点?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(function () {
          return delModelNode(data.id)
        })
        .then(() => {
          let parent = node.parent
          let children = parent.data.children || parent.data
          let index = children.findIndex((d) => d.id === data.id)
          children.splice(index, 1)

          nextTick(() => {
            if (parent.data && parent.data.id) {
              changeNode(parent.data)
            } else {
              changeNode(null)
            }
          })
          proxy.$modal.msgSuccess("删除成功")
        })
        .catch(function () {})
    }

    hasEnergyIndex(data.id).then(response => {
        if (response.data) {
            proxy.$modal.msgWarning('当前节点下存在指标，不能进行删除！')
        } else {
            proxy.$modal.confirm('是否确认删除名为"' + data.label + '"的节点?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function () {
                    return delModelNode(data.id)
                })
                .then(() => {
                    let parent = node.parent
                    let children = parent.data.children || parent.data
                    let index = children.findIndex(d => d.id === data.id)
                    children.splice(index, 1)

                    nextTick(() => {
                        if (parent.data && parent.data.id) {
                            changeNode(parent.data)
                        } else {
                            changeNode(null)
                        }
                    })
                    proxy.$modal.msgSuccess('删除成功')
                })
                .catch(function () {
                })
        }
    })
  })
}

let tab = ref('1')
let tab = ref("1")
function handleTab(value) {
    tab.value = value
    nextTick(() => {
        if (value == 1 && deviceConfigRef.value) {
            deviceConfigRef.value.getList(currentNode.value)
        }
        if (value == 2 && statisticalIndicatorsRef.value) {
            statisticalIndicatorsRef.value.getList(currentNode.value)
        }
        if (value == 3 && collectIndicatorsRef.value) {
            collectIndicatorsRef.value.getList(currentNode.value)
        }
    });

  tab.value = value
  nextTick(() => {
    if (value == 1 && deviceConfigRef.value) {
      deviceConfigRef.value.getList(currentNode.value)
    }
    if (value == 2 && statisticalIndicatorsRef.value) {
      statisticalIndicatorsRef.value.getList(currentNode.value)
    }
    if (value == 3 && collectIndicatorsRef.value) {
      collectIndicatorsRef.value.getList(currentNode.value)
    }
  })
}
</script>

@@ -320,77 +330,88 @@
@import "@/assets/styles/page.scss";

.page-box {
    height: calc(100vh - 145px);
  height: calc(100vh - 145px);

    .tree-box {
        height: calc(100% - 70px);
        overflow-y: auto !important;
  .tree-box {
    height: calc(100% - 70px);
    overflow-y: auto !important;
  }

  .select-box {
    display: flex;
    align-items: center;

    :deep .el-icon {
      color: #fff;
      margin: 0 10px 0 15px;
      font-size: 20px;
      // &:hover{
      //     color: #3371EB;
      // }
    }
  }

    .select-box {
        display: flex;
        align-items: center;
  .node-opt {
    flex: 1;
    text-align: right;
    margin-right: 5px;

        :deep .el-icon {
            color: #fff;
            margin: 0 10px 0 15px;
            font-size: 20px;
            // &:hover{
            //     color: #3371EB;
            // }
        }
    :deep .el-icon {
      color: #fff;
      margin-right: 5px;
    }

    .node-opt {
        flex: 1;
        text-align: right;
        margin-right: 5px;

        :deep .el-icon {
            color: #fff;
            margin-right: 5px;
        }
    }


  }
}

:deep .el-tabs__nav-wrap:after {
    background: transparent;
  background: transparent;
}

:deep .el-tabs__item {
    color: #fff;
    font-size: 20px;
    padding: 0 20px;
  color: #fff;
  font-size: 20px;
  padding: 0 20px;

    &.is-active,
    &:hover {
        color: #999 !important;
    }
  &.is-active,
  &:hover {
    color: #999 !important;
  }
}

.tab-box {
    display: flex;
    align-items: center;
  display: flex;
  align-items: center;
  color: #fff;
  border-bottom: 1px solid #3371eb;
  margin-right: 20px;
  margin-left: 15px;
  font-size: 15px;

  .tab-li {
    cursor: pointer;
    border: 1px solid #3371eb;
    padding: 8px 20px;
    border-radius: 5px 5px 0 0;
  }

  .is-tab {
    background: #3371eb;
    color: #fff;
    border-bottom: 1px solid #3371EB;
    margin-right: 20px;
  }
}
.themeDark {
  .tab-box {
    color: #fff;
  }
}

    .tab-li {
        cursor: pointer;
        border: 1px solid #3371EB;
        padding: 10px 25px;
        border-radius: 5px 5px 0 0;
    }

    .is-tab {
        background: #3371EB;
    }
.themeLight {
  .tab-box {
    color: #333;
  }
}

.content-box {
    height: calc(100vh - 306px) !important;

  height: calc(100vh - 306px) !important;
}
</style>

 zhitan-vue/src/views/modelconfiguration/calculationformula/calculationFormula.vue

@@ -9,28 +9,33 @@
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <!-- <el-form-item style="float: right">
          <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        </el-form-item> -->
      </el-form>
    </div>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="funcName" label="函数名" show-overflow-tooltip align="center"> </el-table-column>
        <el-table-column prop="funcText" label="函数文本" show-overflow-tooltip align="center"> </el-table-column>
        <el-table-column prop="info" label="介绍" show-overflow-tooltip align="center"> </el-table-column>
        <!-- <el-table-column prop="prop" label="操作" width="150" align="center">
    <div class="table-bg-style">
      <div class="table-box">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="funcName" label="函数名" show-overflow-tooltip align="center"> </el-table-column>
          <el-table-column prop="funcText" label="函数文本" show-overflow-tooltip align="center"> </el-table-column>
          <el-table-column prop="info" label="介绍" show-overflow-tooltip align="center"> </el-table-column>
          <!-- <el-table-column prop="prop" label="操作" width="150" align="center">
                    <template #default="scope">
                        <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column> -->
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

 zhitan-vue/src/views/modelconfiguration/collectindicator/collectIndicator.vue

@@ -17,37 +17,44 @@
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <div class=" mt20 mb20">
        <el-button type="primary" icon="Plus" @click="handleDialog('add')">新增</el-button>
    <div class="table-bg-style">
      <div class="table-box">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="code" label="参数编码" align="center" show-overflow-tooltip />
          <el-table-column prop="name" label="参数名称" align="center" show-overflow-tooltip />
          <el-table-column
            prop="unit"
            label="单位"
            align="center"
            show-overflow-tooltip
            :formatter="(row, column) => proxy.selectDictLabel(sys_unit, row.unit)"
          />
          <el-table-column prop="deviceType" label="设备类型" align="center" show-overflow-tooltip>
            <template #default="scope">
              <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180" align="center" show-overflow-tooltip>
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row.id)"> 修改 </el-button>

              <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="code" label="参数编码" align="center" show-overflow-tooltip />
        <el-table-column prop="name" label="参数名称" align="center" show-overflow-tooltip />
        <el-table-column prop="unit" label="单位" align="center" show-overflow-tooltip
          :formatter="(row, column) => proxy.selectDictLabel(sys_unit, row.unit)" />
        <el-table-column prop="deviceType" label="设备类型" align="center" show-overflow-tooltip>
          <template #default="scope">
            <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row.id)">
              修改
            </el-button>

            <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)">
              删除
            </el-button>
          </template>

        </el-table-column>
      </el-table>
      <pagination v-show="pageTotal > 0" :total="pageTotal" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
@@ -71,9 +78,7 @@
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleOk">
            确认
          </el-button>
          <el-button type="primary" @click="handleOk"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
@@ -81,14 +86,18 @@
</template>

<script setup name="collect">
import { listTemplate, addTemplate, getTempById, putTemplate, delTempById } from '@/api/modelConfiguration/collectIndicator.js'
import { reactive, ref } from 'vue';
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance();
const { sys_device_type } = proxy.useDict("sys_device_type");
const { sys_unit } = proxy.useDict("sys_unit");


import {
  listTemplate,
  addTemplate,
  getTempById,
  putTemplate,
  delTempById,
} from "@/api/modelConfiguration/collectIndicator.js"
import { reactive, ref } from "vue"
import { Delete, Edit, Search, Share, Upload } from "@element-plus/icons-vue"
const { proxy } = getCurrentInstance()
const { sys_device_type } = proxy.useDict("sys_device_type")
const { sys_unit } = proxy.useDict("sys_unit")

let queryParams = ref({
  pageNum: 1,
@@ -96,16 +105,16 @@
})
let pageTotal = ref(0)
let dialogVisible = ref(false)
let dialogTitle = ref('')
let dialogTitle = ref("")

let queryForm = ref({})
let form = ref({})
let tableData = ref([])
const rules = {
  code: [{ required: true, message: '请输入', trigger: 'blur' },],
  name: [{ required: true, message: '请输入', trigger: 'blur' },],
  unit: [{ required: true, message: '请选择', trigger: 'change' },],
  deviceType: [{ required: true, message: '请选择', trigger: 'change' },],
  code: [{ required: true, message: "请输入", trigger: "blur" }],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  unit: [{ required: true, message: "请选择", trigger: "change" }],
  deviceType: [{ required: true, message: "请选择", trigger: "change" }],
}

function handleQuery() {
@@ -113,14 +122,13 @@
  getList()
}


function resetQuery() {
  queryForm.value = {}
  queryParams.value.pageNum = 1
  getList()
}
function handleEdit(id) {
  getTempById({ id }).then(res => {
  getTempById({ id }).then((res) => {
    if (res.code == 200) {
      handleDialog()
      form.value = JSON.parse(JSON.stringify(res.data))
@@ -129,62 +137,62 @@
}

function handleDel(row) {
  proxy.$modal.confirm('是否确认删除指标名为"' + row.name + '"的数据项?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    return delTempById(row.id)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess('删除成功')
  }).catch(function () {
  })

  proxy.$modal
    .confirm('是否确认删除指标名为"' + row.name + '"的数据项?', "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(() => {
      return delTempById(row.id)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(function () {})
}

function getList() {
  let params = {
    ...queryParams.value,
    ...queryForm.value
    ...queryForm.value,
  }
  listTemplate(params).then(res => {
    tableData.value = res.rows;
  listTemplate(params).then((res) => {
    tableData.value = res.rows
    pageTotal.value = res.total
  });
  })
}

function handleDialog(type) {
  if (type == 'add') {
    dialogTitle = '新增采集参数模版'
  if (type == "add") {
    dialogTitle = "新增采集参数模版"
  } else {
    dialogTitle = '修改采集参数模版'
    dialogTitle = "修改采集参数模版"
  }
  dialogVisible.value = true
}

function handleOk() {
  proxy.$refs.formRef.validate(valid => {
    console.log('valid===>', valid);
  proxy.$refs.formRef.validate((valid) => {
    console.log("valid===>", valid)
    if (valid) {
      if (form.value.id) {
        putTemplate(form.value).then(res => {
        putTemplate(form.value).then((res) => {
          proxy.$modal.msgSuccess(res.msg)
          dialogVisible.value = false
          getList()
        })
      } else {
        addTemplate(form.value).then(res => {
          console.log('res===>新增', res);
        addTemplate(form.value).then((res) => {
          console.log("res===>新增", res)
          proxy.$modal.msgSuccess(res.msg)
          dialogVisible.value = false
          getList()
        })
      }

    }
  })

}

function handleClose() {
@@ -194,7 +202,6 @@
}

getList()

</script>

<style lang="scss" scoped>

 zhitan-vue/src/views/modelconfiguration/energytype/energyType.vue

@@ -1,25 +1,12 @@
<template>
  <div class="page">
    <div class="form-card">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        label-width="80px"
      >
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px">
        <el-form-item label="能源类型">
          <el-input
            v-model="queryParams.enername"
            placeholder="能源类型"
            maxlength="30"
          />
          <el-input v-model="queryParams.enername" placeholder="能源类型" maxlength="30" />
        </el-form-item>
        <el-form-item label="能源品种">
          <el-select
            v-model="queryParams.enerclassid"
            placeholder="能源品种"
            style="width: 100%"
          >
          <el-select v-model="queryParams.enerclassid" placeholder="能源品种" style="width: 100%">
            <el-option
              v-for="dict in energyVarietiesList"
              :key="dict.enerclassid"
@@ -29,121 +16,77 @@
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="Plus" @click="handleAdd"> 新增 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <div class="mt20 mb20">
        <el-button type="primary" icon="Plus" @click="handleAdd"
          >新增</el-button
        >
    <div class="table-bg-style">
      <div class="table-box">
        <el-table v-loading="loading" :data="energyTypeList">
          <el-table-column
            label="能源类型"
            align="center"
            key="enername"
            prop="enername"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="计量单位" align="center" key="muid" prop="muid" :show-overflow-tooltip="true" />
          <el-table-column
            label="能源品种"
            align="center"
            key="enerclassname"
            prop="enerclassname"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="能源编号" align="center" key="enersno" prop="enersno" :show-overflow-tooltip="true" />
          <el-table-column
            label="是否存储"
            align="center"
            key="isstorage"
            prop="isstorage"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="单价" align="center" key="price" prop="price" :show-overflow-tooltip="true" />
          <el-table-column
            label="折标系数"
            align="center"
            key="coefficient"
            prop="coefficient"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="排放因子"
            align="center"
            key="emissionFactors"
            prop="emissionFactors"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="备注" align="center" key="note" prop="note" :show-overflow-tooltip="true" />
          <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="编辑" placement="top">
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"> 编辑 </el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="queryParams.total > 0"
          :total="queryParams.total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <el-table v-loading="loading" :data="energyTypeList">
        <el-table-column
          label="能源类型"
          align="center"
          key="enername"
          prop="enername"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="计量单位"
          align="center"
          key="muid"
          prop="muid"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="能源品种"
          align="center"
          key="enerclassname"
          prop="enerclassname"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="能源编号"
          align="center"
          key="enersno"
          prop="enersno"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="是否存储"
          align="center"
          key="isstorage"
          prop="isstorage"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="单价"
          align="center"
          key="price"
          prop="price"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="折标系数"
          align="center"
          key="coefficient"
          prop="coefficient"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="排放因子"
          align="center"
          key="emissionFactors"
          prop="emissionFactors"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="备注"
          align="center"
          key="note"
          prop="note"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
          align="center"
          width="200"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button
                link
                type="primary"
                icon="Edit"
                @click="handleUpdate(scope.row)"
              >
                编辑
              </el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button
                link
                type="primary"
                icon="Delete"
                @click="handleDelete(scope.row)"
              >
                删除
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="queryParams.total > 0"
        :total="queryParams.total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="90px">
        <el-row>
@@ -154,12 +97,7 @@
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位" prop="muid">
              <el-select
                v-model="form.muid"
                placeholder="请选项计量单位"
                clearable
                style="width: 100%"
              >
              <el-select v-model="form.muid" placeholder="请选项计量单位" clearable style="width: 100%">
                <el-option
                  v-for="dict in sys_unit"
                  :key="dict.value"
@@ -177,11 +115,7 @@
          </el-col>
          <el-col :span="12">
            <el-form-item label="能源品种" prop="enerclassid">
              <el-select
                v-model="form.enerclassid"
                placeholder="请选项能源品种"
                style="width: 100%"
              >
              <el-select v-model="form.enerclassid" placeholder="请选项能源品种" style="width: 100%">
                <el-option
                  v-for="dict in energyVarietiesList"
                  :key="dict.enerclassid"
@@ -193,11 +127,7 @@
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否存储" prop="isstorage">
              <el-select
                v-model="form.isstorage"
                placeholder="请选项是否存储"
                style="width: 100%"
              >
              <el-select v-model="form.isstorage" placeholder="请选项是否存储" style="width: 100%">
                <el-option
                  v-for="dict in sys_yes_no"
                  :key="dict.value"
@@ -248,11 +178,7 @@
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="note">
              <el-input
                v-model="form.note"
                placeholder="请输入备注"
                type="textarea"
              />
              <el-input v-model="form.note" placeholder="请输入备注" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
@@ -273,15 +199,15 @@
  getEnergyType,
  updateEnergyType,
  delEnergyType,
} from "@/api/modelConfiguration/energyType";
import { listEnergyVarietiesList } from "@/api/modelConfiguration/energyVarieties";
const { proxy } = getCurrentInstance();
const { sys_unit, sys_yes_no } = proxy.useDict("sys_unit", "sys_yes_no");
const energyVarietiesList = ref([]);
const energyTypeList = ref([]);
const open = ref(false);
const loading = ref(false);
const title = ref("");
} from "@/api/modelConfiguration/energyType"
import { listEnergyVarietiesList } from "@/api/modelConfiguration/energyVarieties"
const { proxy } = getCurrentInstance()
const { sys_unit, sys_yes_no } = proxy.useDict("sys_unit", "sys_yes_no")
const energyVarietiesList = ref([])
const energyTypeList = ref([])
const open = ref(false)
const loading = ref(false)
const title = ref("")
const data = reactive({
  form: {},
  queryParams: {
@@ -292,76 +218,68 @@
    enerclassname: null,
  },
  rules: {
    enername: [
      { required: true, message: "能源类型不能为空", trigger: "blur" },
    ],
    enername: [{ required: true, message: "能源类型不能为空", trigger: "blur" }],
    enersno: [
      { required: true, message: "能源编号不能为空", trigger: "blur" },
      { pattern: /^[a-z0-9]*$/, message: "能源编号必须为数字/小写字母" },
    ],
    enerclassid: [
      { required: true, message: "能源品种不能为空", trigger: "blur" },
    ],
    isstorage: [
      { required: true, message: "是否存储不能为空", trigger: "blur" },
    ],
    enerclassid: [{ required: true, message: "能源品种不能为空", trigger: "blur" }],
    isstorage: [{ required: true, message: "是否存储不能为空", trigger: "blur" }],
    price: [{ required: true, message: "单价不能为空", trigger: "blur" }],
    coefficient: [
      { required: true, message: "折标系数不能为空", trigger: "blur" },
    ],
    coefficient: [{ required: true, message: "折标系数不能为空", trigger: "blur" }],
  },
});
const { queryParams, form, rules } = toRefs(data);
getList();
getEnergyVarietiesList();
})
const { queryParams, form, rules } = toRefs(data)
getList()
getEnergyVarietiesList()
// 模型配置管理-能源类型管理-列表
function getList() {
  loading.value = true;
  loading.value = true
  listEnergyType(proxy.addDateRange(queryParams.value)).then((res) => {
    loading.value = false;
    energyTypeList.value = res.rows;
    queryParams.value.total = res.total;
  });
    loading.value = false
    energyTypeList.value = res.rows
    queryParams.value.total = res.total
  })
}
function getEnergyVarietiesList() {
  listEnergyVarietiesList().then((res) => {
    energyVarietiesList.value = res.data;
  });
    energyVarietiesList.value = res.data
  })
}
// 模型配置管理-能源类型管理-搜索
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  queryParams.value.pageNum = 1
  getList()
}
// 模型配置管理-能源类型管理-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  proxy.resetForm("queryRef")
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    enerclassname: null,
  };
  getList();
  }
  getList()
}
// 模型配置管理-能源类型管理-新增
function handleAdd() {
  reset();
  open.value = true;
  title.value = "新增能源类型";
  reset()
  open.value = true
  title.value = "新增能源类型"
}
function handleClick(label, value) {
  form.value[label] = value;
  console.log(form.value, label, value);
  form.value[label] = value
  console.log(form.value, label, value)
}
// 模型配置管理-能源类型管理-编辑
function handleUpdate(row) {
  reset();
  reset()
  getEnergyType(row.enerid).then((response) => {
    form.value = response.data;
    open.value = true;
    title.value = "编辑能源类型";
  });
    form.value = response.data
    open.value = true
    title.value = "编辑能源类型"
  })
}
// 模型配置管理-能源类型管理-新增/编辑-保存
function submitForm() {
@@ -369,24 +287,24 @@
    if (valid) {
      if (form.value.enerid != undefined) {
        updateEnergyType(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addEnergyType(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  });
  })
}
// 模型配置管理-能源类型管理-新增/编辑-取消
function cancel() {
  open.value = false;
  reset();
  open.value = false
  reset()
}
// 模型配置管理-能源类型管理-新增/编辑-表单重置
function reset() {
@@ -401,21 +319,21 @@
    muidString: null,
    note: null,
    price: null,
  };
  proxy.resetForm("formRef");
  }
  proxy.resetForm("formRef")
}
// 模型配置管理-能源类型管理-删除
function handleDelete(row) {
  proxy.$modal
    .confirm('是否确认删除能源类型为"' + row.enername + '"的数据项？')
    .then(function () {
      return delEnergyType(row.enerid);
      return delEnergyType(row.enerid)
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {});
    .catch(() => {})
}
</script>
<style scoped lang="scss">

 zhitan-vue/src/views/modelconfiguration/energyvarieties/energyVarieties.vue

@@ -1,6 +1,5 @@
<template>
  <div class="page">

    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px" @submit.prevent>
        <el-form-item label="能源品种">
@@ -10,36 +9,73 @@
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <div class="mt20 mb20">
        <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
    <div class="table-bg-style">
      <div class="table-box">
        <el-table v-loading="loading" :data="energyVarietiesList">
          <el-table-column
            label="能源品种"
            align="center"
            key="enerclassname"
            prop="enerclassname"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="备注" align="center" key="note" prop="note" :show-overflow-tooltip="true" />
          <el-table-column
            label="创建人"
            align="center"
            key="createBy"
            prop="createBy"
            :show-overflow-tooltip="true"
            width="100"
          />
          <el-table-column
            label="创建时间"
            align="center"
            key="createTime"
            prop="createTime"
            :show-overflow-tooltip="true"
            width="200"
          />
          <el-table-column
            label="更新人"
            align="center"
            key="updateBy"
            prop="updateBy"
            :show-overflow-tooltip="true"
            width="100"
          />
          <el-table-column
            label="更新时间"
            align="center"
            key="updateTime"
            prop="updateTime"
            :show-overflow-tooltip="true"
            width="200"
          />
          <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="编辑" placement="top">
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"> 编辑 </el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="queryParams.total > 0"
          :total="queryParams.total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <el-table v-loading="loading" :data="energyVarietiesList">
        <el-table-column label="能源品种" align="center" key="enerclassname" prop="enerclassname" :show-overflow-tooltip="true" />
        <el-table-column label="备注" align="center" key="note" prop="note" :show-overflow-tooltip="true" />
        <el-table-column label="创建人" align="center" key="createBy" prop="createBy" :show-overflow-tooltip="true" width="100"/>
        <el-table-column label="创建时间" align="center" key="createTime" prop="createTime" :show-overflow-tooltip="true" width="200"/>
        <el-table-column label="更新人" align="center" key="updateBy" prop="updateBy" :show-overflow-tooltip="true" width="100"/>
        <el-table-column label="更新时间" align="center" key="updateTime" prop="updateTime" :show-overflow-tooltip="true" width="200"/>
        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">
                编辑
              </el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">
                删除
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="queryParams.total > 0" :total="queryParams.total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
@@ -72,12 +108,12 @@
  getEnergyVarieties,
  updateEnergyVarieties,
  delEnergyVarieties,
} from "@/api/modelConfiguration/energyVarieties";
const { proxy } = getCurrentInstance();
const energyVarietiesList = ref([]);
const open = ref(false);
const loading = ref(false);
const title = ref("");
} from "@/api/modelConfiguration/energyVarieties"
const { proxy } = getCurrentInstance()
const energyVarietiesList = ref([])
const open = ref(false)
const loading = ref(false)
const title = ref("")
const data = reactive({
  form: {},
  queryParams: {
@@ -89,41 +125,39 @@
  rules: {
    enerclassname: [{ required: true, message: "能源品种不能为空", trigger: "blur" }],
  },
});
const { queryParams, form, rules } = toRefs(data);
getList();
})
const { queryParams, form, rules } = toRefs(data)
getList()
// 模型配置管理-能源品种设置-列表
function getList() {
  loading.value = true;
  listEnergyVarieties(
    proxy.addDateRange(queryParams.value)
  ).then((res) => {
    loading.value = false;
    energyVarietiesList.value = res.rows;
    queryParams.value.total = res.total;
  });
  loading.value = true
  listEnergyVarieties(proxy.addDateRange(queryParams.value)).then((res) => {
    loading.value = false
    energyVarietiesList.value = res.rows
    queryParams.value.total = res.total
  })
}
// 模型配置管理-能源品种设置-搜索
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  queryParams.value.pageNum = 1
  getList()
}
// 模型配置管理-能源品种设置-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  proxy.resetForm("queryRef")
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    enerclassname: null,
  }
  getList();
  getList()
}
// 模型配置管理-能源品种设置-新增
function handleAdd() {
  reset();
  open.value = true;
  title.value = "新增能源品种管理";
  reset()
  open.value = true
  title.value = "新增能源品种管理"
}
// 模型配置管理-能源品种设置-编辑
// function handleUpdate(row) {
@@ -133,58 +167,58 @@
//   title.value = "编辑能源品种管理";
// }
function handleUpdate(row) {
  reset();
  getEnergyVarieties(row.enerclassid).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "编辑能源品种管理";
  });
};
  reset()
  getEnergyVarieties(row.enerclassid).then((response) => {
    form.value = response.data
    open.value = true
    title.value = "编辑能源品种管理"
  })
}
// 模型配置管理-能源品种设置-新增/编辑-保存
function submitForm() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      if (form.value.enerclassid != undefined) {
        updateEnergyVarieties(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addEnergyVarieties(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  });
  })
}
// 模型配置管理-能源品种设置-新增/编辑-取消
function cancel() {
  open.value = false;
  reset();
  open.value = false
  reset()
}
// 模型配置管理-能源品种设置-新增/编辑-表单重置
function reset() {
  form.value = {
    enerclassname: '',
    note: ''
  };
  proxy.resetForm("formRef");
    enerclassname: "",
    note: "",
  }
  proxy.resetForm("formRef")
}
// 模型配置管理-能源品种设置-删除
function handleDelete(row) {
  proxy.$modal
    .confirm('是否确认删除能源品种为"' + row.enerclassname + '"的数据项？')
    .then(function () {
      return delEnergyVarieties(row.enerclassid);
      return delEnergyVarieties(row.enerclassid)
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => { });
    .catch(() => {})
}
</script>
<style scoped lang="scss">

 zhitan-vue/src/views/modelconfiguration/indexwarehouse/components/statisticalIndicatorManagement/statisticalIndicatorManagement.vue

@@ -1,101 +1,116 @@
<template>
    <div class="page-box">
        <div class="form-card">
            <el-form :model="form" ref="queryRef" :inline="true" label-width="70px">
                <el-form-item label="编码" prop="indexCategory">
                    <el-select v-model="form.indexCategory" placeholder="请选择指标分类" style="width: 200px">
                        <el-option v-for="dict in sys_index_category" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="关键字" prop="name">
                    <el-input v-model="form.name" placeholder="请输入指标名称/编码" />
                </el-form-item>
  <div class="page-box">
    <div class="form-card">
      <el-form :model="form" ref="queryRef" :inline="true" label-width="70px">
        <el-form-item label="编码" prop="indexCategory">
          <el-select v-model="form.indexCategory" placeholder="请选择指标分类" style="width: 200px">
            <el-option v-for="dict in sys_index_category" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字" prop="name">
          <el-input v-model="form.name" placeholder="请输入指标名称/编码" />
        </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    <el-button icon="Plus" type="primary" @click="handleAdd">新增</el-button>
                    <el-button icon="Delete" :disabled="multiple" @click="handleDel">删除</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- <div class="ml20 mt20 mb20">
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button icon="Plus" type="primary" @click="handleAdd">新增</el-button>
          <el-button icon="Delete" :disabled="multiple" @click="handleDel">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <div class="ml20 mt20 mb20">
            <el-button icon="Plus" type="primary" @click="handleAdd">新增</el-button>
            <el-button icon="Delete" :disabled="multiple" @click="handleDel">删除</el-button>
            <el-button icon="Upload">导入</el-button>
        </div> -->
        <div class="table-box">
            <el-table :data="tableData" v-loading="loading" height="calc(100vh - 450px)"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" show-overflow-tooltip />
                <el-table-column prop="code" label="指标编码" align="center" show-overflow-tooltip />
                <el-table-column prop="name" label="指标名称" align="center" show-overflow-tooltip />
                <el-table-column prop="indexCategory" label="系统指标分类" align="center" show-overflow-tooltip
                    :formatter="(row, column) => proxy.selectDictLabel(sys_index_category, row.indexCategory)" />
                <el-table-column prop="unitId" label="单位" align="center" show-overflow-tooltip
                    :formatter="(row, column) => proxy.selectDictLabel(sys_unit, row.unitId)" />
                <el-table-column label="操作" width="230" align="center">
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)">
                            修改
                        </el-button>
                        <el-button link type="primary" icon="Edit" @click="handleSave(scope.row)">
                            存储
                        </el-button>
                        <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList(currentNode)" />
        <edit-modal ref="EditModalRef" :indexType="indexType" :sys_index_category='sys_index_category'
            :sys_unit='sys_unit' @getList="getList(currentNode)" />
        <storageModal ref="storageModalRef" />


    <div class="table-box" style="margin-top: 0">
      <el-table
        :data="tableData"
        v-loading="loading"
        height="calc(100vh - 450px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" show-overflow-tooltip />
        <el-table-column prop="code" label="指标编码" align="center" show-overflow-tooltip />
        <el-table-column prop="name" label="指标名称" align="center" show-overflow-tooltip />
        <el-table-column
          prop="indexCategory"
          label="系统指标分类"
          align="center"
          show-overflow-tooltip
          :formatter="(row, column) => proxy.selectDictLabel(sys_index_category, row.indexCategory)"
        />
        <el-table-column
          prop="unitId"
          label="单位"
          align="center"
          show-overflow-tooltip
          :formatter="(row, column) => proxy.selectDictLabel(sys_unit, row.unitId)"
        />
        <el-table-column label="操作" width="230" align="center">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 修改 </el-button>
            <el-button link type="primary" icon="Edit" @click="handleSave(scope.row)"> 存储 </el-button>
            <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList(currentNode)"
    />
    <edit-modal
      ref="EditModalRef"
      :indexType="indexType"
      :sys_index_category="sys_index_category"
      :sys_unit="sys_unit"
      @getList="getList(currentNode)"
    />
    <storageModal ref="storageModalRef" />
  </div>
</template>
<script setup>
import storageModal from './components/storage/StorageModal.vue';
import EditModal from './components/EditModal.vue'
import { listEnergyindex, delEnergyindex } from '@/api/modelConfiguration/indexWarehouse'
import storageModal from "./components/storage/StorageModal.vue"
import EditModal from "./components/EditModal.vue"
import { listEnergyindex, delEnergyindex } from "@/api/modelConfiguration/indexWarehouse"
const { proxy } = getCurrentInstance()
const { sys_index_category } = proxy.useDict("sys_index_category");
const { sys_unit } = proxy.useDict("sys_unit");
const { sys_index_category } = proxy.useDict("sys_index_category")
const { sys_unit } = proxy.useDict("sys_unit")

const props = defineProps(['indexType'])
const props = defineProps(["indexType"])
let loading = ref(false)
let form = ref({
    indexCategory: null,
    name: null
  indexCategory: null,
  name: null,
})
let tableData = ref([])
let total = ref(0);
let total = ref(0)
let queryParams = ref({
    pageNum: 1,
    pageSize: 10,
  pageNum: 1,
  pageSize: 10,
})
let currentNode = ref(null)
function getList(modelNode) {
    currentNode.value = modelNode;
  currentNode.value = modelNode

    console.log(111, currentNode.value)
    if (modelNode) {
        loading.value = true;
        form.value.nodeId = modelNode.id;
        form.value.indexType = props.indexType;
        listEnergyindex({ ...queryParams.value, ...form.value }).then(response => {
            tableData.value = response.rows;
            total.value = response.total;
            loading.value = false;
        });
    } else {
        tableData.value = [];
    }
  console.log(111, currentNode.value)
  if (modelNode) {
    loading.value = true
    form.value.nodeId = modelNode.id
    form.value.indexType = props.indexType
    listEnergyindex({ ...queryParams.value, ...form.value }).then((response) => {
      tableData.value = response.rows
      total.value = response.total
      loading.value = false
    })
  } else {
    tableData.value = []
  }
}

// // 回显数据字典
@@ -116,51 +131,54 @@
// 非多个禁用
let multiple = ref(true)
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.indexId);
    names.value = selection.map(item => item.name);
    multiple.value = !selection.length
  ids.value = selection.map((item) => item.indexId)
  names.value = selection.map((item) => item.name)
  multiple.value = !selection.length
}
function handleQuery() {
    getList(currentNode.value)
  getList(currentNode.value)
}

function resetQuery() {
    form.value = {
        indexCategory: null,
        name: null
    }
    getList(currentNode.value)
  form.value = {
    indexCategory: null,
    name: null,
  }
  getList(currentNode.value)
}

let EditModalRef = ref('')
let EditModalRef = ref("")
function handleAdd(row) {
    if (EditModalRef.value) {
        EditModalRef.value.handleOpen(row, currentNode.value)
    }
  if (EditModalRef.value) {
    EditModalRef.value.handleOpen(row, currentNode.value)
  }
}

function handleDel(row) {
    const indexIds = row.indexId || ids.value
    const indexNames = row.name || names.value
    proxy.$modal.confirm('是否确认删除指标名为"' + indexNames + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        return delEnergyindex(currentNode.value.id, indexIds)
    }).then(() => {
        getList(currentNode.value)
        proxy.$modal.msgError('删除成功')
    }).catch(function () {
  const indexIds = row.indexId || ids.value
  const indexNames = row.name || names.value
  proxy.$modal
    .confirm('是否确认删除指标名为"' + indexNames + '"的数据项?', "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(() => {
      return delEnergyindex(currentNode.value.id, indexIds)
    })
    .then(() => {
      getList(currentNode.value)
      proxy.$modal.msgError("删除成功")
    })
    .catch(function () {})
}

let storageModalRef = ref('')
let storageModalRef = ref("")
function handleSave(row) {
    if (storageModalRef.value) {
        storageModalRef.value.handleOpen(row, currentNode.value)
        storageModalRef.value.getIndexStorageFun(row.indexId)
    }
  if (storageModalRef.value) {
    storageModalRef.value.handleOpen(row, currentNode.value)
    storageModalRef.value.getIndexStorageFun(row.indexId)
  }
}

defineExpose({ getList })
@@ -170,11 +188,10 @@
@import "@/assets/styles/page.scss";

.page-box {
    height: calc(100vh - 115px);

  height: calc(100vh - 115px);
}

.table-box {
    height: calc(100vh - 455px);
  height: calc(100vh - 455px);
}
</style>

 zhitan-vue/src/views/modelconfiguration/indexwarehouse/indexWarehouse.vue

@@ -40,7 +40,7 @@
        </div>
      </div>
      <div class="page-container-right">
        <div class="mb20 mt20 ml20 tab-box">
        <div class="tab-box">
          <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')">计量器具配置信息</div>
          <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')">统计指标</div>
          <!-- <el-radio-group v-model="tab">
@@ -303,11 +303,13 @@
  color: #333;
  border-bottom: 1px solid #3371eb;
  margin-right: 20px;
  margin-left: 15px;
  font-size: 15px;

  .tab-li {
    cursor: pointer;
    border: 1px solid #3371eb;
    padding: 10px 25px;
    padding: 8px 20px;
    border-radius: 5px 5px 0 0;
  }


 zhitan-vue/src/views/modelconfiguration/setpeakvalley/setPeakValley.vue

@@ -6,52 +6,70 @@
          <el-input v-model="queryParams.remark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">
            搜索
          </el-button>
          <el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="Plus" @click="handleAdd"> 时段配置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <div class="mt20 mb20">
        <el-button type="primary" icon="Plus" @click="handleAdd">
          时段配置
        </el-button>
    <div class="table-bg-style">
      <div class="table-box">
        <el-table v-loading="loading" :data="productoutputList" style="width: 100%" row-key="id">
          <el-table-column
            label="生效开始日期"
            align="center"
            key="beginDate"
            prop="beginDate"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="生效结束日期"
            align="center"
            key="endDate"
            prop="endDate"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="备注" align="center" key="remark" prop="remark" :show-overflow-tooltip="true" />
          <el-table-column
            label="创建时间"
            align="center"
            key="createTime"
            prop="createTime"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="电价配置" placement="top">
                <el-button link type="primary" icon="Plus" @click="handleExpandChange(scope.row)"> 电价配置 </el-button>
              </el-tooltip>
              <el-tooltip content="编辑" placement="top">
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"> 编辑 </el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-table v-loading="loading" :data="productoutputList" style="width: 100%" row-key="id">
        <el-table-column label="生效开始日期" align="center" key="beginDate" prop="beginDate" :show-overflow-tooltip="true" />
        <el-table-column label="生效结束日期" align="center" key="endDate" prop="endDate" :show-overflow-tooltip="true" />
        <el-table-column label="备注" align="center" key="remark" prop="remark" :show-overflow-tooltip="true" />
        <el-table-column label="创建时间" align="center" key="createTime" prop="createTime" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="电价配置" placement="top">
              <el-button link type="primary" icon="Plus" @click="handleExpandChange(scope.row)">
                电价配置
              </el-button>
            </el-tooltip>
            <el-tooltip content="编辑" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">
                编辑
              </el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">
                删除
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="生效日期" prop="beginEndDate">
              <el-date-picker v-model="form.beginEndDate" type="daterange" range-separator="到" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" start-placeholder="生效开始日期" end-placeholder="生效结束日期" style="width: 100%" />
              <el-date-picker
                v-model="form.beginEndDate"
                type="daterange"
                range-separator="到"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                start-placeholder="生效开始日期"
                end-placeholder="生效结束日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
@@ -79,45 +97,89 @@
        </el-row>
        <el-row v-for="(item, index) in formChild.data" :key="item.id">
          <el-col :span="4">
            <el-form-item label="类别名称" :prop="'data.' + index + '.type'" :rules="{
              required: true,
              message: '类别名称不能为空',
              trigger: ['change'],
            }">
            <el-form-item
              label="类别名称"
              :prop="'data.' + index + '.type'"
              :rules="{
                required: true,
                message: '类别名称不能为空',
                trigger: ['change'],
              }"
            >
              <el-select v-model="item.type" placeholder="类别名称" clearable style="width: 100%">
                <el-option v-for="dict in electricity_price" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
                <el-option
                  v-for="dict in electricity_price"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="时段电价" :prop="'data.' + index + '.effecticityPrice'" :rules="{
              required: true,
              message: '时段电价不能为空',
              trigger: ['blur', 'change'],
            }">
              <el-input-number v-model="item.effecticityPrice" :min="0.0" :precision="2" :step="0.1"
                placeholder="时段电价" style="width: 100%" controls-position="right" />
            <el-form-item
              label="时段电价"
              :prop="'data.' + index + '.effecticityPrice'"
              :rules="{
                required: true,
                message: '时段电价不能为空',
                trigger: ['blur', 'change'],
              }"
            >
              <el-input-number
                v-model="item.effecticityPrice"
                :min="0.0"
                :precision="2"
                :step="0.1"
                placeholder="时段电价"
                style="width: 100%"
                controls-position="right"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="开始时间" :prop="'data.' + index + '.startTime'" :rules="{
              required: true,
              message: '开始时间不能为空',
              trigger: ['blur', 'change'],
            }">
              <el-time-select v-model="item.startTime" placeholder="开始时间" :max-time="item.stopTime" start="00:00:00"
                step="00:30:00" end="24:00:00" style="width: 100%" format="HH:mm:00" />
            <el-form-item
              label="开始时间"
              :prop="'data.' + index + '.startTime'"
              :rules="{
                required: true,
                message: '开始时间不能为空',
                trigger: ['blur', 'change'],
              }"
            >
              <el-time-select
                v-model="item.startTime"
                placeholder="开始时间"
                :max-time="item.stopTime"
                start="00:00:00"
                step="00:30:00"
                end="24:00:00"
                style="width: 100%"
                format="HH:mm:00"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="结束时间" :prop="'data.' + index + '.stopTime'" :rules="{
              required: true,
              message: '结束时间不能为空',
              trigger: ['blur', 'change'],
            }">
              <el-time-select v-model="item.stopTime" placeholder="结束时间" :min-time="item.startTime" start="00:00:00"
                step="00:30:00" end="24:00:00" style="width: 100%" format="HH:mm:00" :disabled="item.startTime==null" />
            <el-form-item
              label="结束时间"
              :prop="'data.' + index + '.stopTime'"
              :rules="{
                required: true,
                message: '结束时间不能为空',
                trigger: ['blur', 'change'],
              }"
            >
              <el-time-select
                v-model="item.stopTime"
                placeholder="结束时间"
                :min-time="item.startTime"
                start="00:00:00"
                step="00:30:00"
                end="24:00:00"
                style="width: 100%"
                format="HH:mm:00"
                :disabled="item.startTime == null"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
@@ -127,11 +189,14 @@
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button link type="primary" icon="Plus" @click="handleAddChildChild">
                新增
              </el-button>
              <el-button link type="primary" icon="Delete" @click="handleDeleteChildChild(item, index)"
                v-if="formChild.data.length > 1">
              <el-button link type="primary" icon="Plus" @click="handleAddChildChild"> 新增 </el-button>
              <el-button
                link
                type="primary"
                icon="Delete"
                @click="handleDeleteChildChild(item, index)"
                v-if="formChild.data.length > 1"
              >
                删除
              </el-button>
            </el-form-item>
@@ -157,18 +222,18 @@
  delPeakValleyConfiguration,
  listPeakValleyConfigurationChild,
  updatePeakValleyConfigurationChild,
} from "@/api/modelConfiguration/setPeakValley";
import { nanoid } from "nanoid";
const { proxy } = getCurrentInstance();
const { electricity_price } = proxy.useDict("electricity_price");
const productoutputList = ref([]);
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const title = ref("");
const loadingChild = ref(true);
const openChild = ref(false);
const titleChild = ref("");
} from "@/api/modelConfiguration/setPeakValley"
import { nanoid } from "nanoid"
const { proxy } = getCurrentInstance()
const { electricity_price } = proxy.useDict("electricity_price")
const productoutputList = ref([])
const open = ref(false)
const loading = ref(false)
const showSearch = ref(true)
const title = ref("")
const loadingChild = ref(true)
const openChild = ref(false)
const titleChild = ref("")
const data = reactive({
  form: {},
  queryParams: {
@@ -195,82 +260,80 @@
      },
    ],
  },
});
})

const { queryParams, form, rules, formChild } = toRefs(data);
getList();
const { queryParams, form, rules, formChild } = toRefs(data)
getList()
// 模型配置管理-尖峰平谷配置-列表
function getList() {
  loading.value = true;
  listPeakValleyConfiguration(proxy.addDateRange(queryParams.value)).then(
    (res) => {
      loading.value = false;
      productoutputList.value = res.rows;
      queryParams.value.total = res.total;
    }
  );
  loading.value = true
  listPeakValleyConfiguration(proxy.addDateRange(queryParams.value)).then((res) => {
    loading.value = false
    productoutputList.value = res.rows
    queryParams.value.total = res.total
  })
}
// 模型配置管理-尖峰平谷配置-搜索
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  queryParams.value.pageNum = 1
  getList()
}
// 模型配置管理-尖峰平谷配置-重置
function resetQuery() {
  proxy.resetForm("queryRef");
  (queryParams.value = {
  proxy.resetForm("queryRef")
  ;(queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    timeType: "YEAR",
    dataTime: null,
    total: 0,
  }),
    handleQuery();
    handleQuery()
}
// 模型配置管理-尖峰平谷配置-新增
function handleAdd() {
  reset();
  open.value = true;
  title.value = "新增尖峰平谷时段配置";
  reset()
  open.value = true
  title.value = "新增尖峰平谷时段配置"
}
// 模型配置管理-尖峰平谷配置-编辑
function handleUpdate(row) {
  reset();
  reset()
  getPeakValleyConfiguration(row.id).then((response) => {
    form.value = response.data;
    form.value.beginEndDate = [response.data.beginDate, response.data.endDate];
    open.value = true;
    title.value = "编辑尖峰平谷时段配置";
  });
    form.value = response.data
    form.value.beginEndDate = [response.data.beginDate, response.data.endDate]
    open.value = true
    title.value = "编辑尖峰平谷时段配置"
  })
}
// 模型配置管理-尖峰平谷配置-新增/编辑-保存
function submitForm() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      form.value.beginDate = form.value.beginEndDate[0];
      form.value.endDate = form.value.beginEndDate[1];
      delete form.value.beginEndDate;
      form.value.beginDate = form.value.beginEndDate[0]
      form.value.endDate = form.value.beginEndDate[1]
      delete form.value.beginEndDate
      if (form.value.id != undefined) {
        updatePeakValleyConfiguration(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addPeakValleyConfiguration(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  });
  })
}
// 模型配置管理-尖峰平谷配置-新增/编辑-取消
function cancel() {
  open.value = false;
  proxy.$refs.formRef.resetFields();
  reset();
  open.value = false
  proxy.$refs.formRef.resetFields()
  reset()
}
// 模型配置管理-尖峰平谷配置-新增/编辑-表单重置
function reset() {
@@ -278,88 +341,80 @@
    beginDate: null,
    endDate: null,
    remark: null,
  };
  }
}
// 模型配置管理-尖峰平谷配置-删除
function handleDelete(row) {
  proxy.$modal
    .confirm(
      '是否确认删除生效日期为"' +
      row.beginDate +
      "到" +
      row.endDate +
      '"的数据项？'
    )
    .confirm('是否确认删除生效日期为"' + row.beginDate + "到" + row.endDate + '"的数据项？')
    .then(function () {
      return delPeakValleyConfiguration(row.id);
      return delPeakValleyConfiguration(row.id)
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => { });
    .catch(() => {})
}
// 模型配置管理-尖峰平谷配置-时段电价配置-新增
function handleExpandChange(row) {
  formChild.value.parentId = row.id;
  formChild.value.beginEndDate = [row.beginDate, row.endDate];
  formChild.value.beginDate = row.beginDate;
  formChild.value.endDate = row.endDate;
  formChild.value.parentId = row.id
  formChild.value.beginEndDate = [row.beginDate, row.endDate]
  formChild.value.beginDate = row.beginDate
  formChild.value.endDate = row.endDate
  listPeakValleyConfigurationChild(
    proxy.addDateRange({
      parentId: row.id,
    })
  ).then((res) => {
    loadingChild.value = false;
    loadingChild.value = false
    formChild.value.data =
      res.rows.length > 0
        ? res.rows
        : [
          {
            parentId: row.id,
            type: null,
            startTime: null,
            stopTime: null,
            effecticityPrice: 0.0,
          },
        ];
  });
  openChild.value = true;
  titleChild.value = "尖峰平谷时段电价配置";
            {
              parentId: row.id,
              type: null,
              startTime: null,
              stopTime: null,
              effecticityPrice: 0.0,
            },
          ]
  })
  openChild.value = true
  titleChild.value = "尖峰平谷时段电价配置"
}
function handleAddChildChild() {
  console.log(formChild.value);
  console.log(formChild.value)
  formChild.value.data.push({
    parentId: formChild.value.parentId,
    type: null,
    startTime: null,
    stopTime: null,
    effecticityPrice: 0.0,
  });
  openChild.value = true;
  titleChild.value = "尖峰平谷时段电价配置";
  })
  openChild.value = true
  titleChild.value = "尖峰平谷时段电价配置"
}
function handleDeleteChildChild(item, index) {
  formChild.value.data.splice(index, 1);
  formChild.value.data.splice(index, 1)
}
// 模型配置管理-尖峰平谷配置-时段电价配置-新增/编辑-保存
function submitFormChild() {
  proxy.$refs["formChildRef"].validate((valid) => {
    if (valid) {
      updatePeakValleyConfigurationChild(formChild.value.data).then(
        (response) => {
          proxy.$modal.msgSuccess("修改成功");
          openChild.value = false;
          getList();
        }
      );
      updatePeakValleyConfigurationChild(formChild.value.data).then((response) => {
        proxy.$modal.msgSuccess("修改成功")
        openChild.value = false
        getList()
      })
    }
  });
  })
}
// 模型配置管理-尖峰平谷配置-新增/编辑-取消
function cancelChild() {
  openChild.value = false;
  proxy.$refs.formChildRef.resetFields();
  openChild.value = false
  proxy.$refs.formChildRef.resetFields()
}
</script>
<style scoped lang="scss">

 zhitan-vue/src/views/monitor/job/index.vue

@@ -1,308 +1,310 @@
<template>
   <div class="app-container">
  <div class="app-container page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
         <el-form-item label="任务名称" prop="jobName">
            <el-input
               v-model="queryParams.jobName"
               placeholder="请输入任务名称"
               clearable
               style="width: 200px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="任务组名" prop="jobGroup">
            <el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable style="width: 200px">
               <el-option
        <el-form-item label="任务名称" prop="jobName">
          <el-input
            v-model="queryParams.jobName"
            placeholder="请输入任务名称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="任务组名" prop="jobGroup">
          <el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable style="width: 200px">
            <el-option v-for="dict in sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable style="width: 200px">
            <el-option v-for="dict in sys_job_status" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-bg-style">
      <div class="table-box">
        <div style="margin-bottom: 12px">
          <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['monitor:job:add']"
            >新增</el-button
          >
          <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['monitor:job:edit']"
            >修改</el-button
          >
          <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['monitor:job:remove']"
            >删除</el-button
          >
          <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['monitor:job:export']"
            >导出</el-button
          >
          <el-button type="info" plain icon="Operation" @click="handleJobLog" v-hasPermi="['monitor:job:query']"
            >日志</el-button
          >
        </div>
        <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="任务编号" width="100" align="center" prop="jobId" />
          <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
          <el-table-column label="任务组名" align="center" prop="jobGroup">
            <template #default="scope">
              <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" />
            </template>
          </el-table-column>
          <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
          <el-table-column label="cron执行表达式" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
          <el-table-column label="状态" align="center">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="0"
                inactive-value="1"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="修改" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="Edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['monitor:job:edit']"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="Delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['monitor:job:remove']"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="执行一次" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="CaretRight"
                  @click="handleRun(scope.row)"
                  v-hasPermi="['monitor:job:changeStatus']"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="任务详细" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="View"
                  @click="handleView(scope.row)"
                  v-hasPermi="['monitor:job:query']"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="调度日志" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="Operation"
                  @click="handleJobLog(scope.row)"
                  v-hasPermi="['monitor:job:query']"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <!-- 添加或修改定时任务对话框 -->
    <el-dialog :title="title" v-model="open" width="820px" append-to-body>
      <el-form ref="jobRef" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务名称" prop="jobName">
              <el-input v-model="form.jobName" placeholder="请输入任务名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务分组" prop="jobGroup">
              <el-select v-model="form.jobGroup" placeholder="请选择">
                <el-option
                  v-for="dict in sys_job_group"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item label="任务状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable style="width: 200px">
               <el-option
                  v-for="dict in sys_job_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="invokeTarget">
              <template #label>
                <span>
                  调用方法
                  <el-tooltip placement="top">
                    <template #content>
                      <div>
                        Bean调用示例：ryTask.ryParams('ry')
                        <br />Class类调用示例：com.ruoyi.quartz.task.RyTask.ryParams('ry')
                        <br />参数说明：支持字符串，布尔类型，长整型，浮点型，整型
                      </div>
                    </template>
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                </span>
              </template>
              <el-input v-model="form.invokeTarget" placeholder="请输入调用目标字符串" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="cron表达式" prop="cronExpression">
              <el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式">
                <template #append>
                  <el-button type="primary" @click="handleShowCron">
                    生成表达式
                    <i class="el-icon-time el-icon--right"></i>
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.jobId !== undefined">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in sys_job_status" :key="dict.value" :label="dict.value">{{
                  dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行策略" prop="misfirePolicy">
              <el-radio-group v-model="form.misfirePolicy">
                <el-radio-button label="1">立即执行</el-radio-button>
                <el-radio-button label="2">执行一次</el-radio-button>
                <el-radio-button label="3">放弃执行</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否并发" prop="concurrent">
              <el-radio-group v-model="form.concurrent">
                <el-radio-button label="0">允许</el-radio-button>
                <el-radio-button label="1">禁止</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
               v-hasPermi="['monitor:job:add']"
            >新增</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="success"
               plain
               icon="Edit"
               :disabled="single"
               @click="handleUpdate"
               v-hasPermi="['monitor:job:edit']"
            >修改</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['monitor:job:remove']"
            >删除</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="warning"
               plain
               icon="Download"
               @click="handleExport"
               v-hasPermi="['monitor:job:export']"
            >导出</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="info"
               plain
               icon="Operation"
               @click="handleJobLog"
               v-hasPermi="['monitor:job:query']"
            >日志</el-button>
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
    <el-dialog title="Cron表达式生成器" v-model="openCron" append-to-body destroy-on-close>
      <crontab ref="crontabRef" @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab>
    </el-dialog>

      <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="任务编号" width="100" align="center" prop="jobId" />
         <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
         <el-table-column label="任务组名" align="center" prop="jobGroup">
            <template #default="scope">
               <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" />
            </template>
         </el-table-column>
         <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
         <el-table-column label="cron执行表达式" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
         <el-table-column label="状态" align="center">
            <template #default="scope">
               <el-switch
                  v-model="scope.row.status"
                  active-value="0"
                  inactive-value="1"
                  @change="handleStatusChange(scope.row)"
               ></el-switch>
            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-tooltip content="修改" placement="top">
                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']"></el-button>
               </el-tooltip>
               <el-tooltip content="删除" placement="top">
                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']"></el-button>
               </el-tooltip>
               <el-tooltip content="执行一次" placement="top">
                  <el-button link type="primary" icon="CaretRight" @click="handleRun(scope.row)" v-hasPermi="['monitor:job:changeStatus']"></el-button>
               </el-tooltip>
               <el-tooltip content="任务详细" placement="top">
                  <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
               </el-tooltip>
               <el-tooltip content="调度日志" placement="top">
                  <el-button link type="primary" icon="Operation" @click="handleJobLog(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
               </el-tooltip>
            </template>
         </el-table-column>
      </el-table>

      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
      />

      <!-- 添加或修改定时任务对话框 -->
      <el-dialog :title="title" v-model="open" width="820px" append-to-body>
         <el-form ref="jobRef" :model="form" :rules="rules" label-width="120px">
            <el-row>
               <el-col :span="12">
                  <el-form-item label="任务名称" prop="jobName">
                     <el-input v-model="form.jobName" placeholder="请输入任务名称" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="任务分组" prop="jobGroup">
                     <el-select v-model="form.jobGroup" placeholder="请选择">
                        <el-option
                           v-for="dict in sys_job_group"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value"
                        ></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item prop="invokeTarget">
                     <template #label>
                        <span>
                           调用方法
                           <el-tooltip placement="top">
                              <template #content>
                                 <div>
                                    Bean调用示例：ryTask.ryParams('ry')
                                    <br />Class类调用示例：com.ruoyi.quartz.task.RyTask.ryParams('ry')
                                    <br />参数说明：支持字符串，布尔类型，长整型，浮点型，整型
                                 </div>
                              </template>
                              <el-icon><question-filled /></el-icon>
                           </el-tooltip>
                        </span>
                     </template>
                     <el-input v-model="form.invokeTarget" placeholder="请输入调用目标字符串" />
                  </el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="cron表达式" prop="cronExpression">
                     <el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式">
                        <template #append>
                           <el-button type="primary" @click="handleShowCron">
                              生成表达式
                              <i class="el-icon-time el-icon--right"></i>
                           </el-button>
                        </template>
                     </el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="24" v-if="form.jobId !== undefined">
                  <el-form-item label="状态">
                     <el-radio-group v-model="form.status">
                        <el-radio
                           v-for="dict in sys_job_status"
                           :key="dict.value"
                           :label="dict.value"
                        >{{ dict.label }}</el-radio>
                     </el-radio-group>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="执行策略" prop="misfirePolicy">
                     <el-radio-group v-model="form.misfirePolicy">
                        <el-radio-button label="1">立即执行</el-radio-button>
                        <el-radio-button label="2">执行一次</el-radio-button>
                        <el-radio-button label="3">放弃执行</el-radio-button>
                     </el-radio-group>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="是否并发" prop="concurrent">
                     <el-radio-group v-model="form.concurrent">
                        <el-radio-button label="0">允许</el-radio-button>
                        <el-radio-button label="1">禁止</el-radio-button>
                     </el-radio-group>
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>

     <el-dialog title="Cron表达式生成器" v-model="openCron" append-to-body destroy-on-close>
       <crontab ref="crontabRef" @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>
     </el-dialog>

      <!-- 任务日志详细 -->
      <el-dialog title="任务详细" v-model="openView" width="700px" append-to-body>
         <el-form :model="form" label-width="120px">
            <el-row>
               <el-col :span="12">
                  <el-form-item label="任务编号：">{{ form.jobId }}</el-form-item>
                  <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="任务分组：">{{ jobGroupFormat(form) }}</el-form-item>
                  <el-form-item label="创建时间：">{{ form.createTime }}</el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="cron表达式：">{{ form.cronExpression }}</el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="下次执行时间：">{{ parseTime(form.nextValidTime) }}</el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="调用目标方法：">{{ form.invokeTarget }}</el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="任务状态：">
                     <div v-if="form.status == 0">正常</div>
                     <div v-else-if="form.status == 1">暂停</div>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="是否并发：">
                     <div v-if="form.concurrent == 0">允许</div>
                     <div v-else-if="form.concurrent == 1">禁止</div>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="执行策略：">
                     <div v-if="form.misfirePolicy == 0">默认策略</div>
                     <div v-else-if="form.misfirePolicy == 1">立即执行</div>
                     <div v-else-if="form.misfirePolicy == 2">执行一次</div>
                     <div v-else-if="form.misfirePolicy == 3">放弃执行</div>
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="openView = false">关 闭</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
    <!-- 任务日志详细 -->
    <el-dialog title="任务详细" v-model="openView" width="700px" append-to-body>
      <el-form :model="form" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务编号：">{{ form.jobId }}</el-form-item>
            <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务分组：">{{ jobGroupFormat(form) }}</el-form-item>
            <el-form-item label="创建时间：">{{ form.createTime }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="cron表达式：">{{ form.cronExpression }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下次执行时间：">{{ parseTime(form.nextValidTime) }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="调用目标方法：">{{ form.invokeTarget }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务状态：">
              <div v-if="form.status == 0">正常</div>
              <div v-else-if="form.status == 1">暂停</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否并发：">
              <div v-if="form.concurrent == 0">允许</div>
              <div v-else-if="form.concurrent == 1">禁止</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行策略：">
              <div v-if="form.misfirePolicy == 0">默认策略</div>
              <div v-else-if="form.misfirePolicy == 1">立即执行</div>
              <div v-else-if="form.misfirePolicy == 2">执行一次</div>
              <div v-else-if="form.misfirePolicy == 3">放弃执行</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="openView = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Job">
import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job";
import Crontab from '@/components/Crontab'
const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_job_group, sys_job_status } = proxy.useDict("sys_job_group", "sys_job_status");
import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job"
import Crontab from "@/components/Crontab"
const router = useRouter()
const { proxy } = getCurrentInstance()
const { sys_job_group, sys_job_status } = proxy.useDict("sys_job_group", "sys_job_status")

const jobList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const openView = ref(false);
const openCron = ref(false);
const expression = ref("");
const jobList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const openView = ref(false)
const openCron = ref(false)
const expression = ref("")

const data = reactive({
  form: {},
@@ -311,34 +313,34 @@
    pageSize: 10,
    jobName: undefined,
    jobGroup: undefined,
    status: undefined
    status: undefined,
  },
  rules: {
    jobName: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
    invokeTarget: [{ required: true, message: "调用目标字符串不能为空", trigger: "blur" }],
    cronExpression: [{ required: true, message: "cron执行表达式不能为空", trigger: "change" }]
  }
});
    cronExpression: [{ required: true, message: "cron执行表达式不能为空", trigger: "change" }],
  },
})

const { queryParams, form, rules } = toRefs(data);
const { queryParams, form, rules } = toRefs(data)

/** 查询定时任务列表 */
function getList() {
  loading.value = true;
  listJob(queryParams.value).then(response => {
    jobList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
  loading.value = true
  listJob(queryParams.value).then((response) => {
    jobList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}
/** 任务组名字典翻译 */
function jobGroupFormat(row, column) {
  return proxy.selectDictLabel(sys_job_group.value, row.jobGroup);
  return proxy.selectDictLabel(sys_job_group.value, row.jobGroup)
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
  open.value = false
  reset()
}
/** 表单重置 */
function reset() {
@@ -350,134 +352,154 @@
    cronExpression: undefined,
    misfirePolicy: 1,
    concurrent: 1,
    status: "0"
  };
  proxy.resetForm("jobRef");
    status: "0",
  }
  proxy.resetForm("jobRef")
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
  proxy.resetForm("queryRef")
  handleQuery()
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.jobId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
  ids.value = selection.map((item) => item.jobId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}
// 更多操作触发
function handleCommand(command, row) {
  switch (command) {
    case "handleRun":
      handleRun(row);
      break;
      handleRun(row)
      break
    case "handleView":
      handleView(row);
      break;
      handleView(row)
      break
    case "handleJobLog":
      handleJobLog(row);
      break;
      handleJobLog(row)
      break
    default:
      break;
      break
  }
}
// 任务状态修改
function handleStatusChange(row) {
  let text = row.status === "0" ? "启用" : "停用";
  proxy.$modal.confirm('确认要"' + text + '""' + row.jobName + '"任务吗?').then(function () {
    return changeJobStatus(row.jobId, row.status);
  }).then(() => {
    proxy.$modal.msgSuccess(text + "成功");
  }).catch(function () {
    row.status = row.status === "0" ? "1" : "0";
  });
  let text = row.status === "0" ? "启用" : "停用"
  proxy.$modal
    .confirm('确认要"' + text + '""' + row.jobName + '"任务吗?')
    .then(function () {
      return changeJobStatus(row.jobId, row.status)
    })
    .then(() => {
      proxy.$modal.msgSuccess(text + "成功")
    })
    .catch(function () {
      row.status = row.status === "0" ? "1" : "0"
    })
}
/* 立即执行一次 */
function handleRun(row) {
  proxy.$modal.confirm('确认要立即执行一次"' + row.jobName + '"任务吗?').then(function () {
    return runJob(row.jobId, row.jobGroup);
  }).then(() => {
    proxy.$modal.msgSuccess("执行成功");})
  .catch(() => {});
  proxy.$modal
    .confirm('确认要立即执行一次"' + row.jobName + '"任务吗?')
    .then(function () {
      return runJob(row.jobId, row.jobGroup)
    })
    .then(() => {
      proxy.$modal.msgSuccess("执行成功")
    })
    .catch(() => {})
}
/** 任务详细信息 */
function handleView(row) {
  getJob(row.jobId).then(response => {
    form.value = response.data;
    openView.value = true;
  });
  getJob(row.jobId).then((response) => {
    form.value = response.data
    openView.value = true
  })
}
/** cron表达式按钮操作 */
function handleShowCron() {
  expression.value = form.value.cronExpression;
  openCron.value = true;
  expression.value = form.value.cronExpression
  openCron.value = true
}
/** 确定后回传值 */
function crontabFill(value) {
  form.value.cronExpression = value;
  form.value.cronExpression = value
}
/** 任务日志列表查询 */
function handleJobLog(row) {
  const jobId = row.jobId || 0;
  router.push('/monitor/job-log/index/' + jobId)
  const jobId = row.jobId || 0
  router.push("/monitor/job-log/index/" + jobId)
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加任务";
  reset()
  open.value = true
  title.value = "添加任务"
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const jobId = row.jobId || ids.value;
  getJob(jobId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改任务";
  });
  reset()
  const jobId = row.jobId || ids.value
  getJob(jobId).then((response) => {
    form.value = response.data
    open.value = true
    title.value = "修改任务"
  })
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["jobRef"].validate(valid => {
  proxy.$refs["jobRef"].validate((valid) => {
    if (valid) {
      if (form.value.jobId != undefined) {
        updateJob(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
        updateJob(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addJob(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
        addJob(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  });
  })
}
/** 删除按钮操作 */
function handleDelete(row) {
  const jobIds = row.jobId || ids.value;
  proxy.$modal.confirm('是否确认删除定时任务编号为"' + jobIds + '"的数据项?').then(function () {
    return delJob(jobIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
  const jobIds = row.jobId || ids.value
  proxy.$modal
    .confirm('是否确认删除定时任务编号为"' + jobIds + '"的数据项?')
    .then(function () {
      return delJob(jobIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download("monitor/job/export", {
    ...queryParams.value,
  }, `job_${new Date().getTime()}.xlsx`);
  proxy.download(
    "monitor/job/export",
    {
      ...queryParams.value,
    },
    `job_${new Date().getTime()}.xlsx`
  )
}

getList();
getList()
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>

 zhitan-vue/src/views/monitor/logininfor/index.vue

@@ -1,145 +1,161 @@
<template>
   <div class="app-container">
  <div class="app-container page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
         <el-form-item label="登录地址" prop="ipaddr">
            <el-input
               v-model="queryParams.ipaddr"
               placeholder="请输入登录地址"
               clearable
               style="width: 240px;"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="用户名称" prop="userName">
            <el-input
               v-model="queryParams.userName"
               placeholder="请输入用户名称"
               clearable
               style="width: 240px;"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="状态" prop="status">
            <el-select
               v-model="queryParams.status"
               placeholder="登录状态"
               clearable
               style="width: 240px"
            >
               <el-option
                  v-for="dict in sys_common_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item label="登录时间" style="width: 308px">
            <el-date-picker
               v-model="dateRange"
               value-format="YYYY-MM-DD HH:mm:ss"
               type="daterange"
               range-separator="-"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
               :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
            ></el-date-picker>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
        <el-form-item label="登录地址" prop="ipaddr">
          <el-input
            v-model="queryParams.ipaddr"
            placeholder="请输入登录地址"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="用户名称" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入用户名称"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="登录状态" clearable style="width: 240px">
            <el-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="登录时间" style="width: 308px">
          <el-date-picker
            v-model="dateRange"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
    <div class="table-bg-style">
      <div class="table-box" style="margin-top: 0">
        <el-row :gutter="10" class="mb8" style="margin-top: 8px">
          <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['monitor:logininfor:remove']"
            >删除</el-button>
         </el-col>
         <el-col :span="1.5">
              type="danger"
              plain
              icon="Delete"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['monitor:logininfor:remove']"
              >删除</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']"
              >清空</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               @click="handleClean"
               v-hasPermi="['monitor:logininfor:remove']"
            >清空</el-button>
         </el-col>
         <el-col :span="1.5">
              type="primary"
              plain
              icon="Unlock"
              :disabled="single"
              @click="handleUnlock"
              v-hasPermi="['monitor:logininfor:unlock']"
              >解锁</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Unlock"
               :disabled="single"
               @click="handleUnlock"
               v-hasPermi="['monitor:logininfor:unlock']"
            >解锁</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="warning"
               plain
               icon="Download"
               @click="handleExport"
               v-hasPermi="['monitor:logininfor:export']"
            >导出</el-button>
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
              type="warning"
              plain
              icon="Download"
              @click="handleExport"
              v-hasPermi="['monitor:logininfor:export']"
              >导出</el-button
            >
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

      <el-table ref="logininforRef" v-loading="loading" :data="logininforList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="访问编号" align="center" prop="infoId" />
         <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
         <el-table-column label="地址" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
         <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
         <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
         <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
         <el-table-column label="登录状态" align="center" prop="status">
        <el-table
          ref="logininforRef"
          v-loading="loading"
          :data="logininforList"
          @selection-change="handleSelectionChange"
          :default-sort="defaultSort"
          @sort-change="handleSortChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="访问编号" align="center" prop="infoId" />
          <el-table-column
            label="用户名称"
            align="center"
            prop="userName"
            :show-overflow-tooltip="true"
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
          />
          <el-table-column label="地址" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
          <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
          <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
          <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
          <el-table-column label="登录状态" align="center" prop="status">
            <template #default="scope">
               <dict-tag :options="sys_common_status" :value="scope.row.status" />
              <dict-tag :options="sys_common_status" :value="scope.row.status" />
            </template>
         </el-table-column>
         <el-table-column label="描述" align="center" prop="msg" :show-overflow-tooltip="true" />
         <el-table-column label="访问时间" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
          </el-table-column>
          <el-table-column label="描述" align="center" prop="msg" :show-overflow-tooltip="true" />
          <el-table-column
            label="访问时间"
            align="center"
            prop="loginTime"
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
            width="180"
          >
            <template #default="scope">
               <span>{{ parseTime(scope.row.loginTime) }}</span>
              <span>{{ parseTime(scope.row.loginTime) }}</span>
            </template>
         </el-table-column>
      </el-table>
          </el-table-column>
        </el-table>

      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
      />
   </div>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script setup name="Logininfor">
import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor";
import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor"

const { proxy } = getCurrentInstance();
const { sys_common_status } = proxy.useDict("sys_common_status");
const { proxy } = getCurrentInstance()
const { sys_common_status } = proxy.useDict("sys_common_status")

const logininforList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const selectName = ref("");
const total = ref(0);
const dateRange = ref([]);
const defaultSort = ref({ prop: "loginTime", order: "descending" });
const logininforList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const selectName = ref("")
const total = ref(0)
const dateRange = ref([])
const defaultSort = ref({ prop: "loginTime", order: "descending" })

// 查询参数
const queryParams = ref({
@@ -149,77 +165,97 @@
  userName: undefined,
  status: undefined,
  orderByColumn: undefined,
  isAsc: undefined
});
  isAsc: undefined,
})

/** 查询登录日志列表 */
function getList() {
  loading.value = true;
  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    logininforList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
  loading.value = true
  list(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
    logininforList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  queryParams.value.pageNum = 1;
  proxy.$refs["logininforRef"].sort(defaultSort.value.prop, defaultSort.value.order);
  dateRange.value = []
  proxy.resetForm("queryRef")
  queryParams.value.pageNum = 1
  proxy.$refs["logininforRef"].sort(defaultSort.value.prop, defaultSort.value.order)
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.infoId);
  multiple.value = !selection.length;
  single.value = selection.length != 1;
  selectName.value = selection.map(item => item.userName);
  ids.value = selection.map((item) => item.infoId)
  multiple.value = !selection.length
  single.value = selection.length != 1
  selectName.value = selection.map((item) => item.userName)
}
/** 排序触发事件 */
function handleSortChange(column, prop, order) {
  queryParams.value.orderByColumn = column.prop;
  queryParams.value.isAsc = column.order;
  getList();
  queryParams.value.orderByColumn = column.prop
  queryParams.value.isAsc = column.order
  getList()
}
/** 删除按钮操作 */
function handleDelete(row) {
  const infoIds = row.infoId || ids.value;
  proxy.$modal.confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?').then(function () {
    return delLogininfor(infoIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
  const infoIds = row.infoId || ids.value
  proxy.$modal
    .confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?')
    .then(function () {
      return delLogininfor(infoIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}
/** 清空按钮操作 */
function handleClean() {
  proxy.$modal.confirm("是否确认清空所有登录日志数据项?").then(function () {
    return cleanLogininfor();
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("清空成功");
  }).catch(() => {});
  proxy.$modal
    .confirm("是否确认清空所有登录日志数据项?")
    .then(function () {
      return cleanLogininfor()
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("清空成功")
    })
    .catch(() => {})
}
/** 解锁按钮操作 */
function handleUnlock() {
  const username = selectName.value;
  proxy.$modal.confirm('是否确认解锁用户"' + username + '"数据项?').then(function () {
    return unlockLogininfor(username);
  }).then(() => {
    proxy.$modal.msgSuccess("用户" + username + "解锁成功");
  }).catch(() => {});
  const username = selectName.value
  proxy.$modal
    .confirm('是否确认解锁用户"' + username + '"数据项?')
    .then(function () {
      return unlockLogininfor(username)
    })
    .then(() => {
      proxy.$modal.msgSuccess("用户" + username + "解锁成功")
    })
    .catch(() => {})
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download("monitor/logininfor/export", {
    ...queryParams.value,
  }, `config_${new Date().getTime()}.xlsx`);
  proxy.download(
    "monitor/logininfor/export",
    {
      ...queryParams.value,
    },
    `config_${new Date().getTime()}.xlsx`
  )
}

getList();
getList()
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>

 zhitan-vue/src/views/monitor/online/index.vue

@@ -1,106 +1,126 @@
<template>
   <div class="app-container">
  <div class="app-container page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true">
         <el-form-item label="登录地址" prop="ipaddr">
            <el-input
               v-model="queryParams.ipaddr"
               placeholder="请输入登录地址"
               clearable
               style="width: 200px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="用户名称" prop="userName">
            <el-input
               v-model="queryParams.userName"
               placeholder="请输入用户名称"
               clearable
               style="width: 200px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
        <el-form-item label="登录地址" prop="ipaddr">
          <el-input
            v-model="queryParams.ipaddr"
            placeholder="请输入登录地址"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="用户名称" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入用户名称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
         v-loading="loading"
         :data="onlineList.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
         style="width: 100%;"
      >
         <el-table-column label="序号" width="50" type="index" align="center">
            <template #default="scope">
               <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
         </el-table-column>
         <el-table-column label="会话编号" align="center" prop="tokenId" :show-overflow-tooltip="true" />
         <el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
         <el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
         <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
         <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
         <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
         <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
         <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
            <template #default="scope">
               <span>{{ parseTime(scope.row.loginTime) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="Delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">强退</el-button>
            </template>
         </el-table-column>
      </el-table>
    </div>

      <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
   </div>
    <div class="table-bg-style">
      <div class="table-box">
        <el-table
          v-loading="loading"
          :data="onlineList.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
          style="width: 100%"
        >
          <el-table-column label="序号" width="60" type="index" align="center">
            <template #default="scope">
              <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="会话编号" align="center" prop="tokenId" :show-overflow-tooltip="true" />
          <el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
          <el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
          <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
          <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
          <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
          <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
          <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
            <template #default="scope">
              <span>{{ parseTime(scope.row.loginTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                link
                type="primary"
                icon="Delete"
                @click="handleForceLogout(scope.row)"
                v-hasPermi="['monitor:online:forceLogout']"
                >强退</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" />
      </div>
    </div>
  </div>
</template>

<script setup name="Online">
import { forceLogout, list as initData } from "@/api/monitor/online";
import { forceLogout, list as initData } from "@/api/monitor/online"

const { proxy } = getCurrentInstance();
const { proxy } = getCurrentInstance()

const onlineList = ref([]);
const loading = ref(true);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const onlineList = ref([])
const loading = ref(true)
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)

const queryParams = ref({
  ipaddr: undefined,
  userName: undefined
});
  userName: undefined,
})

/** 查询登录日志列表 */
function getList() {
  loading.value = true;
  initData(queryParams.value).then(response => {
    onlineList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
  loading.value = true
  initData(queryParams.value).then((response) => {
    onlineList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}
/** 搜索按钮操作 */
function handleQuery() {
  pageNum.value = 1;
  getList();
  pageNum.value = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
  proxy.resetForm("queryRef")
  handleQuery()
}
/** 强退按钮操作 */
function handleForceLogout(row) {
    proxy.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户?').then(function () {
  return forceLogout(row.tokenId);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
  proxy.$modal
    .confirm('是否确认强退名称为"' + row.userName + '"的用户?')
    .then(function () {
      return forceLogout(row.tokenId)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}

getList();
getList()
</script>
<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>

 zhitan-vue/src/views/monitor/operlog/index.vue

@@ -1,219 +1,240 @@
<template>
   <div class="app-container">
  <div class="app-container page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
         <el-form-item label="操作地址" prop="operIp">
            <el-input
               v-model="queryParams.operIp"
               placeholder="请输入操作地址"
               clearable
               style="width: 240px;"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="系统模块" prop="title">
            <el-input
               v-model="queryParams.title"
               placeholder="请输入系统模块"
               clearable
               style="width: 240px;"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="操作人员" prop="operName">
            <el-input
               v-model="queryParams.operName"
               placeholder="请输入操作人员"
               clearable
               style="width: 240px;"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="类型" prop="businessType">
            <el-select
               v-model="queryParams.businessType"
               placeholder="操作类型"
               clearable
               style="width: 240px"
            >
               <el-option
                  v-for="dict in sys_oper_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item label="状态" prop="status">
            <el-select
               v-model="queryParams.status"
               placeholder="操作状态"
               clearable
               style="width: 240px"
            >
               <el-option
                  v-for="dict in sys_common_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item label="操作时间" style="width: 308px">
            <el-date-picker
               v-model="dateRange"
               value-format="YYYY-MM-DD HH:mm:ss"
               type="daterange"
               range-separator="-"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
               :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
            ></el-date-picker>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
        <el-form-item label="操作地址" prop="operIp">
          <el-input
            v-model="queryParams.operIp"
            placeholder="请输入操作地址"
            clearable
            style="width: 100%"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="系统模块" prop="title">
          <el-input
            v-model="queryParams.title"
            placeholder="请输入系统模块"
            clearable
            style="width: 100%"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="操作人员" prop="operName">
          <el-input
            v-model="queryParams.operName"
            placeholder="请输入操作人员"
            clearable
            style="width: 100%"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="类型" prop="businessType">
          <el-select v-model="queryParams.businessType" placeholder="操作类型" clearable style="width: 100%">
            <el-option v-for="dict in sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="操作状态" clearable style="width: 100%">
            <el-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="操作时间" style="width: 320px">
          <el-date-picker
            v-model="dateRange"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
    <div class="table-bg-style">
      <div class="table-box" style="margin-top: 0">
        <el-row :gutter="10" class="mb8" style="margin-top: 8px">
          <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['monitor:operlog:remove']"
            >删除</el-button>
         </el-col>
         <el-col :span="1.5">
              type="danger"
              plain
              icon="Delete"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['monitor:operlog:remove']"
              >删除</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" @click="handleClean" v-hasPermi="['monitor:operlog:remove']"
              >清空</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               @click="handleClean"
               v-hasPermi="['monitor:operlog:remove']"
            >清空</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="warning"
               plain
               icon="Download"
               @click="handleExport"
               v-hasPermi="['monitor:operlog:export']"
            >导出</el-button>
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
              type="warning"
              plain
              icon="Download"
              @click="handleExport"
              v-hasPermi="['monitor:operlog:export']"
              >导出</el-button
            >
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

      <el-table ref="operlogRef" v-loading="loading" :data="operlogList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
         <el-table-column type="selection" width="50" align="center" />
         <el-table-column label="日志编号" align="center" prop="operId" />
         <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
         <el-table-column label="操作类型" align="center" prop="businessType">
        <el-table
          ref="operlogRef"
          v-loading="loading"
          :data="operlogList"
          @selection-change="handleSelectionChange"
          :default-sort="defaultSort"
          @sort-change="handleSortChange"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="日志编号" align="center" prop="operId" />
          <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
          <el-table-column label="操作类型" align="center" prop="businessType">
            <template #default="scope">
               <dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
              <dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
            </template>
         </el-table-column>
         <el-table-column label="操作人员" align="center" width="110" prop="operName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
         <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
         <el-table-column label="操作状态" align="center" prop="status">
          </el-table-column>
          <el-table-column
            label="操作人员"
            align="center"
            width="110"
            prop="operName"
            :show-overflow-tooltip="true"
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
          />
          <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
          <el-table-column label="操作状态" align="center" prop="status">
            <template #default="scope">
               <dict-tag :options="sys_common_status" :value="scope.row.status" />
              <dict-tag :options="sys_common_status" :value="scope.row.status" />
            </template>
         </el-table-column>
         <el-table-column label="操作日期" align="center" prop="operTime" width="180" sortable="custom" :sort-orders="['descending', 'ascending']">
          </el-table-column>
          <el-table-column
            label="操作日期"
            align="center"
            prop="operTime"
            width="180"
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
          >
            <template #default="scope">
               <span>{{ parseTime(scope.row.operTime) }}</span>
              <span>{{ parseTime(scope.row.operTime) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="消耗时间" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']">
          </el-table-column>
          <el-table-column
            label="消耗时间"
            align="center"
            prop="costTime"
            width="110"
            :show-overflow-tooltip="true"
            sortable="custom"
            :sort-orders="['descending', 'ascending']"
          >
            <template #default="scope">
               <span>{{ scope.row.costTime }}毫秒</span>
              <span>{{ scope.row.costTime }}毫秒</span>
            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="View" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
              <el-button
                link
                type="primary"
                icon="View"
                @click="handleView(scope.row, scope.index)"
                v-hasPermi="['monitor:operlog:query']"
                >详细</el-button
              >
            </template>
         </el-table-column>
      </el-table>
          </el-table-column>
        </el-table>

      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
      />
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

      <!-- 操作日志详细 -->
      <el-dialog title="操作日志详细" v-model="open" width="800px" append-to-body>
         <el-form :model="form" label-width="100px">
            <el-row>
               <el-col :span="12">
                  <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
                  <el-form-item
                    label="登录信息："
                  >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
                  <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
               </el-col>
               <el-col :span="8">
                  <el-form-item label="操作状态：">
                     <div v-if="form.status === 0">正常</div>
                     <div v-else-if="form.status === 1">失败</div>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                  <el-form-item label="消耗时间：">{{ form.costTime }}毫秒</el-form-item>
               </el-col>
               <el-col :span="8">
                  <el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="open = false">关 闭</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
    <!-- 操作日志详细 -->
    <el-dialog title="操作日志详细" v-model="open" width="800px" append-to-body>
      <el-form :model="form" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
            <el-form-item label="登录信息："
              >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
            <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作状态：">
              <div v-if="form.status === 0">正常</div>
              <div v-else-if="form.status === 1">失败</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="消耗时间：">{{ form.costTime }}毫秒</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Operlog">
import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";
import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog"

const { proxy } = getCurrentInstance();
const { sys_oper_type, sys_common_status } = proxy.useDict("sys_oper_type","sys_common_status");
const { proxy } = getCurrentInstance()
const { sys_oper_type, sys_common_status } = proxy.useDict("sys_oper_type", "sys_common_status")

const operlogList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const defaultSort = ref({ prop: "operTime", order: "descending" });
const operlogList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const dateRange = ref([])
const defaultSort = ref({ prop: "operTime", order: "descending" })

const data = reactive({
  form: {},
@@ -224,78 +245,94 @@
    title: undefined,
    operName: undefined,
    businessType: undefined,
    status: undefined
  }
});
    status: undefined,
  },
})

const { queryParams, form } = toRefs(data);
const { queryParams, form } = toRefs(data)

/** 查询登录日志 */
function getList() {
  loading.value = true;
  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    operlogList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
  loading.value = true
  list(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
    operlogList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}
/** 操作日志类型字典翻译 */
function typeFormat(row, column) {
  return proxy.selectDictLabel(sys_oper_type.value, row.businessType);
  return proxy.selectDictLabel(sys_oper_type.value, row.businessType)
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  queryParams.value.pageNum = 1;
  proxy.$refs["operlogRef"].sort(defaultSort.value.prop, defaultSort.value.order);
  dateRange.value = []
  proxy.resetForm("queryRef")
  queryParams.value.pageNum = 1
  proxy.$refs["operlogRef"].sort(defaultSort.value.prop, defaultSort.value.order)
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.operId);
  multiple.value = !selection.length;
  ids.value = selection.map((item) => item.operId)
  multiple.value = !selection.length
}
/** 排序触发事件 */
function handleSortChange(column, prop, order) {
  queryParams.value.orderByColumn = column.prop;
  queryParams.value.isAsc = column.order;
  getList();
  queryParams.value.orderByColumn = column.prop
  queryParams.value.isAsc = column.order
  getList()
}
/** 详细按钮操作 */
function handleView(row) {
  open.value = true;
  form.value = row;
  open.value = true
  form.value = row
}
/** 删除按钮操作 */
function handleDelete(row) {
  const operIds = row.operId || ids.value;
  proxy.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项?').then(function () {
    return delOperlog(operIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
  const operIds = row.operId || ids.value
  proxy.$modal
    .confirm('是否确认删除日志编号为"' + operIds + '"的数据项?')
    .then(function () {
      return delOperlog(operIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}
/** 清空按钮操作 */
function handleClean() {
  proxy.$modal.confirm("是否确认清空所有操作日志数据项?").then(function () {
    return cleanOperlog();
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("清空成功");
  }).catch(() => {});
  proxy.$modal
    .confirm("是否确认清空所有操作日志数据项?")
    .then(function () {
      return cleanOperlog()
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("清空成功")
    })
    .catch(() => {})
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download("monitor/operlog/export",{
    ...queryParams.value,
  }, `config_${new Date().getTime()}.xlsx`);
  proxy.download(
    "monitor/operlog/export",
    {
      ...queryParams.value,
    },
    `config_${new Date().getTime()}.xlsx`
  )
}

getList();
getList()
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>

 zhitan-vue/src/views/policy/knowledgebase/knowledgeBase.vue

@@ -3,26 +3,24 @@
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
        <el-form-item label="标题">
          <el-input v-model="queryParams.title" placeholder="请输入标题" clearable/>
          <el-input v-model="queryParams.title" placeholder="请输入标题" clearable />
        </el-form-item>
        <el-form-item label="能源类型">
              <el-select v-model="queryParams.type" placeholder="请选择能源类型" style="width: 100%" clearable>
                  <el-option v-for="dict in types" :key="dict.value"
                      :label="dict.label" :value="dict.value" />
              </el-select>
          </el-form-item>
          <el-select v-model="queryParams.type" placeholder="请选择能源类型" style="width: 100%" clearable>
            <el-option v-for="dict in types" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-bg-style">
      <div class="theme-dark-mt20 mb20 ml20">
        <el-button type="primary" icon="plus" @click="handleAdd">新增</el-button>
        <!-- <el-button type="primary" icon="Delete">删除</el-button> -->
      </div>
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column prop="title" label="标题" show-overflow-tooltip align="center" />
@@ -46,26 +44,26 @@
        />
      </div>
    </div>
    <edit-modal ref="EditModalRef" @getList="getList"  :types="types" />
    <edit-modal ref="EditModalRef" @getList="getList" :types="types" />
  </div>
</template>

<script setup>
 import EditModal from "./components/EditModal.vue"
import { knowledgeBaseList, knowledgeBaseDel,knowledgeBaseInfo } from "@/api/policy/knowledgeBase"
import EditModal from "./components/EditModal.vue"
import { knowledgeBaseList, knowledgeBaseDel, knowledgeBaseInfo } from "@/api/policy/knowledgeBase"
let { proxy } = getCurrentInstance()
const types = ref([
  { label: "电", value: 0 },
  { label: "水", value: 1 },
  { label: "天然气", value: 2 },
  { label: "蒸汽", value: 3 },
]);
])
let loading = ref(false)
let total = ref(0)
let tableData = ref([])
let queryParams = ref({
  title: "",
  type:null,
  type: null,
  pageNum: 1,
  pageSize: 10,
})
@@ -85,14 +83,13 @@
let EditModalRef = ref("")
function handleAdd(row) {
  if (EditModalRef.value) {
    if(row.id){
    if (row.id) {
      knowledgeBaseInfo(row.id).then((res) => {
        EditModalRef.value.handleOpen(res.data)
      })
    }else{
    } else {
      EditModalRef.value.handleOpen(row)
    }
   
  }
}

@@ -117,7 +114,7 @@
function resetQuery() {
  queryParams.value = {
    title: "",
    type:null,
    type: null,
    pageNum: 1,
    pageSize: 10,
  }

 zhitan-vue/src/views/powerquality/threephase/index.vue

@@ -39,13 +39,7 @@
                  />
                </el-form-item>
                <el-form-item label="选择电表" prop="meterId">
                  <el-select
                    v-model="queryParams.meterId"
                    placeholder="选择电表"
                    clearable
                    style="width: 200px"
                    @change="handleTimeType"
                  >
                  <el-select v-model="queryParams.meterId" placeholder="选择电表" clearable style="width: 200px">
                    <el-option
                      v-for="dict in electricityMeter"
                      :key="dict.value"
@@ -64,7 +58,7 @@
            </div>

            <div style="padding: 0 16px">
              <el-tabs v-model="activeTabKey" type="card">
              <el-tabs v-model="activeTabKey" type="card" @tab-change="handleTabChange" style="margin-top: 12px">
                <el-tab-pane label="电压不平衡" name="1"> </el-tab-pane>
                <el-tab-pane label="电流不平衡" name="2"> </el-tab-pane>
              </el-tabs>
@@ -80,7 +74,7 @@

            <div class="chart-box" v-loading="loading" v-show="activeKey === 1">
              <LineChart ref="LineChartRef" :chartData="lineChartData" />
              <el-table :data="tableData1" v-loading="loading">
              <el-table :data="tableData1" v-loading="loading" style="padding: 14px">
                <el-table-column label="类型" prop="type" align="center" />
                <el-table-column label="三项不平衡极值" prop="value" align="center" />
                <el-table-column label="发生时间" prop="time" align="center" />
@@ -225,6 +219,11 @@
function handleTimeType(e) {
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
  getList()
}

function handleTabChange(e) {
  getList()
}

function switchBtnType(e) {
@@ -235,6 +234,13 @@
}
// 列表
function getList() {
  if (!queryParams.value.meterId) {
    // proxy.$message({
    //   message: "请选择节点",
    //   type: "warning",
    // })
    return
  }
  loading.value = true
  let params = {
    nodeId: queryParams.value.nodeId,

 zhitan-vue/src/views/system/config/index.vue

@@ -1,185 +1,190 @@
<template>
   <div class="app-container">
  <div class="app-container page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
         <el-form-item label="参数名称" prop="configName">
            <el-input
               v-model="queryParams.configName"
               placeholder="请输入参数名称"
               clearable
               style="width: 240px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="参数键名" prop="configKey">
            <el-input
               v-model="queryParams.configKey"
               placeholder="请输入参数键名"
               clearable
               style="width: 240px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="系统内置" prop="configType">
            <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
               <el-option
                  v-for="dict in sys_yes_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item label="创建时间" style="width: 340px;">
            <el-date-picker
               v-model="dateRange"
               value-format="YYYY-MM-DD"
               type="daterange"
               range-separator="-"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
            ></el-date-picker>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
        <el-form-item label="参数名称" prop="configName">
          <el-input
            v-model="queryParams.configName"
            placeholder="请输入参数名称"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="参数键名" prop="configKey">
          <el-input
            v-model="queryParams.configKey"
            placeholder="请输入参数键名"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="系统内置" prop="configType">
          <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
            <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" style="width: 340px">
          <el-date-picker
            v-model="dateRange"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
    <div class="table-bg-style">
      <div class="table-box" style="margin-top: 0">
        <el-row :gutter="10" class="mb8" style="margin-top: 8px">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:config:add']"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
               v-hasPermi="['system:config:add']"
            >新增</el-button>
         </el-col>
         <el-col :span="1.5">
              type="success"
              plain
              icon="Edit"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['system:config:edit']"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
               type="success"
               plain
               icon="Edit"
               :disabled="single"
               @click="handleUpdate"
               v-hasPermi="['system:config:edit']"
            >修改</el-button>
         </el-col>
         <el-col :span="1.5">
              type="danger"
              plain
              icon="Delete"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:config:remove']"
              >删除</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:config:export']"
              >导出</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['system:config:remove']"
            >删除</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="warning"
               plain
               icon="Download"
               @click="handleExport"
               v-hasPermi="['system:config:export']"
            >导出</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Refresh"
               @click="handleRefreshCache"
               v-hasPermi="['system:config:remove']"
            >刷新缓存</el-button>
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="参数主键" align="center" prop="configId" />
         <el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
         <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
         <el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
         <el-table-column label="系统内置" align="center" prop="configType">
              type="danger"
              plain
              icon="Refresh"
              @click="handleRefreshCache"
              v-hasPermi="['system:config:remove']"
              >刷新缓存</el-button
            >
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="参数主键" align="center" prop="configId" />
          <el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
          <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
          <el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
          <el-table-column label="系统内置" align="center" prop="configType">
            <template #default="scope">
               <dict-tag :options="sys_yes_no" :value="scope.row.configType" />
              <dict-tag :options="sys_yes_no" :value="scope.row.configType" />
            </template>
         </el-table-column>
         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
            <template #default="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
          </el-table-column>
          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']" >修改</el-button>
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">删除</el-button>
              <el-button
                link
                type="primary"
                icon="Edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:config:edit']"
                >修改</el-button
              >
              <el-button
                link
                type="primary"
                icon="Delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:config:remove']"
                >删除</el-button
              >
            </template>
         </el-table-column>
      </el-table>
          </el-table-column>
        </el-table>

      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
      />
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
         <el-form ref="configRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="参数名称" prop="configName">
               <el-input v-model="form.configName" placeholder="请输入参数名称" />
            </el-form-item>
            <el-form-item label="参数键名" prop="configKey">
               <el-input v-model="form.configKey" placeholder="请输入参数键名" />
            </el-form-item>
            <el-form-item label="参数键值" prop="configValue">
               <el-input v-model="form.configValue" placeholder="请输入参数键值" />
            </el-form-item>
            <el-form-item label="系统内置" prop="configType">
               <el-radio-group v-model="form.configType">
                  <el-radio
                     v-for="dict in sys_yes_no"
                     :key="dict.value"
                     :label="dict.value"
                  >{{ dict.label }}</el-radio>
               </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="configRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="参数名称" prop="configName">
          <el-input v-model="form.configName" placeholder="请输入参数名称" />
        </el-form-item>
        <el-form-item label="参数键名" prop="configKey">
          <el-input v-model="form.configKey" placeholder="请输入参数键名" />
        </el-form-item>
        <el-form-item label="参数键值" prop="configValue">
          <el-input v-model="form.configValue" placeholder="请输入参数键值" />
        </el-form-item>
        <el-form-item label="系统内置" prop="configType">
          <el-radio-group v-model="form.configType">
            <el-radio v-for="dict in sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Config">
import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config"

const { proxy } = getCurrentInstance();
const { sys_yes_no } = proxy.useDict("sys_yes_no");
const { proxy } = getCurrentInstance()
const { sys_yes_no } = proxy.useDict("sys_yes_no")

const configList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const configList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const dateRange = ref([])

const data = reactive({
  form: {},
@@ -188,30 +193,30 @@
    pageSize: 10,
    configName: undefined,
    configKey: undefined,
    configType: undefined
    configType: undefined,
  },
  rules: {
    configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
    configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
    configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
  }
});
    configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }],
  },
})

const { queryParams, form, rules } = toRefs(data);
const { queryParams, form, rules } = toRefs(data)

/** 查询参数列表 */
function getList() {
  loading.value = true;
  listConfig(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    configList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
  loading.value = true
  listConfig(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
    configList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
  open.value = false
  reset()
}
/** 表单重置 */
function reset() {
@@ -221,85 +226,97 @@
    configKey: undefined,
    configValue: undefined,
    configType: "Y",
    remark: undefined
  };
  proxy.resetForm("configRef");
    remark: undefined,
  }
  proxy.resetForm("configRef")
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
  dateRange.value = []
  proxy.resetForm("queryRef")
  handleQuery()
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.configId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
  ids.value = selection.map((item) => item.configId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加参数";
  reset()
  open.value = true
  title.value = "添加参数"
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const configId = row.configId || ids.value;
  getConfig(configId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改参数";
  });
  reset()
  const configId = row.configId || ids.value
  getConfig(configId).then((response) => {
    form.value = response.data
    open.value = true
    title.value = "修改参数"
  })
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["configRef"].validate(valid => {
  proxy.$refs["configRef"].validate((valid) => {
    if (valid) {
      if (form.value.configId != undefined) {
        updateConfig(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
        updateConfig(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addConfig(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
        addConfig(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  });
  })
}
/** 删除按钮操作 */
function handleDelete(row) {
  const configIds = row.configId || ids.value;
  proxy.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function () {
    return delConfig(configIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
  const configIds = row.configId || ids.value
  proxy.$modal
    .confirm('是否确认删除参数编号为"' + configIds + '"的数据项？')
    .then(function () {
      return delConfig(configIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download("system/config/export", {
    ...queryParams.value
  }, `config_${new Date().getTime()}.xlsx`);
  proxy.download(
    "system/config/export",
    {
      ...queryParams.value,
    },
    `config_${new Date().getTime()}.xlsx`
  )
}
/** 刷新缓存按钮操作 */
function handleRefreshCache() {
  refreshCache().then(() => {
    proxy.$modal.msgSuccess("刷新缓存成功");
  });
    proxy.$modal.msgSuccess("刷新缓存成功")
  })
}

getList();
getList()
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>

 zhitan-vue/src/views/system/dept/index.vue

@@ -1,189 +1,190 @@
<template>
   <div class="app-container">
  <div class="app-container page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
         <el-form-item label="部门名称" prop="deptName">
            <el-input
               v-model="queryParams.deptName"
               placeholder="请输入部门名称"
               clearable
               style="width: 200px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="部门状态" clearable style="width: 200px">
               <el-option
                  v-for="dict in sys_normal_disable"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input
            v-model="queryParams.deptName"
            placeholder="请输入部门名称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="部门状态" clearable style="width: 200px">
            <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dept:add']"
            >新增</el-button
          >
          <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
        </el-form-item>
      </el-form>
    </div>

      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
               v-hasPermi="['system:dept:add']"
            >新增</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="info"
               plain
               icon="Sort"
               @click="toggleExpandAll"
            >展开/折叠</el-button>
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
    <div class="table-bg-style">
      <div class="table-box">
        <el-table
          v-if="refreshTable"
          v-loading="loading"
          :data="deptList"
          row-key="deptId"
          :default-expand-all="isExpandAll"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
          <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="200">
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                link
                type="primary"
                icon="Edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:dept:edit']"
                >修改</el-button
              >
              <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']"
                >新增</el-button
              >
              <el-button
                v-if="scope.row.parentId != 0"
                link
                type="primary"
                icon="Delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:dept:remove']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

      <el-table
         v-if="refreshTable"
         v-loading="loading"
         :data="deptList"
         row-key="deptId"
         :default-expand-all="isExpandAll"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
         <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
         <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
         <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
            </template>
         </el-table-column>
         <el-table-column label="创建时间" align="center" prop="createTime" width="200">
            <template #default="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">修改</el-button>
               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">新增</el-button>
               <el-button v-if="scope.row.parentId != 0" link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除</el-button>
            </template>
         </el-table-column>
      </el-table>

      <!-- 添加或修改部门对话框 -->
      <el-dialog :title="title" v-model="open" width="600px" append-to-body>
         <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
            <el-row>
               <el-col :span="24" v-if="form.parentId !== 0">
                  <el-form-item label="上级部门" prop="parentId">
                     <el-tree-select
                        v-model="form.parentId"
                        :data="deptOptions"
                        :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                        value-key="deptId"
                        placeholder="选择上级部门"
                        check-strictly
                     />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="部门名称" prop="deptName">
                     <el-input v-model="form.deptName" placeholder="请输入部门名称" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="显示排序" prop="orderNum">
                     <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="负责人" prop="leader">
                     <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="联系电话" prop="phone">
                     <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="邮箱" prop="email">
                     <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="部门状态">
                     <el-radio-group v-model="form.status">
                        <el-radio
                           v-for="dict in sys_normal_disable"
                           :key="dict.value"
                           :label="dict.value"
                        >{{ dict.label }}</el-radio>
                     </el-radio-group>
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
    <!-- 添加或修改部门对话框 -->
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24" v-if="form.parentId !== 0">
            <el-form-item label="上级部门" prop="parentId">
              <el-tree-select
                v-model="form.parentId"
                :data="deptOptions"
                :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                value-key="deptId"
                placeholder="选择上级部门"
                check-strictly
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门名称" prop="deptName">
              <el-input v-model="form.deptName" placeholder="请输入部门名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="leader">
              <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门状态">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{
                  dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Dept">
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"

const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict("sys_normal_disable")

const deptList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const title = ref("");
const deptOptions = ref([]);
const isExpandAll = ref(true);
const refreshTable = ref(true);
const deptList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const title = ref("")
const deptOptions = ref([])
const isExpandAll = ref(true)
const refreshTable = ref(true)

const data = reactive({
  form: {},
  queryParams: {
    deptName: undefined,
    status: undefined
    status: undefined,
  },
  rules: {
    parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
    deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
    orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
    phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
    phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
  },
});
})

const { queryParams, form, rules } = toRefs(data);
const { queryParams, form, rules } = toRefs(data)

/** 查询部门列表 */
function getList() {
  loading.value = true;
  listDept(queryParams.value).then(response => {
    deptList.value = proxy.handleTree(response.data, "deptId");
    loading.value = false;
  });
  loading.value = true
  listDept(queryParams.value).then((response) => {
    deptList.value = proxy.handleTree(response.data, "deptId")
    loading.value = false
  })
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
  open.value = false
  reset()
}
/** 表单重置 */
function reset() {
@@ -195,80 +196,88 @@
    leader: undefined,
    phone: undefined,
    email: undefined,
    status: "0"
  };
  proxy.resetForm("deptRef");
    status: "0",
  }
  proxy.resetForm("deptRef")
}
/** 搜索按钮操作 */
function handleQuery() {
  getList();
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
  proxy.resetForm("queryRef")
  handleQuery()
}
/** 新增按钮操作 */
function handleAdd(row) {
  reset();
  listDept().then(response => {
    deptOptions.value = proxy.handleTree(response.data, "deptId");
  });
  reset()
  listDept().then((response) => {
    deptOptions.value = proxy.handleTree(response.data, "deptId")
  })
  if (row != undefined) {
    form.value.parentId = row.deptId;
    form.value.parentId = row.deptId
  }
  open.value = true;
  title.value = "添加部门";
  open.value = true
  title.value = "添加部门"
}
/** 展开/折叠操作 */
function toggleExpandAll() {
  refreshTable.value = false;
  isExpandAll.value = !isExpandAll.value;
  refreshTable.value = false
  isExpandAll.value = !isExpandAll.value
  nextTick(() => {
    refreshTable.value = true;
  });
    refreshTable.value = true
  })
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  listDeptExcludeChild(row.deptId).then(response => {
    deptOptions.value = proxy.handleTree(response.data, "deptId");
  });
  getDept(row.deptId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改部门";
  });
  reset()
  listDeptExcludeChild(row.deptId).then((response) => {
    deptOptions.value = proxy.handleTree(response.data, "deptId")
  })
  getDept(row.deptId).then((response) => {
    form.value = response.data
    open.value = true
    title.value = "修改部门"
  })
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["deptRef"].validate(valid => {
  proxy.$refs["deptRef"].validate((valid) => {
    if (valid) {
      if (form.value.deptId != undefined) {
        updateDept(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
        updateDept(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addDept(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
        addDept(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  });
  })
}
/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() {
    return delDept(row.deptId);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
  proxy.$modal
    .confirm('是否确认删除名称为"' + row.deptName + '"的数据项?')
    .then(function () {
      return delDept(row.deptId)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}

getList();
getList()
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>

 zhitan-vue/src/views/system/dict/index.vue

@@ -1,193 +1,195 @@
<template>
   <div class="app-container">
  <div class="app-container page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
         <el-form-item label="字典名称" prop="dictName">
            <el-input
               v-model="queryParams.dictName"
               placeholder="请输入字典名称"
               clearable
               style="width: 240px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="字典类型" prop="dictType">
            <el-input
               v-model="queryParams.dictType"
               placeholder="请输入字典类型"
               clearable
               style="width: 240px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="状态" prop="status">
            <el-select
               v-model="queryParams.status"
               placeholder="字典状态"
               clearable
               style="width: 240px"
            >
               <el-option
                  v-for="dict in sys_normal_disable"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item label="创建时间" style="width: 308px">
            <el-date-picker
               v-model="dateRange"
               value-format="YYYY-MM-DD"
               type="daterange"
               range-separator="-"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
            ></el-date-picker>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
        <el-form-item label="字典名称" prop="dictName">
          <el-input
            v-model="queryParams.dictName"
            placeholder="请输入字典名称"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="字典类型" prop="dictType">
          <el-input
            v-model="queryParams.dictType"
            placeholder="请输入字典类型"
            clearable
            style="width: 240px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="字典状态" clearable style="width: 240px">
            <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" style="width: 308px">
          <el-date-picker
            v-model="dateRange"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
    <div class="table-bg-style">
      <div class="table-box" style="margin-top: 0">
        <el-row :gutter="10" class="mb8" style="margin-top: 8px">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dict:add']"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
               v-hasPermi="['system:dict:add']"
            >新增</el-button>
         </el-col>
         <el-col :span="1.5">
              type="success"
              plain
              icon="Edit"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['system:dict:edit']"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
               type="success"
               plain
               icon="Edit"
               :disabled="single"
               @click="handleUpdate"
               v-hasPermi="['system:dict:edit']"
            >修改</el-button>
         </el-col>
         <el-col :span="1.5">
              type="danger"
              plain
              icon="Delete"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:dict:remove']"
              >删除</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:dict:export']"
              >导出</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['system:dict:remove']"
            >删除</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="warning"
               plain
               icon="Download"
               @click="handleExport"
               v-hasPermi="['system:dict:export']"
            >导出</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Refresh"
               @click="handleRefreshCache"
               v-hasPermi="['system:dict:remove']"
            >刷新缓存</el-button>
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
              type="danger"
              plain
              icon="Refresh"
              @click="handleRefreshCache"
              v-hasPermi="['system:dict:remove']"
              >刷新缓存</el-button
            >
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="字典编号" align="center" prop="dictId" />
          <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
          <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
            <template #default="scope">
              <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
                <span>{{ scope.row.dictType }}</span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status">
            <template #default="scope">
              <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                link
                type="primary"
                icon="Edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:dict:edit']"
                >修改</el-button
              >
              <el-button
                link
                type="primary"
                icon="Delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:dict:remove']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

      <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="字典编号" align="center" prop="dictId" />
         <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true"/>
         <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
            <template #default="scope">
               <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
                  <span>{{ scope.row.dictType }}</span>
               </router-link>
            </template>
         </el-table-column>
         <el-table-column label="状态" align="center" prop="status">
            <template #default="scope">
               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
            </template>
         </el-table-column>
         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
            <template #default="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
            </template>
         </el-table-column>
      </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
      />

      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
         <el-form ref="dictRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="字典名称" prop="dictName">
               <el-input v-model="form.dictName" placeholder="请输入字典名称" />
            </el-form-item>
            <el-form-item label="字典类型" prop="dictType">
               <el-input v-model="form.dictType" placeholder="请输入字典类型" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
               <el-radio-group v-model="form.status">
                  <el-radio
                     v-for="dict in sys_normal_disable"
                     :key="dict.value"
                     :label="dict.value"
                  >{{ dict.label }}</el-radio>
               </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="dictRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="字典名称" prop="dictName">
          <el-input v-model="form.dictName" placeholder="请输入字典名称" />
        </el-form-item>
        <el-form-item label="字典类型" prop="dictType">
          <el-input v-model="form.dictType" placeholder="请输入字典类型" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{
              dict.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Dict">
import useDictStore from '@/store/modules/dict'
import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
import useDictStore from "@/store/modules/dict"
import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type"

const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict("sys_normal_disable")

const typeList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const typeList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const dateRange = ref([])

const data = reactive({
  form: {},
@@ -196,29 +198,29 @@
    pageSize: 10,
    dictName: undefined,
    dictType: undefined,
    status: undefined
    status: undefined,
  },
  rules: {
    dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
    dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
    dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }],
  },
});
})

const { queryParams, form, rules } = toRefs(data);
const { queryParams, form, rules } = toRefs(data)

/** 查询字典类型列表 */
function getList() {
  loading.value = true;
  listType(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    typeList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
  loading.value = true
  listType(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
    typeList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
  open.value = false
  reset()
}
/** 表单重置 */
function reset() {
@@ -227,86 +229,98 @@
    dictName: undefined,
    dictType: undefined,
    status: "0",
    remark: undefined
  };
  proxy.resetForm("dictRef");
    remark: undefined,
  }
  proxy.resetForm("dictRef")
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
  dateRange.value = []
  proxy.resetForm("queryRef")
  handleQuery()
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加字典类型";
  reset()
  open.value = true
  title.value = "添加字典类型"
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.dictId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
  ids.value = selection.map((item) => item.dictId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const dictId = row.dictId || ids.value;
  getType(dictId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改字典类型";
  });
  reset()
  const dictId = row.dictId || ids.value
  getType(dictId).then((response) => {
    form.value = response.data
    open.value = true
    title.value = "修改字典类型"
  })
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["dictRef"].validate(valid => {
  proxy.$refs["dictRef"].validate((valid) => {
    if (valid) {
      if (form.value.dictId != undefined) {
        updateType(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
        updateType(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addType(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
        addType(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  });
  })
}
/** 删除按钮操作 */
function handleDelete(row) {
  const dictIds = row.dictId || ids.value;
  proxy.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
    return delType(dictIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
  const dictIds = row.dictId || ids.value
  proxy.$modal
    .confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？')
    .then(function () {
      return delType(dictIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download("system/dict/type/export", {
    ...queryParams.value
  }, `dict_${new Date().getTime()}.xlsx`);
  proxy.download(
    "system/dict/type/export",
    {
      ...queryParams.value,
    },
    `dict_${new Date().getTime()}.xlsx`
  )
}
/** 刷新缓存按钮操作 */
function handleRefreshCache() {
  refreshCache().then(() => {
    proxy.$modal.msgSuccess("刷新成功");
    useDictStore().cleanDict();
  });
    proxy.$modal.msgSuccess("刷新成功")
    useDictStore().cleanDict()
  })
}

getList();
getList()
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>

 zhitan-vue/src/views/system/menu/index.vue

@@ -1,334 +1,337 @@
<template>
   <div class="app-container">
  <div class="app-container page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
         <el-form-item label="菜单名称" prop="menuName">
            <el-input
               v-model="queryParams.menuName"
               placeholder="请输入菜单名称"
               clearable
               style="width: 200px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="菜单状态" clearable style="width: 200px">
               <el-option
                  v-for="dict in sys_normal_disable"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input
            v-model="queryParams.menuName"
            placeholder="请输入菜单名称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="菜单状态" clearable style="width: 200px">
            <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:menu:add']"
            >新增</el-button
          >
          <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
        </el-form-item>
      </el-form>
    </div>

      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
               v-hasPermi="['system:menu:add']"
            >新增</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button 
               type="info"
               plain
               icon="Sort"
               @click="toggleExpandAll"
            >展开/折叠</el-button>
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
    <div class="table-bg-style">
      <div class="table-box">
        <el-table
          v-if="refreshTable"
          v-loading="loading"
          :data="menuList"
          row-key="menuId"
          :default-expand-all="isExpandAll"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
          <el-table-column prop="icon" label="图标" align="center" width="100">
            <template #default="scope">
              <svg-icon :icon-class="scope.row.icon" />
            </template>
          </el-table-column>
          <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
          <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="status" label="状态" width="80">
            <template #default="scope">
              <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" width="160" prop="createTime">
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                link
                type="primary"
                icon="Edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:menu:edit']"
                >修改</el-button
              >
              <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']"
                >新增</el-button
              >
              <el-button
                link
                type="primary"
                icon="Delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:menu:remove']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

      <el-table
         v-if="refreshTable"
         v-loading="loading"
         :data="menuList"
         row-key="menuId"
         :default-expand-all="isExpandAll"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
         <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
         <el-table-column prop="icon" label="图标" align="center" width="100">
            <template #default="scope">
               <svg-icon :icon-class="scope.row.icon" />
            </template>
         </el-table-column>
         <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
         <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
         <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
         <el-table-column prop="status" label="状态" width="80">
            <template #default="scope">
               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
            </template>
         </el-table-column>
         <el-table-column label="创建时间" align="center" width="160" prop="createTime">
            <template #default="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>
            </template>
         </el-table-column>
      </el-table>

      <!-- 添加或修改菜单对话框 -->
      <el-dialog :title="title" v-model="open" width="680px" append-to-body>
         <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
            <el-row>
               <el-col :span="24">
                  <el-form-item label="上级菜单">
                     <el-tree-select
                        v-model="form.parentId"
                        :data="menuOptions"
                        :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
                        value-key="menuId"
                        placeholder="选择上级菜单"
                        check-strictly
                     />
                  </el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="菜单类型" prop="menuType">
                     <el-radio-group v-model="form.menuType">
                        <el-radio label="M">目录</el-radio>
                        <el-radio label="C">菜单</el-radio>
                        <el-radio label="F">按钮</el-radio>
                     </el-radio-group>
                  </el-form-item>
               </el-col>
               <el-col :span="24" v-if="form.menuType != 'F'">
                  <el-form-item label="菜单图标" prop="icon">
                     <el-popover
                        placement="bottom-start"
                        :width="540"
                        trigger="click"
                     >
                        <template #reference>
                           <el-input v-model="form.icon" placeholder="点击选择图标" @blur="showSelectIcon" readonly>
                              <template #prefix>
                                 <svg-icon
                                    v-if="form.icon"
                                    :icon-class="form.icon"
                                    class="el-input__icon"
                                    style="height: 32px;width: 16px;"
                                 />
                                 <el-icon v-else style="height: 32px;width: 16px;"><search /></el-icon>
                              </template>
                           </el-input>
                        </template>
                        <icon-select ref="iconSelectRef" @selected="selected" :active-icon="form.icon" />
                     </el-popover>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="菜单名称" prop="menuName">
                     <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="显示排序" prop="orderNum">
                     <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
                  </el-form-item>
               </el-col>
               <el-col :span="12" v-if="form.menuType != 'F'">
                  <el-form-item>
                     <template #label>
                        <span>
                           <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                              <el-icon><question-filled /></el-icon>
                           </el-tooltip>是否外链
                        </span>
                     </template>
                     <el-radio-group v-model="form.isFrame">
                        <el-radio label="0">是</el-radio>
                        <el-radio label="1">否</el-radio>
                     </el-radio-group>
                  </el-form-item>
               </el-col>
               <el-col :span="12" v-if="form.menuType != 'F'">
                  <el-form-item prop="path">
                     <template #label>
                        <span>
                           <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                              <el-icon><question-filled /></el-icon>
                           </el-tooltip>
                           路由地址
                        </span>
                     </template>
                     <el-input v-model="form.path" placeholder="请输入路由地址" />
                  </el-form-item>
               </el-col>
               <el-col :span="12" v-if="form.menuType == 'C'">
                  <el-form-item prop="component">
                     <template #label>
                        <span>
                           <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                              <el-icon><question-filled /></el-icon>
                           </el-tooltip>
                           组件路径
                        </span>
                     </template>
                     <el-input v-model="form.component" placeholder="请输入组件路径" />
                  </el-form-item>
               </el-col>
               <el-col :span="12" v-if="form.menuType != 'M'">
                  <el-form-item>
                     <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
                     <template #label>
                        <span>
                           <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
                              <el-icon><question-filled /></el-icon>
                           </el-tooltip>
                           权限字符
                        </span>
                     </template>
                  </el-form-item>
               </el-col>
               <el-col :span="12" v-if="form.menuType == 'C'">
                  <el-form-item>
                     <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
                     <template #label>
                        <span>
                           <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
                              <el-icon><question-filled /></el-icon>
                           </el-tooltip>
                           路由参数
                        </span>
                     </template>
                  </el-form-item>
               </el-col>
               <el-col :span="12" v-if="form.menuType == 'C'">
                  <el-form-item>
                     <template #label>
                        <span>
                           <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
                              <el-icon><question-filled /></el-icon>
                           </el-tooltip>
                           是否缓存
                        </span>
                     </template>
                     <el-radio-group v-model="form.isCache">
                        <el-radio label="0">缓存</el-radio>
                        <el-radio label="1">不缓存</el-radio>
                     </el-radio-group>
                  </el-form-item>
               </el-col>
               <el-col :span="12" v-if="form.menuType != 'F'">
                  <el-form-item>
                     <template #label>
                        <span>
                           <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                              <el-icon><question-filled /></el-icon>
                           </el-tooltip>
                           显示状态
                        </span>
                     </template>
                     <el-radio-group v-model="form.visible">
                        <el-radio
                           v-for="dict in sys_show_hide"
                           :key="dict.value"
                           :label="dict.value"
                        >{{ dict.label }}</el-radio>
                     </el-radio-group>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item>
                     <template #label>
                        <span>
                           <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                              <el-icon><question-filled /></el-icon>
                           </el-tooltip>
                           菜单状态
                        </span>
                     </template>
                     <el-radio-group v-model="form.status">
                        <el-radio
                           v-for="dict in sys_normal_disable"
                           :key="dict.value"
                           :label="dict.value"
                        >{{ dict.label }}</el-radio>
                     </el-radio-group>
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog :title="title" v-model="open" width="680px" append-to-body>
      <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单">
              <el-tree-select
                v-model="form.parentId"
                :data="menuOptions"
                :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
                value-key="menuId"
                placeholder="选择上级菜单"
                check-strictly
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单类型" prop="menuType">
              <el-radio-group v-model="form.menuType">
                <el-radio label="M">目录</el-radio>
                <el-radio label="C">菜单</el-radio>
                <el-radio label="F">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.menuType != 'F'">
            <el-form-item label="菜单图标" prop="icon">
              <el-popover placement="bottom-start" :width="540" trigger="click">
                <template #reference>
                  <el-input v-model="form.icon" placeholder="点击选择图标" @blur="showSelectIcon" readonly>
                    <template #prefix>
                      <svg-icon
                        v-if="form.icon"
                        :icon-class="form.icon"
                        class="el-input__icon"
                        style="height: 32px; width: 16px"
                      />
                      <el-icon v-else style="height: 32px; width: 16px"><search /></el-icon>
                    </template>
                  </el-input>
                </template>
                <icon-select ref="iconSelectRef" @selected="selected" :active-icon="form.icon" />
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType != 'F'">
            <el-form-item>
              <template #label>
                <span>
                  <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                    <el-icon><question-filled /></el-icon> </el-tooltip
                  >是否外链
                </span>
              </template>
              <el-radio-group v-model="form.isFrame">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType != 'F'">
            <el-form-item prop="path">
              <template #label>
                <span>
                  <el-tooltip
                    content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头"
                    placement="top"
                  >
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                  路由地址
                </span>
              </template>
              <el-input v-model="form.path" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType == 'C'">
            <el-form-item prop="component">
              <template #label>
                <span>
                  <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                  组件路径
                </span>
              </template>
              <el-input v-model="form.component" placeholder="请输入组件路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType != 'M'">
            <el-form-item>
              <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
              <template #label>
                <span>
                  <el-tooltip
                    content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)"
                    placement="top"
                  >
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                  权限字符
                </span>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType == 'C'">
            <el-form-item>
              <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
              <template #label>
                <span>
                  <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                  路由参数
                </span>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType == 'C'">
            <el-form-item>
              <template #label>
                <span>
                  <el-tooltip
                    content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致"
                    placement="top"
                  >
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                  是否缓存
                </span>
              </template>
              <el-radio-group v-model="form.isCache">
                <el-radio label="0">缓存</el-radio>
                <el-radio label="1">不缓存</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.menuType != 'F'">
            <el-form-item>
              <template #label>
                <span>
                  <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                  显示状态
                </span>
              </template>
              <el-radio-group v-model="form.visible">
                <el-radio v-for="dict in sys_show_hide" :key="dict.value" :label="dict.value">{{
                  dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <template #label>
                <span>
                  <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                    <el-icon><question-filled /></el-icon>
                  </el-tooltip>
                  菜单状态
                </span>
              </template>
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{
                  dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Menu">
import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
import SvgIcon from "@/components/SvgIcon";
import IconSelect from "@/components/IconSelect";
import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu"
import SvgIcon from "@/components/SvgIcon"
import IconSelect from "@/components/IconSelect"

const { proxy } = getCurrentInstance();
const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");
const { proxy } = getCurrentInstance()
const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable")

const menuList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const title = ref("");
const menuOptions = ref([]);
const isExpandAll = ref(false);
const refreshTable = ref(true);
const iconSelectRef = ref(null);
const menuList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const title = ref("")
const menuOptions = ref([])
const isExpandAll = ref(false)
const refreshTable = ref(true)
const iconSelectRef = ref(null)

const data = reactive({
  form: {},
  queryParams: {
    menuName: undefined,
    visible: undefined
    visible: undefined,
  },
  rules: {
    menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
    orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
    path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
    path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
  },
});
})

const { queryParams, form, rules } = toRefs(data);
const { queryParams, form, rules } = toRefs(data)

/** 查询菜单列表 */
function getList() {
  loading.value = true;
  listMenu(queryParams.value).then(response => {
    menuList.value = proxy.handleTree(response.data, "menuId");
    loading.value = false;
  });
  loading.value = true
  listMenu(queryParams.value).then((response) => {
    menuList.value = proxy.handleTree(response.data, "menuId")
    loading.value = false
  })
}
/** 查询菜单下拉树结构 */
function getTreeselect() {
  menuOptions.value = [];
  listMenu().then(response => {
    const menu = { menuId: 0, menuName: "主类目", children: [] };
    menu.children = proxy.handleTree(response.data, "menuId");
    menuOptions.value.push(menu);
  });
  menuOptions.value = []
  listMenu().then((response) => {
    const menu = { menuId: 0, menuName: "主类目", children: [] }
    menu.children = proxy.handleTree(response.data, "menuId")
    menuOptions.value.push(menu)
  })
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
  open.value = false
  reset()
}
/** 表单重置 */
function reset() {
@@ -342,86 +345,94 @@
    isFrame: "1",
    isCache: "0",
    visible: "0",
    status: "0"
  };
  proxy.resetForm("menuRef");
    status: "0",
  }
  proxy.resetForm("menuRef")
}
/** 展示下拉图标 */
function showSelectIcon() {
  iconSelectRef.value.reset();
  iconSelectRef.value.reset()
}
/** 选择图标 */
function selected(name) {
  form.value.icon = name;
  form.value.icon = name
}
/** 搜索按钮操作 */
function handleQuery() {
  getList();
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
  proxy.resetForm("queryRef")
  handleQuery()
}
/** 新增按钮操作 */
function handleAdd(row) {
  reset();
  getTreeselect();
  reset()
  getTreeselect()
  if (row != null && row.menuId) {
    form.value.parentId = row.menuId;
    form.value.parentId = row.menuId
  } else {
    form.value.parentId = 0;
    form.value.parentId = 0
  }
  open.value = true;
  title.value = "添加菜单";
  open.value = true
  title.value = "添加菜单"
}
/** 展开/折叠操作 */
function toggleExpandAll() {
  refreshTable.value = false;
  isExpandAll.value = !isExpandAll.value;
  refreshTable.value = false
  isExpandAll.value = !isExpandAll.value
  nextTick(() => {
    refreshTable.value = true;
  });
    refreshTable.value = true
  })
}
/** 修改按钮操作 */
async function handleUpdate(row) {
  reset();
  await getTreeselect();
  getMenu(row.menuId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改菜单";
  });
  reset()
  await getTreeselect()
  getMenu(row.menuId).then((response) => {
    form.value = response.data
    open.value = true
    title.value = "修改菜单"
  })
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["menuRef"].validate(valid => {
  proxy.$refs["menuRef"].validate((valid) => {
    if (valid) {
      if (form.value.menuId != undefined) {
        updateMenu(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
        updateMenu(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addMenu(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
        addMenu(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  });
  })
}
/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function() {
    return delMenu(row.menuId);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
  proxy.$modal
    .confirm('是否确认删除名称为"' + row.menuName + '"的数据项?')
    .then(function () {
      return delMenu(row.menuId)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}

getList();
getList()
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>

 zhitan-vue/src/views/system/name/name.vue

@@ -1,47 +1,55 @@
<template>
  <div class="app-container">
    <el-form :model="form" label-width="80px">
      <el-row class="mb20 mt20">
        <el-col :offset="1" :span="18">
          <el-form-item label="系统名称" prop="systemName">
            <el-input v-model="form.systemName" placeholder="请输入系统名称" maxlength="64" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20 mt20">
        <el-col :offset="1" :span="18">
          <el-form-item label="登录logo" prop="homeLogo">
            <ImageUpload v-model="form.homeLogo" :fileType="['png']" :limit="1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20 mt20">
        <el-col :offset="1" :span="18">
          <el-form-item label="后台logo" prop="leftLogo">
            <ImageUpload v-model="form.leftLogo" :fileType="['png']" :limit="1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20 mt20">
        <el-col :offset="1" :span="18">
          <el-form-item label="copyRight" prop="copyRight">
            <el-input v-model="form.copyRight" placeholder="请输入" type="textarea" maxlength="200" :rows="6"
              show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mb20 mt20">
        <el-col :offset="2" :span="18">
          <el-button type="primary" @click="handleSave">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
  <div class="app-container page">
    <div class="form-card">
      <el-form :model="form" label-width="80px">
        <el-row class="mb20 mt20">
          <el-col :offset="1" :span="18">
            <el-form-item label="系统名称" prop="systemName">
              <el-input v-model="form.systemName" placeholder="请输入系统名称" maxlength="64" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb20 mt20">
          <el-col :offset="1" :span="18">
            <el-form-item label="登录logo" prop="homeLogo">
              <ImageUpload v-model="form.homeLogo" :fileType="['png']" :limit="1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb20 mt20">
          <el-col :offset="1" :span="18">
            <el-form-item label="后台logo" prop="leftLogo">
              <ImageUpload v-model="form.leftLogo" :fileType="['png']" :limit="1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb20 mt20">
          <el-col :offset="1" :span="18">
            <el-form-item label="copyRight" prop="copyRight">
              <el-input
                v-model="form.copyRight"
                placeholder="请输入"
                type="textarea"
                maxlength="200"
                :rows="6"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb20 mt20" style="padding-bottom: 20px">
          <el-col :offset="2" :span="18">
            <el-button type="primary" @click="handleSave">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import Cookies from 'js-cookie'
import { systemName, systemNameSave } from '@/api/system/name'
const baseUrl = import.meta.env.VITE_APP_BASE_API;
import Cookies from "js-cookie"
import { systemName, systemNameSave } from "@/api/system/name"
const baseUrl = import.meta.env.VITE_APP_BASE_API
const { proxy } = getCurrentInstance()
let form = ref({
  systemName: null,
@@ -51,16 +59,15 @@
})

function getSystemName() {
  systemName().then(res => {
  systemName().then((res) => {
    if (res.code == 200) {
      form.value = res.data
      sessionStorage.setItem('SystemInfo', JSON.stringify(res.data))
      sessionStorage.setItem("SystemInfo", JSON.stringify(res.data))
    }
  })
}
getSystemName()
function handleSave() {

  if (!form.value.leftLogo.includes(baseUrl)) {
    form.value.leftLogo = baseUrl + form.value.leftLogo
  }
@@ -69,9 +76,9 @@
    form.value.homeLogo = baseUrl + form.value.homeLogo
  }

  systemNameSave(form.value).then(res => {
  systemNameSave(form.value).then((res) => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess(res.msg);
      proxy.$modal.msgSuccess(res.msg)
      getSystemName()
    }
  })
@@ -79,6 +86,7 @@
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
:deep .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;

 zhitan-vue/src/views/system/post/index.vue

@@ -1,164 +1,160 @@
<template>
   <div class="app-container">
  <div class="app-container page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
         <el-form-item label="岗位编码" prop="postCode">
            <el-input
               v-model="queryParams.postCode"
               placeholder="请输入岗位编码"
               clearable
               style="width: 200px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="岗位名称" prop="postName">
            <el-input
               v-model="queryParams.postName"
               placeholder="请输入岗位名称"
               clearable
               style="width: 200px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="岗位状态" clearable style="width: 200px">
               <el-option
                  v-for="dict in sys_normal_disable"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
        <el-form-item label="岗位编码" prop="postCode">
          <el-input
            v-model="queryParams.postCode"
            placeholder="请输入岗位编码"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="岗位名称" prop="postName">
          <el-input
            v-model="queryParams.postName"
            placeholder="请输入岗位名称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="岗位状态" clearable style="width: 200px">
            <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
               v-hasPermi="['system:post:add']"
            >新增</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="success"
               plain
               icon="Edit"
               :disabled="single"
               @click="handleUpdate"
               v-hasPermi="['system:post:edit']"
            >修改</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['system:post:remove']"
            >删除</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="warning"
               plain
               icon="Download"
               @click="handleExport"
               v-hasPermi="['system:post:export']"
            >导出</el-button>
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="岗位编号" align="center" prop="postId" />
         <el-table-column label="岗位编码" align="center" prop="postCode" />
         <el-table-column label="岗位名称" align="center" prop="postName" />
         <el-table-column label="岗位排序" align="center" prop="postSort" />
         <el-table-column label="状态" align="center" prop="status">
    <div class="table-bg-style">
      <div class="table-box">
        <div style="margin-bottom: 12px">
          <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:post:add']"
            >新增</el-button
          >
          <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['system:post:edit']"
            >修改</el-button
          >
          <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['system:post:remove']"
            >删除</el-button
          >
          <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:post:export']"
            >导出</el-button
          >
        </div>
        <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="岗位编号" align="center" prop="postId" />
          <el-table-column label="岗位编码" align="center" prop="postCode" />
          <el-table-column label="岗位名称" align="center" prop="postName" />
          <el-table-column label="岗位排序" align="center" prop="postSort" />
          <el-table-column label="状态" align="center" prop="status">
            <template #default="scope">
               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
              <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
            </template>
         </el-table-column>
         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
            <template #default="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
          </el-table-column>
          <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>
              <el-button
                link
                type="primary"
                icon="Edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:post:edit']"
                >修改</el-button
              >
              <el-button
                link
                type="primary"
                icon="Delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:post:remove']"
                >删除</el-button
              >
            </template>
         </el-table-column>
      </el-table>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
      />

      <!-- 添加或修改岗位对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
         <el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="岗位名称" prop="postName">
               <el-input v-model="form.postName" placeholder="请输入岗位名称" />
            </el-form-item>
            <el-form-item label="岗位编码" prop="postCode">
               <el-input v-model="form.postCode" placeholder="请输入编码名称" />
            </el-form-item>
            <el-form-item label="岗位顺序" prop="postSort">
               <el-input-number v-model="form.postSort" controls-position="right" :min="0" />
            </el-form-item>
            <el-form-item label="岗位状态" prop="status">
               <el-radio-group v-model="form.status">
                  <el-radio
                     v-for="dict in sys_normal_disable"
                     :key="dict.value"
                     :label="dict.value"
                  >{{ dict.label }}</el-radio>
               </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="岗位名称" prop="postName">
          <el-input v-model="form.postName" placeholder="请输入岗位名称" />
        </el-form-item>
        <el-form-item label="岗位编码" prop="postCode">
          <el-input v-model="form.postCode" placeholder="请输入编码名称" />
        </el-form-item>
        <el-form-item label="岗位顺序" prop="postSort">
          <el-input-number v-model="form.postSort" controls-position="right" :min="0" />
        </el-form-item>
        <el-form-item label="岗位状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{
              dict.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Post">
import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post";
import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post"

const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict("sys_normal_disable")

const postList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const postList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")

const data = reactive({
  form: {},
@@ -167,30 +163,30 @@
    pageSize: 10,
    postCode: undefined,
    postName: undefined,
    status: undefined
    status: undefined,
  },
  rules: {
    postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
    postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
    postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
  }
});
  },
})

const { queryParams, form, rules } = toRefs(data);
const { queryParams, form, rules } = toRefs(data)

/** 查询岗位列表 */
function getList() {
  loading.value = true;
  listPost(queryParams.value).then(response => {
    postList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
  loading.value = true
  listPost(queryParams.value).then((response) => {
    postList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
  open.value = false
  reset()
}
/** 表单重置 */
function reset() {
@@ -200,78 +196,89 @@
    postName: undefined,
    postSort: 0,
    status: "0",
    remark: undefined
  };
  proxy.resetForm("postRef");
    remark: undefined,
  }
  proxy.resetForm("postRef")
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
  proxy.resetForm("queryRef")
  handleQuery()
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.postId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
  ids.value = selection.map((item) => item.postId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加岗位";
  reset()
  open.value = true
  title.value = "添加岗位"
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const postId = row.postId || ids.value;
  getPost(postId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改岗位";
  });
  reset()
  const postId = row.postId || ids.value
  getPost(postId).then((response) => {
    form.value = response.data
    open.value = true
    title.value = "修改岗位"
  })
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["postRef"].validate(valid => {
  proxy.$refs["postRef"].validate((valid) => {
    if (valid) {
      if (form.value.postId != undefined) {
        updatePost(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
        updatePost(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addPost(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
        addPost(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  });
  })
}
/** 删除按钮操作 */
function handleDelete(row) {
  const postIds = row.postId || ids.value;
  proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {
    return delPost(postIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
  const postIds = row.postId || ids.value
  proxy.$modal
    .confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？')
    .then(function () {
      return delPost(postIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download("system/post/export", {
    ...queryParams.value
  }, `post_${new Date().getTime()}.xlsx`);
  proxy.download(
    "system/post/export",
    {
      ...queryParams.value,
    },
    `post_${new Date().getTime()}.xlsx`
  )
}

getList();
getList()
</script>
<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>

 zhitan-vue/src/views/system/role/index.vue

@@ -1,273 +1,302 @@
<template>
   <div class="app-container">
  <div class="app-container page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="80px">
         <el-form-item label="角色名称" prop="roleName">
            <el-input
               v-model="queryParams.roleName"
               placeholder="请输入角色名称"
               clearable
               style="width: 240px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="权限字符" prop="roleKey">
            <el-input
               v-model="queryParams.roleKey"
               placeholder="请输入权限字符"
               clearable
               style="width: 240px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="状态" prop="status">
            <el-select
               v-model="queryParams.status"
               placeholder="角色状态"
               clearable
               style="width: 240px"
            >
               <el-option
                  v-for="dict in sys_normal_disable"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>
         </el-form-item>
         <el-form-item label="创建时间" style="width: 308px">
            <el-date-picker
               v-model="dateRange"
               value-format="YYYY-MM-DD"
               type="daterange"
               range-separator="-"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
            ></el-date-picker>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
        <el-form-item label="角色名称" prop="roleName">
          <el-input
            v-model="queryParams.roleName"
            placeholder="请输入角色名称"
            clearable
            style="width: 100%"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="权限字符" prop="roleKey">
          <el-input
            v-model="queryParams.roleKey"
            placeholder="请输入权限字符"
            clearable
            style="width: 100%"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="角色状态" clearable style="width: 100%">
            <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" style="width: 308px">
          <el-date-picker
            v-model="dateRange"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button
               type="primary"
               plain
               icon="Plus"
               @click="handleAdd"
               v-hasPermi="['system:role:add']"
            >新增</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="success"
               plain
               icon="Edit"
               :disabled="single"
               @click="handleUpdate"
               v-hasPermi="['system:role:edit']"
            >修改</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['system:role:remove']"
            >删除</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="warning"
               plain
               icon="Download"
               @click="handleExport"
               v-hasPermi="['system:role:export']"
            >导出</el-button>
         </el-col>
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
    </div>

      <!-- 表格数据 -->
      <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="角色编号" prop="roleId" width="120" />
         <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
         <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
         <el-table-column label="显示顺序" prop="roleSort" width="100" />
         <el-table-column label="状态" align="center" width="100">
    <div class="table-bg-style">
      <div class="table-box" style="margin-top: 0">
        <el-row :gutter="10" class="mb8" style="margin-top: 8px">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:role:add']"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="Edit"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['system:role:edit']"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="Delete"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:role:remove']"
              >删除</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:role:export']"
              >导出</el-button
            >
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!-- 表格数据 -->
        <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="角色编号" prop="roleId" width="120" />
          <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
          <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
          <el-table-column label="显示顺序" prop="roleSort" width="100" />
          <el-table-column label="状态" align="center" width="100">
            <template #default="scope">
               <el-switch
                  v-model="scope.row.status"
                  active-value="0"
                  inactive-value="1"
                  @change="handleStatusChange(scope.row)"
               ></el-switch>
              <el-switch
                v-model="scope.row.status"
                active-value="0"
                inactive-value="1"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
         </el-table-column>
         <el-table-column label="创建时间" align="center" prop="createTime">
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime">
            <template #default="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
                <el-button
                  link
                  type="primary"
                  icon="Edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['system:role:edit']"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
                <el-button
                  link
                  type="primary"
                  icon="Delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['system:role:remove']"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
                <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
                <el-button
                  link
                  type="primary"
                  icon="CircleCheck"
                  @click="handleDataScope(scope.row)"
                  v-hasPermi="['system:role:edit']"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
                <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
                <el-button
                  link
                  type="primary"
                  icon="User"
                  @click="handleAuthUser(scope.row)"
                  v-hasPermi="['system:role:edit']"
                ></el-button>
              </el-tooltip>
            </template>
         </el-table-column>
      </el-table>
          </el-table-column>
        </el-table>

      <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
      />
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="roleRef" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="form.roleName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item prop="roleKey">
          <template #label>
            <span>
              <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
                <el-icon><question-filled /></el-icon>
              </el-tooltip>
              权限字符
            </span>
          </template>
          <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
        </el-form-item>
        <el-form-item label="角色顺序" prop="roleSort">
          <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{
              dict.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单权限">
          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')"
            >全选/全不选</el-checkbox
          >
          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')"
            >父子联动</el-checkbox
          >
          <el-tree
            class="tree-border"
            :data="menuOptions"
            show-checkbox
            ref="menuRef"
            node-key="id"
            :check-strictly="!form.menuCheckStrictly"
            empty-text="加载中，请稍候"
            :props="{ label: 'label', children: 'children' }"
          ></el-tree>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

      <!-- 添加或修改角色配置对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
         <el-form ref="roleRef" :model="form" :rules="rules" label-width="110px">
            <el-form-item label="角色名称" prop="roleName">
               <el-input v-model="form.roleName" placeholder="请输入角色名称" />
            </el-form-item>
            <el-form-item prop="roleKey">
               <template #label>
                  <span>
                     <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
                        <el-icon><question-filled /></el-icon>
                     </el-tooltip>
                     权限字符
                  </span>
               </template>
               <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
            </el-form-item>
            <el-form-item label="角色顺序" prop="roleSort">
               <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
            </el-form-item>
            <el-form-item label="状态">
               <el-radio-group v-model="form.status">
                  <el-radio
                     v-for="dict in sys_normal_disable"
                     :key="dict.value"
                     :label="dict.value"
                  >{{ dict.label }}</el-radio>
               </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单权限">
               <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
               <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
               <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
               <el-tree
                  class="tree-border"
                  :data="menuOptions"
                  show-checkbox
                  ref="menuRef"
                  node-key="id"
                  :check-strictly="!form.menuCheckStrictly"
                  empty-text="加载中，请稍候"
                  :props="{ label: 'label', children: 'children' }"
               ></el-tree>
            </el-form-item>
            <el-form-item label="备注">
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>

      <!-- 分配角色数据权限对话框 -->
      <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>
         <el-form :model="form" label-width="100px">
            <el-form-item label="角色名称">
               <el-input v-model="form.roleName" :disabled="true" />
            </el-form-item>
            <el-form-item label="权限字符">
               <el-input v-model="form.roleKey" :disabled="true" />
            </el-form-item>
            <el-form-item label="权限范围">
               <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
                  <el-option
                     v-for="item in dataScopeOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                  ></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="数据权限" v-show="form.dataScope == 2">
               <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
               <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
               <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
               <el-tree
                  class="tree-border"
                  :data="deptOptions"
                  show-checkbox
                  default-expand-all
                  ref="deptRef"
                  node-key="id"
                  :check-strictly="!form.deptCheckStrictly"
                  empty-text="加载中，请稍候"
                  :props="{ label: 'label', children: 'children' }"
               ></el-tree>
            </el-form-item>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitDataScope">确 定</el-button>
               <el-button @click="cancelDataScope">取 消</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
    <!-- 分配角色数据权限对话框 -->
    <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>
      <el-form :model="form" label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="form.roleName" :disabled="true" />
        </el-form-item>
        <el-form-item label="权限字符">
          <el-input v-model="form.roleKey" :disabled="true" />
        </el-form-item>
        <el-form-item label="权限范围">
          <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
            <el-option
              v-for="item in dataScopeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据权限" v-show="form.dataScope == 2">
          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')"
            >全选/全不选</el-checkbox
          >
          <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')"
            >父子联动</el-checkbox
          >
          <el-tree
            class="tree-border"
            :data="deptOptions"
            show-checkbox
            default-expand-all
            ref="deptRef"
            node-key="id"
            :check-strictly="!form.deptCheckStrictly"
            empty-text="加载中，请稍候"
            :props="{ label: 'label', children: 'children' }"
          ></el-tree>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDataScope">确 定</el-button>
          <el-button @click="cancelDataScope">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Role">
import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role";
import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu";
import {
  addRole,
  changeRoleStatus,
  dataScope,
  delRole,
  getRole,
  listRole,
  updateRole,
  deptTreeSelect,
} from "@/api/system/role"
import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu"

const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
const router = useRouter()
const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict("sys_normal_disable")

const roleList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const menuOptions = ref([]);
const menuExpand = ref(false);
const menuNodeAll = ref(false);
const deptExpand = ref(true);
const deptNodeAll = ref(false);
const deptOptions = ref([]);
const openDataScope = ref(false);
const menuRef = ref(null);
const deptRef = ref(null);
const roleList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const dateRange = ref([])
const menuOptions = ref([])
const menuExpand = ref(false)
const menuNodeAll = ref(false)
const deptExpand = ref(true)
const deptNodeAll = ref(false)
const deptOptions = ref([])
const openDataScope = ref(false)
const menuRef = ref(null)
const deptRef = ref(null)

/** 数据范围选项*/
const dataScopeOptions = ref([
@@ -275,8 +304,8 @@
  { value: "2", label: "自定数据权限" },
  { value: "3", label: "本部门数据权限" },
  { value: "4", label: "本部门及以下数据权限" },
  { value: "5", label: "仅本人数据权限" }
]);
  { value: "5", label: "仅本人数据权限" },
])

const data = reactive({
  form: {},
@@ -285,111 +314,123 @@
    pageSize: 10,
    roleName: undefined,
    roleKey: undefined,
    status: undefined
    status: undefined,
  },
  rules: {
    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
    roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
    roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }],
  },
});
})

const { queryParams, form, rules } = toRefs(data);
const { queryParams, form, rules } = toRefs(data)

/** 查询角色列表 */
function getList() {
  loading.value = true;
  listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    roleList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
  loading.value = true
  listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
    roleList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
  dateRange.value = []
  proxy.resetForm("queryRef")
  handleQuery()
}
/** 删除按钮操作 */
function handleDelete(row) {
  const roleIds = row.roleId || ids.value;
  proxy.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function () {
    return delRole(roleIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
  const roleIds = row.roleId || ids.value
  proxy.$modal
    .confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?')
    .then(function () {
      return delRole(roleIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download("system/role/export", {
    ...queryParams.value,
  }, `role_${new Date().getTime()}.xlsx`);
  proxy.download(
    "system/role/export",
    {
      ...queryParams.value,
    },
    `role_${new Date().getTime()}.xlsx`
  )
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.roleId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
  ids.value = selection.map((item) => item.roleId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}
/** 角色状态修改 */
function handleStatusChange(row) {
  let text = row.status === "0" ? "启用" : "停用";
  proxy.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function () {
    return changeRoleStatus(row.roleId, row.status);
  }).then(() => {
    proxy.$modal.msgSuccess(text + "成功");
  }).catch(function () {
    row.status = row.status === "0" ? "1" : "0";
  });
  let text = row.status === "0" ? "启用" : "停用"
  proxy.$modal
    .confirm('确认要"' + text + '""' + row.roleName + '"角色吗?')
    .then(function () {
      return changeRoleStatus(row.roleId, row.status)
    })
    .then(() => {
      proxy.$modal.msgSuccess(text + "成功")
    })
    .catch(function () {
      row.status = row.status === "0" ? "1" : "0"
    })
}
/** 更多操作 */
function handleCommand(command, row) {
  switch (command) {
    case "handleDataScope":
      handleDataScope(row);
      break;
      handleDataScope(row)
      break
    case "handleAuthUser":
      handleAuthUser(row);
      break;
      handleAuthUser(row)
      break
    default:
      break;
      break
  }
}
/** 分配用户 */
function handleAuthUser(row) {
  router.push("/system/role-auth/user/" + row.roleId);
  router.push("/system/role-auth/user/" + row.roleId)
}
/** 查询菜单树结构 */
function getMenuTreeselect() {
  menuTreeselect().then(response => {
    menuOptions.value = response.data;
  });
  menuTreeselect().then((response) => {
    menuOptions.value = response.data
  })
}
/** 所有部门节点数据 */
function getDeptAllCheckedKeys() {
  // 目前被选中的部门节点
  let checkedKeys = deptRef.value.getCheckedKeys();
  let checkedKeys = deptRef.value.getCheckedKeys()
  // 半选中的部门节点
  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys();
  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
  return checkedKeys;
  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys()
  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
  return checkedKeys
}
/** 重置新增的表单以及其他数据  */
function reset() {
  if (menuRef.value != undefined) {
    menuRef.value.setCheckedKeys([]);
    menuRef.value.setCheckedKeys([])
  }
  menuExpand.value = false;
  menuNodeAll.value = false;
  deptExpand.value = true;
  deptNodeAll.value = false;
  menuExpand.value = false
  menuNodeAll.value = false
  deptExpand.value = true
  deptNodeAll.value = false
  form.value = {
    roleId: undefined,
    roleName: undefined,
@@ -400,160 +441,164 @@
    deptIds: [],
    menuCheckStrictly: true,
    deptCheckStrictly: true,
    remark: undefined
  };
  proxy.resetForm("roleRef");
    remark: undefined,
  }
  proxy.resetForm("roleRef")
}
/** 添加角色 */
function handleAdd() {
  reset();
  getMenuTreeselect();
  open.value = true;
  title.value = "添加角色";
  reset()
  getMenuTreeselect()
  open.value = true
  title.value = "添加角色"
}
/** 修改角色 */
function handleUpdate(row) {
  reset();
  const roleId = row.roleId || ids.value;
  const roleMenu = getRoleMenuTreeselect(roleId);
  getRole(roleId).then(response => {
    form.value = response.data;
    form.value.roleSort = Number(form.value.roleSort);
    open.value = true;
  reset()
  const roleId = row.roleId || ids.value
  const roleMenu = getRoleMenuTreeselect(roleId)
  getRole(roleId).then((response) => {
    form.value = response.data
    form.value.roleSort = Number(form.value.roleSort)
    open.value = true
    nextTick(() => {
      roleMenu.then((res) => {
        let checkedKeys = res.checkedKeys;
        let checkedKeys = res.checkedKeys
        checkedKeys.forEach((v) => {
          nextTick(() => {
            menuRef.value.setChecked(v, true, false);
          });
        });
      });
    });
    title.value = "修改角色";
  });
            menuRef.value.setChecked(v, true, false)
          })
        })
      })
    })
    title.value = "修改角色"
  })
}
/** 根据角色ID查询菜单树结构 */
function getRoleMenuTreeselect(roleId) {
  return roleMenuTreeselect(roleId).then(response => {
    menuOptions.value = response.menus;
    return response;
  });
  return roleMenuTreeselect(roleId).then((response) => {
    menuOptions.value = response.menus
    return response
  })
}
/** 根据角色ID查询部门树结构 */
function getDeptTree(roleId) {
  return deptTreeSelect(roleId).then(response => {
    deptOptions.value = response.depts;
    return response;
  });
  return deptTreeSelect(roleId).then((response) => {
    deptOptions.value = response.depts
    return response
  })
}
/** 树权限（展开/折叠）*/
function handleCheckedTreeExpand(value, type) {
  if (type == "menu") {
    let treeList = menuOptions.value;
    let treeList = menuOptions.value
    for (let i = 0; i < treeList.length; i++) {
      menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
      menuRef.value.store.nodesMap[treeList[i].id].expanded = value
    }
  } else if (type == "dept") {
    let treeList = deptOptions.value;
    let treeList = deptOptions.value
    for (let i = 0; i < treeList.length; i++) {
      deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
      deptRef.value.store.nodesMap[treeList[i].id].expanded = value
    }
  }
}
/** 树权限（全选/全不选） */
function handleCheckedTreeNodeAll(value, type) {
  if (type == "menu") {
    menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
    menuRef.value.setCheckedNodes(value ? menuOptions.value : [])
  } else if (type == "dept") {
    deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
    deptRef.value.setCheckedNodes(value ? deptOptions.value : [])
  }
}
/** 树权限（父子联动） */
function handleCheckedTreeConnect(value, type) {
  if (type == "menu") {
    form.value.menuCheckStrictly = value ? true : false;
    form.value.menuCheckStrictly = value ? true : false
  } else if (type == "dept") {
    form.value.deptCheckStrictly = value ? true : false;
    form.value.deptCheckStrictly = value ? true : false
  }
}
/** 所有菜单节点数据 */
function getMenuAllCheckedKeys() {
  // 目前被选中的菜单节点
  let checkedKeys = menuRef.value.getCheckedKeys();
  let checkedKeys = menuRef.value.getCheckedKeys()
  // 半选中的菜单节点
  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
  return checkedKeys;
  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys()
  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
  return checkedKeys
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["roleRef"].validate(valid => {
  proxy.$refs["roleRef"].validate((valid) => {
    if (valid) {
      if (form.value.roleId != undefined) {
        form.value.menuIds = getMenuAllCheckedKeys();
        updateRole(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
        form.value.menuIds = getMenuAllCheckedKeys()
        updateRole(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        form.value.menuIds = getMenuAllCheckedKeys();
        addRole(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
        form.value.menuIds = getMenuAllCheckedKeys()
        addRole(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  });
  })
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
  open.value = false
  reset()
}
/** 选择角色权限范围触发 */
function dataScopeSelectChange(value) {
  if (value !== "2") {
    deptRef.value.setCheckedKeys([]);
    deptRef.value.setCheckedKeys([])
  }
}
/** 分配数据权限操作 */
function handleDataScope(row) {
  reset();
  const deptTreeSelect = getDeptTree(row.roleId);
  getRole(row.roleId).then(response => {
    form.value = response.data;
    openDataScope.value = true;
  reset()
  const deptTreeSelect = getDeptTree(row.roleId)
  getRole(row.roleId).then((response) => {
    form.value = response.data
    openDataScope.value = true
    nextTick(() => {
      deptTreeSelect.then(res => {
      deptTreeSelect.then((res) => {
        nextTick(() => {
          if (deptRef.value) {
            deptRef.value.setCheckedKeys(res.checkedKeys);
            deptRef.value.setCheckedKeys(res.checkedKeys)
          }
        });
      });
    });
    title.value = "分配数据权限";
  });
        })
      })
    })
    title.value = "分配数据权限"
  })
}
/** 提交按钮（数据权限） */
function submitDataScope() {
  if (form.value.roleId != undefined) {
    form.value.deptIds = getDeptAllCheckedKeys();
    dataScope(form.value).then(response => {
      proxy.$modal.msgSuccess("修改成功");
      openDataScope.value = false;
      getList();
    });
    form.value.deptIds = getDeptAllCheckedKeys()
    dataScope(form.value).then((response) => {
      proxy.$modal.msgSuccess("修改成功")
      openDataScope.value = false
      getList()
    })
  }
}
/** 取消按钮（数据权限）*/
function cancelDataScope() {
  openDataScope.value = false;
  reset();
  openDataScope.value = false
  reset()
}

getList();
getList()
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>

 zhitan-vue/src/views/system/user/index.vue

@@ -1,357 +1,421 @@
<template>
   <div class="app-container">
      <el-row :gutter="20">
         <!--部门数据-->
         <el-col :span="4" :xs="24">
            <div class="head-container">
               <el-input
                  v-model="deptName"
                  placeholder="请输入部门名称"
                  clearable
                  prefix-icon="Search"
                  style="margin-bottom: 20px"
               />
            </div>
            <div class="head-container">
               <el-tree
                  :data="deptOptions"
                  :props="{ label: 'label', children: 'children' }"
                  :expand-on-click-node="false"
                  :filter-node-method="filterNode"
                  ref="deptTreeRef"
                  node-key="id"
                  highlight-current
                  default-expand-all
                  @node-click="handleNodeClick"
               />
            </div>
         </el-col>
         <!--用户数据-->
         <el-col :span="20" :xs="24">
            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
               <el-form-item label="用户名称" prop="userName">
                  <el-input
                     v-model="queryParams.userName"
                     placeholder="请输入用户名称"
                     clearable
                     style="width: 240px"
                     @keyup.enter="handleQuery"
                  />
               </el-form-item>
               <el-form-item label="手机号码" prop="phoneNumber">
                  <el-input
                     v-model="queryParams.phoneNumber"
                     placeholder="请输入手机号码"
                     clearable
                     style="width: 240px"
                     @keyup.enter="handleQuery"
                  />
               </el-form-item>
               <el-form-item label="状态" prop="status">
                  <el-select
                     v-model="queryParams.status"
                     placeholder="用户状态"
                     clearable
                     style="width: 240px"
                  >
                     <el-option
                        v-for="dict in sys_normal_disable"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                     />
                  </el-select>
               </el-form-item>
               <el-form-item label="创建时间" style="width: 308px;">
                  <el-date-picker
                     v-model="dateRange"
                     value-format="YYYY-MM-DD"
                     type="daterange"
                     range-separator="-"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
                  ></el-date-picker>
               </el-form-item>
               <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
               </el-form-item>
            </el-form>
  <div class="app-container page">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            prefix-icon="Search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="{ label: 'label', children: 'children' }"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="deptTreeRef"
            node-key="id"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <div class="form-card">
          <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="用户名称" prop="userName">
              <el-input
                v-model="queryParams.userName"
                placeholder="请输入用户名称"
                clearable
                style="width: 100%"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="手机号码" prop="phoneNumber">
              <el-input
                v-model="queryParams.phoneNumber"
                placeholder="请输入手机号码"
                clearable
                style="width: 100%"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
            <el-form-item label="状态" prop="status" label-width="50px">
              <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 100%">
                <el-option
                  v-for="dict in sys_normal_disable"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间" style="width: 308px">
              <el-date-picker
                v-model="dateRange"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

            <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
                  <el-button
                     type="primary"
                     plain
                     icon="Plus"
                     @click="handleAdd"
                     v-hasPermi="['system:user:add']"
                  >新增</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button
                     type="success"
                     plain
                     icon="Edit"
                     :disabled="single"
                     @click="handleUpdate"
                     v-hasPermi="['system:user:edit']"
                  >修改</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button
                     type="danger"
                     plain
                     icon="Delete"
                     :disabled="multiple"
                     @click="handleDelete"
                     v-hasPermi="['system:user:remove']"
                  >删除</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button
                     type="info"
                     plain
                     icon="Upload"
                     @click="handleImport"
                     v-hasPermi="['system:user:import']"
                  >导入</el-button>
               </el-col>
               <el-col :span="1.5">
                  <el-button
                     type="warning"
                     plain
                     icon="Download"
                     @click="handleExport"
                     v-hasPermi="['system:user:export']"
                  >导出</el-button>
               </el-col>
               <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        <div class="table-bg-style">
          <div class="table-box" style="margin-top: 0">
            <el-row :gutter="10" class="mb8" style="margin-top: 8px">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']"
                  >新增</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="success"
                  plain
                  icon="Edit"
                  :disabled="single"
                  @click="handleUpdate"
                  v-hasPermi="['system:user:edit']"
                  >修改</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="Delete"
                  :disabled="multiple"
                  @click="handleDelete"
                  v-hasPermi="['system:user:remove']"
                  >删除</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:user:import']"
                  >导入</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="warning"
                  plain
                  icon="Download"
                  @click="handleExport"
                  v-hasPermi="['system:user:export']"
                  >导出</el-button
                >
              </el-col>
              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
            </el-row>

            <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="50" align="center" />
               <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
               <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
               <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
               <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
               <el-table-column label="手机号码" align="center" key="phoneNumber" prop="phoneNumber" v-if="columns[4].visible" width="120" />
               <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
                  <template #default="scope">
                     <el-switch
                        v-model="scope.row.status"
                        active-value="0"
                        inactive-value="1"
                        @change="handleStatusChange(scope.row)"
                     ></el-switch>
                  </template>
               </el-table-column>
               <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
                  <template #default="scope">
                     <span>{{ parseTime(scope.row.createTime) }}</span>
                  </template>
               </el-table-column>
               <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                  <template #default="scope">
                     <el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1">
                        <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
                     </el-tooltip>
                     <el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1">
                        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button>
                     </el-tooltip>
                     <el-tooltip content="重置密码" placement="top" v-if="scope.row.userId !== 1">
                         <el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>
                     </el-tooltip>
                     <el-tooltip content="分配角色" placement="top" v-if="scope.row.userId !== 1">
                        <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
                     </el-tooltip>
                  </template>
               </el-table-column>
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
              <el-table-column
                label="用户名称"
                align="center"
                key="userName"
                prop="userName"
                v-if="columns[1].visible"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="用户昵称"
                align="center"
                key="nickName"
                prop="nickName"
                v-if="columns[2].visible"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="部门"
                align="center"
                key="deptName"
                prop="dept.deptName"
                v-if="columns[3].visible"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="手机号码"
                align="center"
                key="phoneNumber"
                prop="phoneNumber"
                v-if="columns[4].visible"
                width="120"
              />
              <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
                <template #default="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-value="0"
                    inactive-value="1"
                    @change="handleStatusChange(scope.row)"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
                <template #default="scope">
                  <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                <template #default="scope">
                  <el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1">
                    <el-button
                      link
                      type="primary"
                      icon="Edit"
                      @click="handleUpdate(scope.row)"
                      v-hasPermi="['system:user:edit']"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1">
                    <el-button
                      link
                      type="primary"
                      icon="Delete"
                      @click="handleDelete(scope.row)"
                      v-hasPermi="['system:user:remove']"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="重置密码" placement="top" v-if="scope.row.userId !== 1">
                    <el-button
                      link
                      type="primary"
                      icon="Key"
                      @click="handleResetPwd(scope.row)"
                      v-hasPermi="['system:user:resetPwd']"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip content="分配角色" placement="top" v-if="scope.row.userId !== 1">
                    <el-button
                      link
                      type="primary"
                      icon="CircleCheck"
                      @click="handleAuthRole(scope.row)"
                      v-hasPermi="['system:user:edit']"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <pagination
               v-show="total > 0"
               :total="total"
               v-model:page="queryParams.pageNum"
               v-model:limit="queryParams.pageSize"
               @pagination="getList"
              v-show="total > 0"
              :total="total"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              @pagination="getList"
            />
         </el-col>
      </el-row>
          </div>
        </div>
      </el-col>
    </el-row>

      <!-- 添加或修改用户配置对话框 -->
      <el-dialog :title="title" v-model="open" width="600px" append-to-body>
         <el-form :model="form" :rules="rules" ref="userRef" label-width="100px">
            <el-row>
               <el-col :span="12">
                  <el-form-item label="用户昵称" prop="nickName">
                     <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="归属部门" prop="deptId">
                     <el-tree-select
                        v-model="form.deptId"
                        :data="deptOptions"
                        :props="{ value: 'id', label: 'label', children: 'children' }"
                        value-key="id"
                        placeholder="请选择归属部门"
                        check-strictly
                     />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="12">
                  <el-form-item label="手机号码" prop="phoneNumber">
                     <el-input v-model="form.phoneNumber" placeholder="请输入手机号码" maxlength="11" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="邮箱" prop="email">
                     <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="12">
                  <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
                     <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
                     <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="12">
                  <el-form-item label="用户性别">
                     <el-select v-model="form.sex" placeholder="请选择">
                        <el-option
                           v-for="dict in sys_user_sex"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value"
                        ></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="状态">
                     <el-radio-group v-model="form.status">
                        <el-radio
                           v-for="dict in sys_normal_disable"
                           :key="dict.value"
                           :label="dict.value"
                        >{{ dict.label }}</el-radio>
                     </el-radio-group>
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="12">
                  <el-form-item label="岗位">
                     <el-select v-model="form.postIds" multiple placeholder="请选择">
                        <el-option
                           v-for="item in postOptions"
                           :key="item.postId"
                           :label="item.postName"
                           :value="item.postId"
                           :disabled="item.status == 1"
                        ></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="角色">
                     <el-select v-model="form.roleIds" multiple placeholder="请选择">
                        <el-option
                           v-for="item in roleOptions"
                           :key="item.roleId"
                           :label="item.roleName"
                           :value="item.roleId"
                           :disabled="item.status == 1"
                        ></el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row>
               <el-col :span="24">
                  <el-form-item label="备注">
                     <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
      <el-form :model="form" :rules="rules" ref="userRef" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <el-tree-select
                v-model="form.deptId"
                :data="deptOptions"
                :props="{ value: 'id', label: 'label', children: 'children' }"
                value-key="id"
                placeholder="请选择归属部门"
                check-strictly
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phoneNumber">
              <el-input v-model="form.phoneNumber" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
              <el-input
                v-model="form.password"
                placeholder="请输入用户密码"
                type="password"
                maxlength="20"
                show-password
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="form.sex" placeholder="请选择">
                <el-option
                  v-for="dict in sys_user_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{
                  dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位">
              <el-select v-model="form.postIds" multiple placeholder="请选择">
                <el-option
                  v-for="item in postOptions"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色">
              <el-select v-model="form.roleIds" multiple placeholder="请选择">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

      <!-- 用户导入对话框 -->
      <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
         <el-upload
            ref="uploadRef"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
         >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
               <div class="el-upload__tip text-center">
                  <div class="el-upload__tip">
                     <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
                  </div>
                  <span>仅允许导入xls、xlsx格式文件。</span>
                  <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
               </div>
            </template>
         </el-upload>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitFileForm">确 定</el-button>
               <el-button @click="upload.open = false">取 消</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据</div>
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate"
              >下载模板</el-link
            >
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="User">
import { getToken } from "@/utils/auth";
import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user";
import { getToken } from "@/utils/auth"
import {
  changeUserStatus,
  listUser,
  resetUserPwd,
  delUser,
  getUser,
  updateUser,
  addUser,
  deptTreeSelect,
} from "@/api/system/user"

const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");
const router = useRouter()
const { proxy } = getCurrentInstance()
const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex")

const userList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const deptName = ref("");
const deptOptions = ref(undefined);
const initPassword = ref(undefined);
const postOptions = ref([]);
const roleOptions = ref([]);
const userList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const dateRange = ref([])
const deptName = ref("")
const deptOptions = ref(undefined)
const initPassword = ref(undefined)
const postOptions = ref([])
const roleOptions = ref([])
/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
@@ -365,8 +429,8 @@
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
});
  url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData",
})
// 列显隐信息
const columns = ref([
  { key: 0, label: `用户编号`, visible: true },
@@ -375,8 +439,8 @@
  { key: 3, label: `部门`, visible: true },
  { key: 4, label: `手机号码`, visible: true },
  { key: 5, label: `状态`, visible: true },
  { key: 6, label: `创建时间`, visible: true }
]);
  { key: 6, label: `创建时间`, visible: true },
])

const data = reactive({
  form: {},
@@ -386,157 +450,182 @@
    userName: undefined,
    phoneNumber: undefined,
    status: undefined,
    deptId: undefined
    deptId: undefined,
  },
  rules: {
    userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
    userName: [
      { required: true, message: "用户名称不能为空", trigger: "blur" },
      { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" },
    ],
    nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
    password: [
      { required: true, message: "用户密码不能为空", trigger: "blur" },
      { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
      { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" },
    ],
    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
    phoneNumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
  }
});
    phoneNumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
  },
})

const { queryParams, form, rules } = toRefs(data);
const { queryParams, form, rules } = toRefs(data)

/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
  if (!value) return true
  return data.label.indexOf(value) !== -1
}
/** 根据名称筛选部门树 */
watch(deptName, val => {
  proxy.$refs["deptTreeRef"].filter(val);
});
watch(deptName, (val) => {
  proxy.$refs["deptTreeRef"].filter(val)
})
/** 查询部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
  });
};
  deptTreeSelect().then((response) => {
    deptOptions.value = response.data
  })
}
/** 查询用户列表 */
function getList() {
  loading.value = true;
  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
    loading.value = false;
    userList.value = res.rows;
    total.value = res.total;
  });
};
  loading.value = true
  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then((res) => {
    loading.value = false
    userList.value = res.rows
    total.value = res.total
  })
}
/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.deptId = data.id;
  handleQuery();
};
  queryParams.value.deptId = data.id
  handleQuery()
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
};
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  queryParams.value.deptId = undefined;
  proxy.$refs.deptTreeRef.setCurrentKey(null);
  handleQuery();
};
  dateRange.value = []
  proxy.resetForm("queryRef")
  queryParams.value.deptId = undefined
  proxy.$refs.deptTreeRef.setCurrentKey(null)
  handleQuery()
}
/** 删除按钮操作 */
function handleDelete(row) {
  const userIds = row.userId || ids.value;
  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
    return delUser(userIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
};
  const userIds = row.userId || ids.value
  proxy.$modal
    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
    .then(function () {
      return delUser(userIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download("system/user/export", {
    ...queryParams.value,
  },`user_${new Date().getTime()}.xlsx`);
};
  proxy.download(
    "system/user/export",
    {
      ...queryParams.value,
    },
    `user_${new Date().getTime()}.xlsx`
  )
}
/** 用户状态修改  */
function handleStatusChange(row) {
  let text = row.status === "0" ? "启用" : "停用";
  proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
    return changeUserStatus(row.userId, row.status);
  }).then(() => {
    proxy.$modal.msgSuccess(text + "成功");
  }).catch(function () {
    row.status = row.status === "0" ? "1" : "0";
  });
};
  let text = row.status === "0" ? "启用" : "停用"
  proxy.$modal
    .confirm('确认要"' + text + '""' + row.userName + '"用户吗?')
    .then(function () {
      return changeUserStatus(row.userId, row.status)
    })
    .then(() => {
      proxy.$modal.msgSuccess(text + "成功")
    })
    .catch(function () {
      row.status = row.status === "0" ? "1" : "0"
    })
}
/** 更多操作 */
function handleCommand(command, row) {
  switch (command) {
    case "handleResetPwd":
      handleResetPwd(row);
      break;
      handleResetPwd(row)
      break
    case "handleAuthRole":
      handleAuthRole(row);
      break;
      handleAuthRole(row)
      break
    default:
      break;
      break
  }
};
}
/** 跳转角色分配 */
function handleAuthRole(row) {
  const userId = row.userId;
  router.push("/system/user-auth/role/" + userId);
};
  const userId = row.userId
  router.push("/system/user-auth/role/" + userId)
}
/** 重置密码按钮操作 */
function handleResetPwd(row) {
  proxy.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    closeOnClickModal: false,
    inputPattern: /^.{5,20}$/,
    inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
    inputValidator: (value) => {
      if (/<|>|"|'|\||\\/.test(value)) {
        return "不能包含非法字符：< > \" ' \\\ |"
      }
    },
  }).then(({ value }) => {
    resetUserPwd(row.userId, value).then(response => {
      proxy.$modal.msgSuccess("修改成功，新密码是：" + value);
    });
  }).catch(() => {});
};
  proxy
    .$prompt('请输入"' + row.userName + '"的新密码', "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      closeOnClickModal: false,
      inputPattern: /^.{5,20}$/,
      inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
      inputValidator: (value) => {
        if (/<|>|"|'|\||\\/.test(value)) {
          return "不能包含非法字符：< > \" ' \\\ |"
        }
      },
    })
    .then(({ value }) => {
      resetUserPwd(row.userId, value).then((response) => {
        proxy.$modal.msgSuccess("修改成功，新密码是：" + value)
      })
    })
    .catch(() => {})
}
/** 选择条数  */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.userId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};
  ids.value = selection.map((item) => item.userId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}
/** 导入按钮操作 */
function handleImport() {
  upload.title = "用户导入";
  upload.open = true;
};
  upload.title = "用户导入"
  upload.open = true
}
/** 下载模板操作 */
function importTemplate() {
  proxy.download("system/user/importTemplate", {
  }, `user_template_${new Date().getTime()}.xlsx`);
};
  proxy.download("system/user/importTemplate", {}, `user_template_${new Date().getTime()}.xlsx`)
}
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
  upload.isUploading = true
}
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
  getList();
};
  upload.open = false
  upload.isUploading = false
  proxy.$refs["uploadRef"].handleRemove(file)
  proxy.$alert(
    "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>",
    "导入结果",
    { dangerouslyUseHTMLString: true }
  )
  getList()
}
/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
};
  proxy.$refs["uploadRef"].submit()
}
/** 重置操作表单 */
function reset() {
  form.value = {
@@ -551,62 +640,66 @@
    status: "0",
    remark: undefined,
    postIds: [],
    roleIds: []
  };
  proxy.resetForm("userRef");
};
    roleIds: [],
  }
  proxy.resetForm("userRef")
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
};
  open.value = false
  reset()
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  getUser().then(response => {
    postOptions.value = response.posts;
    roleOptions.value = response.roles;
    open.value = true;
    title.value = "添加用户";
    form.value.password = initPassword.value;
  });
};
  reset()
  getUser().then((response) => {
    postOptions.value = response.posts
    roleOptions.value = response.roles
    open.value = true
    title.value = "添加用户"
    form.value.password = initPassword.value
  })
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const userId = row.userId || ids.value;
  getUser(userId).then(response => {
    form.value = response.data;
    postOptions.value = response.posts;
    roleOptions.value = response.roles;
    form.value.postIds = response.postIds;
    form.value.roleIds = response.roleIds;
    open.value = true;
    title.value = "修改用户";
    form.password = "";
  });
};
  reset()
  const userId = row.userId || ids.value
  getUser(userId).then((response) => {
    form.value = response.data
    postOptions.value = response.posts
    roleOptions.value = response.roles
    form.value.postIds = response.postIds
    form.value.roleIds = response.roleIds
    open.value = true
    title.value = "修改用户"
    form.password = ""
  })
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["userRef"].validate(valid => {
  proxy.$refs["userRef"].validate((valid) => {
    if (valid) {
      if (form.value.userId != undefined) {
        updateUser(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
        updateUser(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addUser(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
        addUser(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  });
};
  })
}

getDeptTree();
getList();
getDeptTree()
getList()
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>

 zhitan-vue/src/views/system/user/profile/index.vue

@@ -1,87 +1,89 @@
<template>
   <div class="app-container">
      <el-row :gutter="20">
         <el-col :span="6" :xs="24">
            <el-card class="box-card">
               <template v-slot:header>
                 <div class="clearfix">
                   <span>个人信息</span>
                 </div>
               </template>
               <div>
                  <div class="text-center">
                     <userAvatar />
                  </div>
                  <ul class="list-group list-group-striped">
                     <li class="list-group-item">
                        <svg-icon icon-class="user" />用户名称
                        <div class="pull-right">{{ state.user.userName }}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="phone" />手机号码
                        <div class="pull-right">{{ state.user.phoneNumber }}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="email" />用户邮箱
                        <div class="pull-right">{{ state.user.email }}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="tree" />所属部门
                        <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="peoples" />所属角色
                        <div class="pull-right">{{ state.roleGroup }}</div>
                     </li>
                     <li class="list-group-item">
                        <svg-icon icon-class="date" />创建日期
                        <div class="pull-right">{{ state.user.createTime }}</div>
                     </li>
                  </ul>
               </div>
            </el-card>
         </el-col>
         <el-col :span="18" :xs="24">
            <el-card>
               <template v-slot:header>
                 <div class="clearfix">
                   <span>基本资料</span>
                 </div>
               </template>
               <el-tabs v-model="activeTab">
                  <el-tab-pane label="基本资料" name="userinfo">
                     <userInfo :user="state.user" />
                  </el-tab-pane>
                  <el-tab-pane label="修改密码" name="resetPwd">
                     <resetPwd />
                  </el-tab-pane>
               </el-tabs>
            </el-card>
         </el-col>
      </el-row>
   </div>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          <div>
            <div class="text-center">
              <userAvatar />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />用户名称
                <div class="pull-right">{{ state.user.userName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />手机号码
                <div class="pull-right">{{ state.user.phoneNumber }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email" />用户邮箱
                <div class="pull-right">{{ state.user.email }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" />所属部门
                <div class="pull-right" v-if="state.user.dept">
                  {{ state.user.dept.deptName }} / {{ state.postGroup }}
                </div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples" />所属角色
                <div class="pull-right">{{ state.roleGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />创建日期
                <div class="pull-right">{{ state.user.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <template v-slot:header>
            <div class="clearfix">
              <span>基本资料</span>
            </div>
          </template>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="state.user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Profile">
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";
import userAvatar from "./userAvatar"
import userInfo from "./userInfo"
import resetPwd from "./resetPwd"
import { getUserProfile } from "@/api/system/user"

const activeTab = ref("userinfo");
const activeTab = ref("userinfo")
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {}
});
  postGroup: {},
})

function getUser() {
  getUserProfile().then(response => {
    state.user = response.data;
    state.roleGroup = response.roleGroup;
    state.postGroup = response.postGroup;
  });
};
  getUserProfile().then((response) => {
    state.user = response.data
    state.roleGroup = response.roleGroup
    state.postGroup = response.postGroup
  })
}

getUser();
getUser()
</script>

 zhitan-vue/src/views/system/user/profile/resetPwd.vue

@@ -1,57 +1,64 @@
<template>
   <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
      <el-form-item label="旧密码" prop="oldPassword">
         <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
         <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
         <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="submit">保存</el-button>
  <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="旧密码" prop="oldPassword">
      <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password />
    </el-form-item>
    <el-form-item>
      <!-- <el-button type="primary" @click="submit">保存</el-button> -->
      <el-button type="danger" @click="close">关闭</el-button>
      </el-form-item>
   </el-form>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { updateUserPwd } from "@/api/system/user";
import { updateUserPwd } from "@/api/system/user"

const { proxy } = getCurrentInstance();
const { proxy } = getCurrentInstance()

const user = reactive({
  oldPassword: undefined,
  newPassword: undefined,
  confirmPassword: undefined
});
  confirmPassword: undefined,
})

const equalToPassword = (rule, value, callback) => {
  if (user.newPassword !== value) {
    callback(new Error("两次输入的密码不一致"));
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback();
    callback()
  }
};
}
const rules = ref({
  oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
  newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
  confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
});
  newPassword: [
    { required: true, message: "新密码不能为空", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
    { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" },
  ],
  confirmPassword: [
    { required: true, message: "确认密码不能为空", trigger: "blur" },
    { required: true, validator: equalToPassword, trigger: "blur" },
  ],
})

/** 提交按钮 */
function submit() {
  proxy.$refs.pwdRef.validate(valid => {
  proxy.$refs.pwdRef.validate((valid) => {
    if (valid) {
      updateUserPwd(user.oldPassword, user.newPassword).then(response => {
        proxy.$modal.msgSuccess("修改成功");
      });
      updateUserPwd(user.oldPassword, user.newPassword).then((response) => {
        proxy.$modal.msgSuccess("修改成功")
      })
    }
  });
};
  })
}
/** 关闭按钮 */
function close() {
  proxy.$tab.closePage();
};
  proxy.$tab.closePage()
}
</script>

 zhitan-vue/src/views/system/user/profile/userAvatar.vue

@@ -26,12 +26,7 @@
      <br />
      <el-row>
        <el-col :lg="2" :md="2">
          <el-upload
            action="#"
            :http-request="requestUpload"
            :show-file-list="false"
            :before-upload="beforeUpload"
          >
          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
            <el-button>
              选择
              <el-icon class="el-icon--right"><Upload /></el-icon>
@@ -51,7 +46,7 @@
          <el-button icon="RefreshRight" @click="rotateRight()"></el-button>
        </el-col>
        <el-col :lg="{ span: 2, offset: 6 }" :md="2">
          <el-button type="primary" @click="uploadImg()">提 交</el-button>
          <!-- <el-button type="primary" @click="uploadImg()">提 交</el-button> -->
        </el-col>
      </el-row>
    </el-dialog>
@@ -59,92 +54,92 @@
</template>

<script setup>
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
import { uploadAvatar } from "@/api/system/user";
import useUserStore from "@/store/modules/user";
import "vue-cropper/dist/index.css"
import { VueCropper } from "vue-cropper"
import { uploadAvatar } from "@/api/system/user"
import useUserStore from "@/store/modules/user"

const userStore = useUserStore();
const { proxy } = getCurrentInstance();
const userStore = useUserStore()
const { proxy } = getCurrentInstance()

const open = ref(false);
const visible = ref(false);
const title = ref("修改头像");
const open = ref(false)
const visible = ref(false)
const title = ref("修改头像")

//图片裁剪数据
const options = reactive({
  img: userStore.avatar,     // 裁剪图片的地址
  autoCrop: true,            // 是否默认生成截图框
  autoCropWidth: 200,        // 默认生成截图框宽度
  autoCropHeight: 200,       // 默认生成截图框高度
  fixedBox: true,            // 固定截图框大小 不允许改变
  outputType: "png",         // 默认生成截图为PNG格式
  filename: 'avatar',        // 文件名称
  previews: {}               //预览数据
});
  img: userStore.avatar, // 裁剪图片的地址
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 200, // 默认生成截图框宽度
  autoCropHeight: 200, // 默认生成截图框高度
  fixedBox: true, // 固定截图框大小 不允许改变
  outputType: "png", // 默认生成截图为PNG格式
  filename: "avatar", // 文件名称
  previews: {}, //预览数据
})

/** 编辑头像 */
function editCropper() {
  open.value = true;
  open.value = true
}
/** 打开弹出层结束时的回调 */
function modalOpened() {
  visible.value = true;
  visible.value = true
}
/** 覆盖默认上传行为 */
function requestUpload() {}
/** 向左旋转 */
function rotateLeft() {
  proxy.$refs.cropper.rotateLeft();
  proxy.$refs.cropper.rotateLeft()
}
/** 向右旋转 */
function rotateRight() {
  proxy.$refs.cropper.rotateRight();
  proxy.$refs.cropper.rotateRight()
}
/** 图片缩放 */
function changeScale(num) {
  num = num || 1;
  proxy.$refs.cropper.changeScale(num);
  num = num || 1
  proxy.$refs.cropper.changeScale(num)
}
/** 上传预处理 */
function beforeUpload(file) {
  if (file.type.indexOf("image/") == -1) {
    proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
    proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
  } else {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      options.img = reader.result;
      options.filename = file.name;
    };
      options.img = reader.result
      options.filename = file.name
    }
  }
}
/** 上传图片 */
function uploadImg() {
  proxy.$refs.cropper.getCropBlob(data => {
    let formData = new FormData();
    formData.append("avatarfile", data, options.filename);
    uploadAvatar(formData).then(response => {
      open.value = false;
      options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl;
      userStore.avatar = options.img;
      proxy.$modal.msgSuccess("修改成功");
      visible.value = false;
    });
  });
  proxy.$refs.cropper.getCropBlob((data) => {
    let formData = new FormData()
    formData.append("avatarfile", data, options.filename)
    uploadAvatar(formData).then((response) => {
      open.value = false
      options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl
      userStore.avatar = options.img
      proxy.$modal.msgSuccess("修改成功")
      visible.value = false
    })
  })
}
/** 实时预览 */
function realTime(data) {
  options.previews = data;
  options.previews = data
}
/** 关闭窗口 */
function closeDialog() {
  options.img = userStore.avatar;
  options.visible = false;
  options.img = userStore.avatar
  options.visible = false
}
</script>

<style lang='scss' scoped>
<style lang="scss" scoped>
.user-info-head {
  position: relative;
  display: inline-block;
@@ -168,4 +163,4 @@
  line-height: 110px;
  border-radius: 50%;
}
</style>
</style>

 zhitan-vue/src/views/system/user/profile/userInfo.vue

@@ -1,67 +1,77 @@
<template>
   <el-form ref="userRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户昵称" prop="nickName">
         <el-input v-model="form.nickName" maxlength="30" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phoneNumber">
         <el-input v-model="form.phoneNumber" maxlength="11" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
         <el-input v-model="form.email" maxlength="50" />
      </el-form-item>
      <el-form-item label="性别">
         <el-radio-group v-model="form.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
         </el-radio-group>
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="submit">保存</el-button>
  <el-form ref="userRef" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="用户昵称" prop="nickName">
      <el-input v-model="form.nickName" maxlength="30" />
    </el-form-item>
    <el-form-item label="手机号码" prop="phoneNumber">
      <el-input v-model="form.phoneNumber" maxlength="11" />
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email" maxlength="50" />
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="form.sex">
        <el-radio label="0">男</el-radio>
        <el-radio label="1">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <!-- <el-button type="primary" @click="submit">保存</el-button> -->
      <el-button type="danger" @click="close">关闭</el-button>
      </el-form-item>
   </el-form>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { updateUserProfile } from "@/api/system/user";
import { updateUserProfile } from "@/api/system/user"

const props = defineProps({
  user: {
    type: Object
  }
});
    type: Object,
  },
})

const { proxy } = getCurrentInstance();
const { proxy } = getCurrentInstance()

const form = ref({});
const form = ref({})
const rules = ref({
  nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
  email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
  phoneNumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
});
  email: [
    { required: true, message: "邮箱地址不能为空", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
  ],
  phoneNumber: [
    { required: true, message: "手机号码不能为空", trigger: "blur" },
    { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" },
  ],
})

/** 提交按钮 */
function submit() {
  proxy.$refs.userRef.validate(valid => {
  proxy.$refs.userRef.validate((valid) => {
    if (valid) {
      updateUserProfile(form.value).then(response => {
        proxy.$modal.msgSuccess("修改成功");
        props.user.phoneNumber = form.value.phoneNumber;
        props.user.email = form.value.email;
      });
      updateUserProfile(form.value).then((response) => {
        proxy.$modal.msgSuccess("修改成功")
        props.user.phoneNumber = form.value.phoneNumber
        props.user.email = form.value.email
      })
    }
  });
};
  })
}

/** 关闭按钮 */
function close() {
  proxy.$tab.closePage();
};
  proxy.$tab.closePage()
}

// 回显当前登录用户信息
watch(() => props.user, user => {
  if (user) {
    form.value = { nickName: user.nickName, phoneNumber: user.phoneNumber, email: user.email, sex: user.sex };
  }
},{ immediate: true });
watch(
  () => props.user,
  (user) => {
    if (user) {
      form.value = { nickName: user.nickName, phoneNumber: user.phoneNumber, email: user.email, sex: user.sex }
    }
  },
  { immediate: true }
)
</script>

 zhitan-vue/src/views/tool/gen/index.vue

@@ -1,156 +1,165 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="表名称" prop="tableName">
        <el-input
          v-model="queryParams.tableName"
          placeholder="请输入表名称"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="表描述" prop="tableComment">
        <el-input
          v-model="queryParams.tableComment"
          placeholder="请输入表描述"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" style="width: 308px">
        <el-date-picker
          v-model="dateRange"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  <div class="app-container page">
    <div class="form-card">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="表名称" prop="tableName">
          <el-input
            v-model="queryParams.tableName"
            placeholder="请输入表名称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="表描述" prop="tableComment">
          <el-input
            v-model="queryParams.tableComment"
            placeholder="请输入表描述"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="创建时间" style="width: 308px">
          <el-date-picker
            v-model="dateRange"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Download"
          :disabled="multiple"
          @click="handleGenTable"
          v-hasPermi="['tool:gen:code']"
        >生成</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="openCreateTable"
          v-hasRole="['admin']"
        >创建</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="Upload"
          @click="openImportTable"
          v-hasPermi="['tool:gen:import']"
        >导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleEditTable"
          v-hasPermi="['tool:gen:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['tool:gen:remove']"
        >删除</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="55"></el-table-column>
      <el-table-column label="序号" type="index" width="50" align="center">
        <template #default="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="表名称"
        align="center"
        prop="tableName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="表描述"
        align="center"
        prop="tableComment"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="实体"
        align="center"
        prop="className"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
      <el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
      <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="预览" placement="top">
            <el-button link type="primary" icon="View" @click="handlePreview(scope.row)" v-hasPermi="['tool:gen:preview']"></el-button>
          </el-tooltip>
          <el-tooltip content="编辑" placement="top">
            <el-button link type="primary" icon="Edit" @click="handleEditTable(scope.row)" v-hasPermi="['tool:gen:edit']"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['tool:gen:remove']"></el-button>
          </el-tooltip>
          <el-tooltip content="同步" placement="top">
            <el-button link type="primary" icon="Refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['tool:gen:edit']"></el-button>
          </el-tooltip>
          <el-tooltip content="生成代码" placement="top">
            <el-button link type="primary" icon="Download" @click="handleGenTable(scope.row)" v-hasPermi="['tool:gen:code']"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <div class="table-bg-style">
      <div class="table-box">
        <div style="margin-bottom: 12px">
          <el-button
            type="primary"
            plain
            icon="Download"
            :disabled="multiple"
            @click="handleGenTable"
            v-hasPermi="['tool:gen:code']"
            >生成</el-button
          >
          <el-button type="primary" plain icon="Plus" @click="openCreateTable" v-hasRole="['admin']">创建</el-button>
          <el-button type="info" plain icon="Upload" @click="openImportTable" v-hasPermi="['tool:gen:import']"
            >导入</el-button
          >
          <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="single"
            @click="handleEditTable"
            v-hasPermi="['tool:gen:edit']"
            >修改</el-button
          >
          <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['tool:gen:remove']"
            >删除</el-button
          >
        </div>
        <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" align="center" width="60"></el-table-column>
          <el-table-column label="序号" type="index" width="60" align="center">
            <template #default="scope">
              <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="表名称" align="center" prop="tableName" :show-overflow-tooltip="true" />
          <el-table-column label="表描述" align="center" prop="tableComment" :show-overflow-tooltip="true" />
          <el-table-column label="实体" align="center" prop="className" :show-overflow-tooltip="true" />
          <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
          <el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
          <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="预览" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="View"
                  @click="handlePreview(scope.row)"
                  v-hasPermi="['tool:gen:preview']"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="编辑" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="Edit"
                  @click="handleEditTable(scope.row)"
                  v-hasPermi="['tool:gen:edit']"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="Delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['tool:gen:remove']"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="同步" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="Refresh"
                  @click="handleSynchDb(scope.row)"
                  v-hasPermi="['tool:gen:edit']"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="生成代码" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="Download"
                  @click="handleGenTable(scope.row)"
                  v-hasPermi="['tool:gen:code']"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <!-- 预览界面 -->
    <el-dialog :title="preview.title" v-model="preview.open" width="80%" top="5vh" append-to-body class="scrollbar">
      <el-tabs v-model="preview.activeName">
        <el-tab-pane
          v-for="(value, key) in preview.data"
          :label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
          :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
          :label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))"
          :name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))"
          :key="value"
        >
          <el-link :underline="false" icon="DocumentCopy" v-copyText="value" v-copyText:callback="copyTextSuccess" style="float:right">&nbsp;复制</el-link>
          <el-link
            :underline="false"
            icon="DocumentCopy"
            v-copyText="value"
            v-copyText:callback="copyTextSuccess"
            style="float: right"
            >&nbsp;复制</el-link
          >
          <pre>{{ value }}</pre>
        </el-tab-pane>
      </el-tabs>
@@ -161,139 +170,151 @@
</template>

<script setup name="Gen">
import { listTable, previewTable, delTable, genCode, synchDb } from "@/api/tool/gen";
import router from "@/router";
import importTable from "./importTable";
import createTable from "./createTable";
import { listTable, previewTable, delTable, genCode, synchDb } from "@/api/tool/gen"
import router from "@/router"
import importTable from "./importTable"
import createTable from "./createTable"

const route = useRoute();
const { proxy } = getCurrentInstance();
const route = useRoute()
const { proxy } = getCurrentInstance()

const tableList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const tableNames = ref([]);
const dateRange = ref([]);
const uniqueId = ref("");
const tableList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const tableNames = ref([])
const dateRange = ref([])
const uniqueId = ref("")

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    tableName: undefined,
    tableComment: undefined
    tableComment: undefined,
  },
  preview: {
    open: false,
    title: "代码预览",
    data: {},
    activeName: "domain.java"
  }
});
    activeName: "domain.java",
  },
})

const { queryParams, preview } = toRefs(data);
const { queryParams, preview } = toRefs(data)

onActivated(() => {
  const time = route.query.t;
  const time = route.query.t
  if (time != null && time != uniqueId.value) {
    uniqueId.value = time;
    queryParams.value.pageNum = Number(route.query.pageNum);
    dateRange.value = [];
    proxy.resetForm("queryForm");
    getList();
    uniqueId.value = time
    queryParams.value.pageNum = Number(route.query.pageNum)
    dateRange.value = []
    proxy.resetForm("queryForm")
    getList()
  }
})

/** 查询表集合 */
function getList() {
  loading.value = true;
  listTable(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
    tableList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
  loading.value = true
  listTable(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
    tableList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  queryParams.value.pageNum = 1
  getList()
}
/** 生成代码操作 */
function handleGenTable(row) {
  const tbNames = row.tableName || tableNames.value;
  const tbNames = row.tableName || tableNames.value
  if (tbNames == "") {
    proxy.$modal.msgError("请选择要生成的数据");
    return;
    proxy.$modal.msgError("请选择要生成的数据")
    return
  }
  if (row.genType === "1") {
    genCode(row.tableName).then(response => {
      proxy.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath);
    });
    genCode(row.tableName).then((response) => {
      proxy.$modal.msgSuccess("成功生成到自定义路径：" + row.genPath)
    })
  } else {
    proxy.$download.zip("/tool/gen/batchGenCode?tables=" + tbNames, "ruoyi.zip");
    proxy.$download.zip("/tool/gen/batchGenCode?tables=" + tbNames, "ruoyi.zip")
  }
}
/** 同步数据库操作 */
function handleSynchDb(row) {
  const tableName = row.tableName;
  proxy.$modal.confirm('确认要强制同步"' + tableName + '"表结构吗？').then(function () {
    return synchDb(tableName);
  }).then(() => {
    proxy.$modal.msgSuccess("同步成功");
  }).catch(() => {});
  const tableName = row.tableName
  proxy.$modal
    .confirm('确认要强制同步"' + tableName + '"表结构吗？')
    .then(function () {
      return synchDb(tableName)
    })
    .then(() => {
      proxy.$modal.msgSuccess("同步成功")
    })
    .catch(() => {})
}
/** 打开导入表弹窗 */
function openImportTable() {
  proxy.$refs["importRef"].show();
  proxy.$refs["importRef"].show()
}
/** 打开创建表弹窗 */
function openCreateTable() {
  proxy.$refs["createRef"].show();
  proxy.$refs["createRef"].show()
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
  dateRange.value = []
  proxy.resetForm("queryRef")
  handleQuery()
}
/** 预览按钮 */
function handlePreview(row) {
  previewTable(row.tableId).then(response => {
    preview.value.data = response.data;
    preview.value.open = true;
    preview.value.activeName = "domain.java";
  });
  previewTable(row.tableId).then((response) => {
    preview.value.data = response.data
    preview.value.open = true
    preview.value.activeName = "domain.java"
  })
}
/** 复制代码成功 */
function copyTextSuccess() {
  proxy.$modal.msgSuccess("复制成功");
  proxy.$modal.msgSuccess("复制成功")
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.tableId);
  tableNames.value = selection.map(item => item.tableName);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
  ids.value = selection.map((item) => item.tableId)
  tableNames.value = selection.map((item) => item.tableName)
  single.value = selection.length != 1
  multiple.value = !selection.length
}
/** 修改按钮操作 */
function handleEditTable(row) {
  const tableId = row.tableId || ids.value[0];
  router.push({ path: "/tool/gen-edit/index/" + tableId, query: { pageNum: queryParams.value.pageNum } });
  const tableId = row.tableId || ids.value[0]
  router.push({ path: "/tool/gen-edit/index/" + tableId, query: { pageNum: queryParams.value.pageNum } })
}
/** 删除按钮操作 */
function handleDelete(row) {
  const tableIds = row.tableId || ids.value;
  proxy.$modal.confirm('是否确认删除表编号为"' + tableIds + '"的数据项？').then(function () {
    return delTable(tableIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
  const tableIds = row.tableId || ids.value
  proxy.$modal
    .confirm('是否确认删除表编号为"' + tableIds + '"的数据项？')
    .then(function () {
      return delTable(tableIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}

getList();
getList()
</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
</style>