全局搜索样式调整,家谱加上页码

Tcsm

2023-09-19 b35a804358de7849f42bcdae934c236d13e3f233

 ruoyi-ui/src/views/search/index.vue

@@ -1,18 +1,13 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="" prop="phone wx qq twitter isAlways remark" >
    <el-form  ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="关键字" prop="keyword" >
        <el-input
          v-model:phone="queryParams.phone"
          v-model:wx="queryParams.wx"
          v-model:qq="queryParams.qq"
          v-model:twitter="queryParams.twitter"
          v-model:isAlways="queryParams.isAlways"
          v-model:remark="queryParams.remark"
          placeholder=" "
          v-model="keyword"
          placeholder="请输入搜索关键字"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery">
          @keyup.enter.native="getList">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>

@@ -35,7 +30,7 @@
      </el-form-item>

      <el-form-item>
        <el-button size="mini" @click="handleQuery" style=" width: 67px;height: 27px;background: #FFDDE3;
        <el-button size="mini" @click="getList" style=" width: 67px;height: 27px;background: #FFDDE3;
            border-radius: 7px 7px 7px 7px;opacity: 1; " >搜索</el-button>
        <el-button  size="mini" @click="resetQuery" style=" width: 67px;height: 27px;background: #FFDDE3;
            border-radius: 7px 7px 7px 7px;opacity: 1; ">重置</el-button>
@@ -43,42 +38,28 @@
    </el-form>
    <span style="font-size:16px">搜索结果如下：</span>
    <el-divider />

    <el-table v-loading="loading" :data="searchList" :row-key="getRowId" ref="multipleTable" @selection-change="handleSelectionChange"  :row-class-name="tableRowClassName" style="background: #FFEFF2;  border-radius: 14px 14px 14px 14px;">
    <!-- 背景图片 -->
    <div class="background-image"><img src="../../assets/images/searchEmpty.png" v-if="showContent === 'image'" ></div>
    <el-table v-loading="loading"  v-if="showContent === 'table'" :data="searchList" :row-key="getRowId" ref="multipleTable" @selection-change="handleSelectionChange"  :row-class-name="tableRowClassName" style="background: #FFEFF2;  border-radius: 14px 14px 14px 14px;">
<!--      <el-table-column type="selection" :reserve-selection="true" width="55"  align="center" />-->
      <el-table-column fixed label="序号" sortable type="index" align="center" :index="(queryParams.pageNum-1)*queryParams.pageSize+1" width="60"/>
      <el-table-column label="标识" prop="type" sortable :show-overflow-tooltip="true" width="120" align="center" >
        <template slot-scope="scope">{{scope.row.type? scope.row.type: '————'}}</template>
      <el-table-column label="所在模块" prop="ctTableName" sortable :show-overflow-tooltip="true" width="120" align="center" >
        <template slot-scope="scope">{{scope.row.ctTableName? scope.row.ctTableName: '————'}}</template>
        <!--        <template slot-scope="scope">{{ getSrc1(scope.row.type) }}</template>-->
      </el-table-column>
      <el-table-column label="字段" prop="name" sortable  width="120" align="center" >
        <template slot-scope="scope">{{scope.row.name? scope.row.name: '————'}}</template>
      <el-table-column label="字段" prop="remark" sortable  width="120" align="center" >
        <template slot-scope="scope">{{scope.row.remark? scope.row.remark: '————'}}</template>
      </el-table-column>
      <el-table-column label="时间" prop="getDate" sortable width="170" align="center" >
        <template slot-scope="scope">{{scope.row.getDate? scope.row.getDate: '————'}}</template>
      </el-table-column>
      <el-table-column label="位置" prop="location" sortable width="170" align="center" >
        <template slot-scope="scope">{{scope.row.location? scope.row.location: '————'}}</template>
      <el-table-column label="位置" prop="by5" sortable width="170" align="center" >
        <template slot-scope="scope">{{scope.row.by5 ? scope.row.by5: '————'}}</template>
      </el-table-column>

      <!--      </el-table-column>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:role:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:role:remove']"
          >删除</el-button>

          <el-button
            size="mini"
            type="text"
@@ -89,21 +70,15 @@
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      style="background: #FEF7FC;"
      @pagination="getList"
    />
<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"-->
<!--      style="background: #FEF7FC;"-->
<!--      @pagination="getList"-->
<!--    />-->



    <!-- 分配角色数据权限对话框 -->
    <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>

    </el-dialog>

  </div>
</template>
@@ -115,19 +90,24 @@


//导入接口函数
import {listHonor,listType,enload, addHonor,updateHonor, delHonor,uploadPic,getCategory} from "@/api/honor/index";
import {getSearch} from "@/api/search/index";

