dc-ui/src/views/model/asset/addParams.vue

<template>
  <div class="app-container">
    <el-collapse class="paramsCollapse" v-model="activeNames">
      <el-collapse-item title="基本信息" name="1">
        <el-form :inline="true" :model="addForm" class="demo-form-inline">
          <el-form-item label="资产编号">
            <el-input
              v-model="addForm.num"
              placeholder="资产编号"
              clearable
              readonly
            />
          </el-form-item>
          <el-form-item label="资产名称">
            <el-input v-model="addForm.name" placeholder="资产名称" clearable />
          </el-form-item>
          <el-form-item label="组成设备">
            <el-select
              v-model="addForm.device"
              multiple
              filterable
              allow-create
              default-first-option
              :reserve-keyword="false"
              placeholder="组成设备"
              style="width: 240px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="selectParams">选择参数</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="参数列表" name="2">
        <vxe-table
          class="tableCollapse"
          border
          ref="tableRef"
          max-height="400"
          :row-config="{ isHover: true }"
          :loading="loading"
          :data="tableListData"
        >
          <vxe-column type="checkbox" width="60"></vxe-column>
          <vxe-column field="role" title="参数编码"></vxe-column>
          <vxe-column
            field="address"
            title="参数名称"
            :filters="addressOptions"
            :filter-method="filterAddressMethod"
            :filter-recover-method="filterAddressRecoverMethod"
          >
            <template #filter="{ $panel, column }">
              <vxe-input
                class="filterInput"
                v-for="(option, index) in column.filters"
                :key="index"
                v-model="option.data"
                @input="$panel.changeOption($event, !!option.data, option)"
                @keyup.enter="$panel.confirmFilter()"
                placeholder="参数名称"
                size="mini"
              ></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="youxiao" title="是否有效">
            <template #default="{ row }">
              <vxe-checkbox v-model="row.youxiao"></vxe-checkbox>
            </template>
          </vxe-column>
          <vxe-column field="kekong" title="是否可控">
            <template #default="{ row }">
              <vxe-checkbox v-model="row.kekong"></vxe-checkbox>
            </template>
          </vxe-column>
        </vxe-table>
      </el-collapse-item>
    </el-collapse>
    <el-dialog
      class="addDialog"
      v-model="dialogTableVisible"
      title="选择参数"
      width="900"
    >
      <vxe-table
        class="tableDialog"
        border
        ref="tableRef"
        max-height="400"
        :row-config="{ isHover: true }"
        :loading="loading"
        :data="tableData"
      >
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column field="id" title="设备编码" sortable></vxe-column>
        <vxe-column field="name" title="设备名称"></vxe-column>
        <vxe-column field="role" title="参数编码"></vxe-column>
        <vxe-column
          field="age"
          title="参数模版名称"
          :filters="ageOptions"
          :filter-method="filterAgeMethod"
          :filter-recover-method="filterAgeRecoverMethod"
        >
          <template #filter="{ $panel, column }">
            <vxe-input
              class="filterInput"
              v-for="(option, index) in column.filters"
              :key="index"
              v-model="option.data"
              @input="$panel.changeOption($event, !!option.data, option)"
              @keyup.enter="$panel.confirmFilter()"
              placeholder="参数模版名称"
              size="mini"
            ></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="address"
          title="参数名称"
          :filters="addressOptions"
          :filter-method="filterAddressMethod"
          :filter-recover-method="filterAddressRecoverMethod"
        >
          <template #filter="{ $panel, column }">
            <vxe-input
              class="filterInput"
              v-for="(option, index) in column.filters"
              :key="index"
              v-model="option.data"
              @input="$panel.changeOption($event, !!option.data, option)"
              @keyup.enter="$panel.confirmFilter()"
              placeholder="参数名称"
              size="mini"
            ></vxe-input>
          </template>
        </vxe-column>
        <vxe-column
          field="sex"
          title="分区"
          :filter-multiple="false"
          :filters="sexOptions"
        ></vxe-column>
      </vxe-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogTableVisible = false">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
const activeNames = ref(["1", "2"]);
const route = useRoute();
const dialogTableVisible = ref(false);
const addForm = reactive({
  num: route.query.assetCode,
  name: "",
  device: [],
});
const options = [
  {
    value: "HTML",
    label: "HTML",
  },
  {
    value: "CSS",
    label: "CSS",
  },
  {
    value: "JavaScript",
    label: "JavaScript",
  },
];
const tableRef = ref();
const loading = ref(false);
const tableData = ref([
  {
    id: 10001,
    name: "Test1",
    role: "Develop",
    sex: "Man",
    age: 28,
    address: "test",
  },
  {
    id: 10002,
    name: "Test2",
    role: "admin",
    sex: "Man",
    age: 29,
    address: "asd",
  },
  {
    id: 10003,
    name: "Test3",
    role: "useer",
    sex: "Man",
    age: 22,
    address: "qsx",
  },
]);
const tableListData = ref([
  {
    id: 10001,
    name: "Test1",
    role: "Develop",
    sex: "Man",
    age: 28,
    address: "test",
    youxiao: true,
    kekong: false,
  },
  {
    id: 10002,
    name: "Test2",
    role: "admin",
    sex: "Man",
    age: 29,
    address: "asd",
    youxiao: false,
    kekong: true,
  },
  {
    id: 10003,
    name: "Test3",
    role: "useer",
    sex: "Man",
    age: 22,
    address: "qsx",
    youxiao: false,
    kekong: false,
  },
]);
const sexOptions = ref([
  { label: "高", value: "Man" },
  { label: "中", value: "Women" },
]);
const ageOptions = ref([{ data: "" }]);
const addressOptions = ref([{ data: "" }]);
const filterAgeMethod = ({ option, row }) => {
  return row.age === Number(option.data);
};
const filterAgeRecoverMethod = ({ option }) => {
  // 如果是自定义筛选模板，当为点击确认时，该选项将被恢复为默认值
  option.data = "";
};
const filterAddressMethod = ({ option, row }) => {
  return row.address === option.data;
};
const filterAddressRecoverMethod = ({ option }) => {
  // 如果是自定义筛选模板，当为点击确认时，该选项将被恢复为默认值
  option.data = "";
};
onMounted(() => {});
function selectParams() {
  //选择参数
  dialogTableVisible.value = true;
}
</script>
<style scoped>
.paramsCollapse {
  .tableCollapse {
    .filterInput {
      width: 120px;
      margin: 10px;
    }
  }
}
:deep(.addDialog) {
  .tableDialog {
    .filterInput {
      width: 120px;
      margin: 10px;
    }
  }
}
</style>