SZYGM1.0/src/views/systemSettings/queryTemplate/queryTemplateColumn.vue

<template>
  <div class="airportInfo scroll-y">
    <div class="wrap">
      <Minheader :is-auth="true" :is-statuser="true" @addForm="addForm">
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">查询项设置</div>
          </div>
        </template></Minheader
      >
      <div class="app-containers">
        <DataTable
          :tableHeader="state.list"
          :tableData="tableData"
          :tableBtnGroup="tableBtnGroup"
          :tableProperty="{ rowKey: 'ID' }"
          @btnClick="btnClick"
        />
      </div>
      <Dialog
        width="734px"
        :flag="flag"
        :type="type"
        :msgTitle="msgTitle"
        @resetForm="resetForm"
        @delRest="delRest"
      >
        <div class="diacont">
          <el-form :model="tableForm">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="名称" size="default">
                  <el-input v-model="tableForm.name" placeholder="请输入名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="标签" size="default">
                  <el-input
                    v-model="tableForm.china"
                    placeholder="请输入标签"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="描述" size="default">
                  <el-select
                    style="width: 100%"
                    v-model="tableForm.englin"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptionser"
                      :key="item.v ? item.v : item.planDepartureApt"
                      :label="item.k ? item.k : item.planDepartureApt"
                      :value="item.v ? item.v : item.planDepartureApt"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="排序" size="default">
                  <el-select
                    style="width: 100%"
                    v-model="tableForm.two"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptionser"
                      :key="item.v ? item.v : item.planDepartureApt"
                      :label="item.k ? item.k : item.planDepartureApt"
                      :value="item.v ? item.v : item.planDepartureApt"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="过滤" size="default">
                  <el-select
                    style="width: 100%"
                    v-model="tableForm.three"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptionser"
                      :key="item.v ? item.v : item.planDepartureApt"
                      :label="item.k ? item.k : item.planDepartureApt"
                      :value="item.v ? item.v : item.planDepartureApt"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="显示" size="default">
                  <el-select
                    style="width: 100%"
                    v-model="tableForm.text"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptionser"
                      :key="item.v ? item.v : item.planDepartureApt"
                      :label="item.k ? item.k : item.planDepartureApt"
                      :value="item.v ? item.v : item.planDepartureApt"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="数据类型" size="default">
                  <el-select
                    style="width: 100%"
                    v-model="tableForm.text1"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptionser"
                      :key="item.v ? item.v : item.planDepartureApt"
                      :label="item.k ? item.k : item.planDepartureApt"
                      :value="item.v ? item.v : item.planDepartureApt"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="分组" size="default">
                  <el-select
                    style="width: 100%"
                    v-model="tableForm.text2"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptionser"
                      :key="item.v ? item.v : item.planDepartureApt"
                      :label="item.k ? item.k : item.planDepartureApt"
                      :value="item.v ? item.v : item.planDepartureApt"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="下拉" size="default">
                  <el-select
                    style="width: 100%"
                    v-model="tableForm.text3"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptionser"
                      :key="item.v ? item.v : item.planDepartureApt"
                      :label="item.k ? item.k : item.planDepartureApt"
                      :value="item.v ? item.v : item.planDepartureApt"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合计" size="default">
                  <el-select
                    style="width: 100%"
                    v-model="tableForm.text4"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptionser"
                      :key="item.v ? item.v : item.planDepartureApt"
                      :label="item.k ? item.k : item.planDepartureApt"
                      :value="item.v ? item.v : item.planDepartureApt"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="字段排序" size="default">
                  <el-select
                    style="width: 100%"
                    v-model="tableForm.text5"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tableOptionser"
                      :key="item.v ? item.v : item.planDepartureApt"
                      :label="item.k ? item.k : item.planDepartureApt"
                      :value="item.v ? item.v : item.planDepartureApt"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </Dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import DataTable from "@/components/tableTemp/index.vue";