import { Notification, MessageBox, Message, Loading } from 'element-ui'
export default {
  computed: {
    showContent() {
      if (this.keyword ==='') {
        return 'image';
      } else {
        return 'table';
      }
    },
  },
  name: "index",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      // 遮罩层
      disabled: false,

      loading: true,
      formData:[],
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
@@ -138,9 +118,9 @@
      showSearch: true,
      // 总条数
      total: 0,
      // 荣誉表格数据
      // 搜索表格数据
      searchList: [],
      typeList:[],
      keyword:'',
      // 弹出层标题
      title: "",
      // 是否显示弹出层
@@ -153,113 +133,29 @@
      deptNodeAll: false,
      // 日期范围
      dateRange: [],
      // 数据范围选项
      fot:['.bmp','.jpg','.jpeg','.png','.tif','.gif','.pcx','.tga','.exif','.fpx',
        '.svg','.psd','.cdr','.pcd','.dxf','.ufo','.eps','.ai','.aw','.WMF','.webp','.apng'],
      fileList:[],
      fileListOther:[],
      dsb:true,
      btn:false,
      fit:['fill'],
      uploading: false,
      formDat: {
        //荣誉证书记录
        id:undefined,
        type:undefined,
        ctTableName:undefined,
        createTime:undefined,
        name:undefined,
        idNo:undefined,
        grade:undefined,
        validityDate:undefined,
        getDate:undefined,
        location:undefined,
        by5:undefined,
        remark:undefined,
        url: undefined,

      },
      // 菜单列表
      menuOptions: [],
      // 部门列表
      deptOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type:undefined,
        grade:undefined,
        name:undefined,
        remark:undefined
      },
      // searchVal:"",

      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 表单校验
      rules: {
        createTime: [{
          required: true,
          message: '请输入创建时间',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请输入类型',
          trigger: 'blur'
        }],
        name: [{
          // required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        grade: [{
          required: true,
          message: '请输入级别',
          trigger: 'blur'
        }],
        idNo: [{
          required: true,
          message: '请输入证件号/专业',
          trigger: 'blur'
        }],
        validityDate: [{
          // required: true,
          message: '请输入有效时间',
          trigger: 'blur'
        }],
        getDate: [{
          // required: true,
          message: '请输入获得时间',
          trigger: 'blur'
        }],
        location: [{
          // required: true,
          message: '请输入存放位置',
          trigger: 'blur'
        }],
        remark: [{
          // required: true,
          message: '请输入备注',
          trigger: 'blur'
        }],
      },
      selected:'',
      typeOptions: [],
      newOption: undefined,
      showInput: true,
      typeOption:[
        {value:'证件',label:'证件'},
        {value:'荣誉',label:'荣誉'},
        {value:'资质',label:'资质'},]
      showTable: false,

    };
  },
  created() {
    this.getList();
    this.getTypeOptions();
  },
  // created() {
  //   // this.getList();
  // },

  methods: {
    // 取消按钮
    cancelData() {
@@ -275,121 +171,23 @@
        return "statistics-warning-row";
      }
    },
    //名称
    addNewOption() {
      const newOption = this.newOption.trim();
      if (newOption && !this.typeOptions.includes(newOption)) {
        this.typeOptions.push(newOption);
        this.$set(this.formDat, 'name', newOption); // 更新formDat.type的值为新的选项
      }
    },
    /** 查询记录列表 */
    getList() {
      this.loading = true;
      console.log(this.queryParams)
      console.log("1")
      this.queryParams.happenStartTime = this.dateRange.length > 0 && this.dateRange[0]
      this.queryParams.happenEndTime = this.dateRange.length > 0 && this.dateRange[1]
      //  listProperty(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
      listHonor(this.queryParams).then(response => {

      const keyword = this.keyword
      getSearch({keyword}).then(response => {
          //  alert(123)
          //   console.log(response.data)
          this.honorList = response.data.data;

          this.total = response.data.total;
          this.loading = false;
        }
      );
      listType(this.queryParams).then(response => {
          this.typeList = response.data;
          this.total = response.data.total;
          // console.log( this.typeList )
          // 在回调函数中调用 getTypeOptions()
          this.getTypeOptions();
        console.log("接口返回的数据：", response.data);
          this.searchList = response.data;
        console.log("赋值后的searchList：", this.searchList);
          this.loading = false;
        }
      );
    },
    getTypeOptions() {
      const filteredOptions = this.typeList.filter(item => typeof item === 'string' && item !== '');

      const uniqueOptions = {};

      this.typeOptions = filteredOptions.reduce((options, option) => {
        if (!uniqueOptions[option]) {
          uniqueOptions[option] = true;
          options.push({
            label: option,
            value: option
          });
        }
        return options;
      }, []);

    },
    /** 查询类别信息 */
    // getCateInfor()
    // {
    //   let _this = this
    //   getCategory().then(response=>{
    //
    //     // response.data.itemValues.replace("{","").replace("}","").split(",").map(elem=>{
    //     //   _this.typeOptions.push({"label":elem.split(":")[0], "value":elem.split(":")[0]})
    //     response.data.itemValues.replace("{", "").replace("}", "").split(",").map(elem => {
    //       const label = elem.split(":")[0].trim();
    //       const value = parseInt(elem.split(":")[1].trim());
    //       _this.typeOptions.push({ "label": label, "value": value });
    //     })
    //   })
    // },
    //类别选择
    getSrc1(type){
      if(type===0){
        return '证件'
      }else if(type===1){
        return '荣誉'
      }else if(type===2){
        return '资质'
      }
    },
    //名称选择
    getSrc(name) {
      if (name === 1){
        return '出生证'
      }else if(name === 2){
        return '学生证'
      }else if(name === 3){
        return '毕业证'
      }else if(name === 4){
        return '结婚证'
      }else if(name === 5){
        return '户口簿'
      }else if(name === 6){
        return '独生子女证'
      }else if(name === 7){
        return '高级职称'
      }else if(name === 8){
        return '护照'
      }else if(name === 9){
        return '通行证'
      }else {
        return '其它'
      }
    },

    handleRemove(file) {
      for(let i = 0; i < this.fileList.length; i++)
      {
        if(this.fileList[i].url==file.url)
          this.$delete(this.fileList,i);
      }
    },
    handleRemoveFile(file) {
      for(let i = 0; i < this.fileListOther.length; i++)
      {
        if(this.fileListOther[i].url==file.url)
          this.$delete(this.fileListOther,i);
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
@@ -403,8 +201,7 @@
    cancelDataScope() {
      this.openDataScope = false;
      this.reset();
    },
    // 表单重置
    },// 表单重置
    reset() {
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([]);
@@ -427,6 +224,7 @@
        };
      this.resetForm("form");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
@@ -436,8 +234,8 @@
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
      this.keyword = '';
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
@@ -455,12 +253,6 @@
    // },


    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加证件/荣誉/资质信息";
    },
    /** 查看详细信息 */
    handleCheck(row){
      const id = row.id;
@@ -480,122 +272,8 @@
    },


    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /** 提交按钮（数据权限） */
    submitDataScope: function() {


      let ul = this.fileList.map(function (elem){
        return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
      }).join(",")
      let uls = this.fileListOther.map(function (elem){
        return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
      }).join(",")
      this.formDat.url = ul+","+uls
      this.$refs["elForm"].validate(valid => {
        if (valid) {

          addHonor(this.formDat).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          });
        }
      });
      // 清空formDat对象的数据
      Object.keys(this.formDat).forEach(key => {
        this.formDat[key] = '';
      });
      for(let i = 0; i <= this.fileList.length; i++)
      {
        this.handleRemove(this.fileList[0]);
      }
      for(let i = 0; i < this.fileListOther.length; i++){
        this.handleRemoveFile(this.fileListOther[0]);
      }
    },
    requestUpload(params)
    {
      var file = params.file;
      var formData = new FormData();
      formData.append('uploadFile', file);
      let _this = this
      this.uploading = true;
      uploadPic(formData).then(response => {
        let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
        this.uploading = false;
        this.$modal.msgSuccess("上传成功");
        if(_this.fot.includes(pth) === true)
        {
          _this.fileList.push({name:response.data.fileName, "url":response.data.url})

        }

        else{
          _this.fileListOther.push({name:response.data.fileName, url:response.data.url})

        }
      })

    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const Ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除数据项？').then(function() {
        return delHonor(Ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const Ids = this.ids;

      if(Ids.length==0)
      {
        this.download('/zHonor/export', {
          ...this.queryParams
        }, `zHonor_${new Date().getTime()}.xlsx`)
      }else{
        this.download('/zHonor/export1/'+Ids, {

        }, `zHonor_${new Date().getTime()}.xlsx`)
      }
    },

    handleExportTemplate(){
      this.download('/zHonor/model', {

      }, `zHonor_${new Date().getTime()}.xlsx`)
    },
    /** 导入操作*/
    handleEnport(params){
      var file = params.file;
      var formData = new FormData();
      formData.append('excelImport', file);
      let _this = this

      enload(formData).then(response => {
        _this.getList();
        Message({ message: "导入成功", type: 'warning' })

      }).catch(() => { Message({ message: "导入失败", type: 'error' })});

    }
  },
  watch: {
    type(value) {
      if (value === '') {
        this.showInput = true;
      } else {
        this.showInput = false;
      }
    }
  }

};
</script>
<style>
@@ -610,7 +288,10 @@
  background: #FFEFF2;

}

.background-image img {
  width: 100%;
  height: 100%;
}

</style>