import Minheader from "@/components/minheader/index.vue";
import Dialog from "@/components/dialog/index.vue";
const flag = ref<Boolean>(false); //弹窗开关
const type = ref<String>(""); //判断是否删除
const msgTitle = ref<String>("新增查询项"); //弹窗标题
const tableColsCopys = reactive<Object>({}); //弹窗
const tableOptionser = ref<Array>([]); //弹窗下拉
const tableForm = reactive({
  name: "",
  china: "",
  englin: "",
  two: "",
  three: "",
  text: "",
  text1: "",
  text2: "",
  text3: "",
  text4: "",
  text5: "",
}); //弹窗内容
//列表
const tableData = ref([
  {
    name: "测试",
    china: "测试",
    englin: "测试",
    two: "测试",
    three: "测试",
    text: "测试",
    text1: "测试",
    text2: "测试",
    text3: "测试",
    text4: "测试",
    text5: "测试",
  },
  {
    name: "测试",
    china: "测试",
    englin: "测试",
    two: "测试",
    three: "测试",
    text: "测试",
    text1: "测试",
    text2: "测试",
    text3: "测试",
    text4: "测试",
    text5: "测试",
  },
  {
    name: "测试",
    china: "测试",
    englin: "测试",
    two: "测试",
    three: "测试",
    text: "测试",
    text1: "测试",
    text2: "测试",
    text3: "测试",
    text4: "测试",
    text5: "测试",
  },
]);
//表头
const state = reactive({
  list: [
    { label: "名称", key: "name" },
    { label: "标签", key: "china" },
    { label: "描述", key: "englin" },
    { label: "排序", key: "two" },
    { label: "过滤", key: "three" },
    { label: "显示", key: "text" },
    { label: "分组", key: "text1" },
    { label: "下拉", key: "text2" },
    { label: "数据类型", key: "text3" },
    { label: "字段排位", key: "text4" },
    { label: "合计", key: "text5" },
  ],
  listLoading: true,
});
const tableBtnGroup = ref([
  {
    name: "编辑",
    className: "editBtn",
    param: 2,
  },
  {
    name: "删除",
    className: "delBtn",
    param: 3,
  },
]);
//新增
const addForm = () => {
  msgTitle.value = "新增查询项";
  flag.value = true;
  type.value = "";
};
//取消
const resetForm = () => {
  flag.value = false;
  tableForm.name = "";
  tableForm.china = "";
  tableForm.englin = "";
  tableForm.two = "";
  tableForm.three = "";
  tableForm.text = "";
  tableForm.text1 = "";
  tableForm.text2 = "";
  tableForm.text3 = "";
  tableForm.text4 = "";
  tableForm.text5 = "";
};
//编辑
// const editDialog = (data) => {
//   msgTitle.value = "编辑航司信息维护";
//   flag.value = true;
//   type.value = "";
//   tableForm.name = data.name;
//   tableForm.china = data.china;
//   tableForm.englin = data.englin;
//   tableForm.two = data.two;
//   tableForm.three = data.three;
//   tableForm.text = data.text;
// };
//编辑-删除
const btnClick = (row, index, param) => {
  if (param === 2) {
    msgTitle.value = "编辑查询项";
    flag.value = true;
    type.value = "";
    tableForm.name = index.name;
    tableForm.china = index.china;
    tableForm.englin = index.englin;
    tableForm.two = index.two;
    tableForm.three = index.three;
    tableForm.text = index.text;
    tableForm.text1 = index.text1;
    tableForm.text2 = index.text2;
    tableForm.text3 = index.text3;
    tableForm.text4 = index.text4;
    tableForm.text5 = index.text5;
  } else if (param === 3) {
    msgTitle.value = "删除查询项";
    flag.value = true;
    type.value = "del";
  } else if (param === 4) {
  }
};
//删除
const eleDialog = () => {
  msgTitle.value = "删除查询项";
  flag.value = true;
  type.value = "del";
};
//删除
const delRest = () => {
  flag.value = false;
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  width: 100px;
}
.app-containers {
  height: calc(100vh - 180px);
}
</style>