rongxing-vue/src/views/modules/base/searchPartNo.vue

<template>
  <div class="mod-config">
    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;">
      <el-form-item :label=buttons.site>
        <el-input v-model="searchData.site" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label=buttons.partNo>
        <el-input v-model="searchData.partNo" style="width: 120px"  oninput="this.value = this.value.toUpperCase()"></el-input>
      </el-form-item>
      <el-form-item :label=buttons.partDescription>
        <el-input v-model="searchData.partDescription" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label=buttons.spec>
        <el-input v-model="searchData.spec" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label=buttons.newDate>
        <el-date-picker
          style="width: 130px"
          v-model="searchData.date1"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item :label=buttons.to>
        <el-date-picker
          style="width: 130px"
          v-model="searchData.date2"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item :label=buttons.active>
        <el-select filterable v-model="searchData.active" style="width: 120px">
          <el-option :label=buttons.all value=""></el-option>
          <el-option :label=buttons.yes value="Y"></el-option>
          <el-option :label=buttons.no value="N"></el-option>
        </el-select>
        <el-button @click="getData()" type="primary" style="margin-left: 2px;">{{ buttons.search }}</el-button>
        <el-button @click="userSetting" type="primary">{{ buttons.settingTable }}</el-button>
        <el-button v-if="isAuth('sys:setting')" @click="saveColumnList()" type="primary">{{ buttons.defaultTable }}</el-button>
        <download-excel
          :fields="fields()"
          :data="exportData"
          type="xls"
          :name="exportName"
          :header="exportHeader"
          :footer="exportFooter"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
          class="el-button el-button--primary el-button--medium">
          {{ buttons.download }}
        </download-excel>
      </el-form-item>

    </el-form>
    <el-table
      :height="height"
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 动态列    -->
    <column v-if="visible" ref="column" @refreshData="getTableUserColumn"></column>
  </div>
</template>

<script>
  import column from "../common/column";
  import {
    searchSysLanguagePackList,
    searchSysLanguageParam,
    searchFunctionButtonList,
    saveButtonList,
    searchSysLanguage,
    searchLanguageListByLanguageCode,
    saveSysLanguageOne,
    searchPageLanguageData,
    removerLanguage
  } from "@/api/sysLanguage.js"
  import {
    saveTableDefaultList,
    saveTableUser,
    getTableDefaultListLanguage,
    getTableUserListLanguage,
    removerDefault,
    removerUser
  } from "@/api/table.js"
  import {
    searchPartNoData,
  } from "@/api/base/site.js"

  export default {
    name: "searchPartNo",
    components: {column},
    data() {
      return {
        // 多语言 start
        buttonList: [
          {
            functionId: "6004",
            languageValue: '设置默认配置',
            objectId: 'defaultTable',
            objectType: "button",
            tableId: "6004Table"
          },
          {
            functionId: "6004",
            languageValue: '查询',
            objectId: 'search',
            objectType: "button",
            tableId: "6004Table"
          },
          {
            functionId: "6004",
            languageValue: '导出',
            objectId: 'download',
            objectType: "button",
            tableId: "6004Table"
          },
          {
            functionId: "6004",
            languageValue: '设置列表',
            objectId: 'settingTable',
            objectType: "button",
            tableId: "6004Table"
          },
          {
            functionId: "6004",
            languageValue: '工厂编码',
            objectId: 'site',
            objectType: "button",
            tableId: "6004Table"
          },

          {
            functionId: "6004",
            languageValue: '全部',
            objectId: 'all',
            objectType: "button",
            tableId: "6004Table"
          },
          {
            functionId: "6004",
            languageValue: '是',
            objectId: 'yes',
            objectType: "button",
            tableId: "6004Table"
          },
          {
            functionId: "6004",
            languageValue: '否',
            objectId: 'no',
            objectType: "button",
            tableId: "6004Table"
          },
          {
            functionId: "6004",
            languageValue: '在用',
            objectId: 'active',
            objectType: "button",
            tableId: "6004Table"
          },
          {
            functionId: "6004",
            languageValue: '物料编码',
            objectId: 'partNo',
            objectType: "button",
            tableId: "6004Table"
          },
          {
            functionId: "6004",
            languageValue: '物料名称',
            objectId: 'partDescription',
            objectType: "button",
            tableId: "6004Table"
          },
          {
            functionId: "6004",
            languageValue: '规则型号',
            objectId: 'spec',
            objectType: "button",
            tableId: "6004Table"
          },
          {
            functionId: "6004",
            languageValue: '新增日期',
            objectId: 'newDate',
            objectType: "button",
            tableId: "6004Table"
          },
          {
            functionId: "6004",
            languageValue: '至',
            objectId: 'to',
            objectType: "button",
            tableId: "6004Table"
          }
        ],
        showDefault:false,
        // 语言词典集合
        sysLanguageParams: [],
        dataListLoading: false,
        // 用户table 配置集合
        userColumnList: [],
        queryTableUser: {
          userId: this.$store.state.user.name,
          functionId: 6004,
          tableId: "6004Table",
          status: true,
          languageCode: this.$i18n.locale
        },
        buttons:{
          defaultTable:'设置默认配置',
          search:'查询',
          download:'导出',
          settingTable: '设置列表',
          site:'工厂编码',
          active:'在用',
          all:'全部',
          yes:'是',
          no:'否',
          partNo:'物料编码',
          partDescription:'物料名称',
          spec:'规则型号',
          newDate:'新增日期',
          to:'至',
        },
        // 默认table 查询参数
        queryTable: {
          functionId: 6004,
          tableId: "6004Table",
          languageCode: this.$i18n.locale
        },
        languageList: [],
        queryLanguage: {},
        visible:false,
        // 多语言 end
        // 导出 start
        exportData: [],
        exportName: "物料编码"+this.dayjs().format('YYYYMMDDHHmmss'),
        exportHeader: ["物料编码"],
        exportFooter: [],
        // 导出 end
        height: 200,
        modelFlag:false,
        modelInputFlag:true,
        selectList:[],
        searchData: {
          site:'',
          partNo:'',
          partDescription:'',
          active:'',
          spec:'',
          date1:new Date(),
          date2:'',
          user:this.$store.state.user.name,
        },
        dataList:[],
        columnList: [
          {
            userId: this.$store.state.user.name,
            functionId: 6004,
            serialNumber: '6004TablePartNo',
            tableId: "6004Table",
            tableName: "查询物料编码表",
            columnProp: "partNo",
            headerAlign: "center",
            align: "left",
            columnLabel: "物料编码",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: false,
            columnWidth: 120
          },
          {
            userId: this.$store.state.user.name,
            functionId: 6004,
            serialNumber: '6004TablePartDescription',
            tableId: "6004Table",
            tableName: "查询物料编码表",
            columnProp: "partDescription",
            headerAlign: "center",
            align: "left",
            columnLabel: "物料名称",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: false,
            columnWidth: 250
          },
          {
            userId: this.$store.state.user.name,
            functionId: 6004,
            serialNumber: '6004TableSpec',
            tableId: "6004Table",
            tableName: "查询物料编码表",
            columnProp: "spec",
            headerAlign: "center",
            align: "left",
            columnLabel: "规格型号",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: false,
            columnWidth: 100
          },
          {
            userId: this.$store.state.user.name,
            functionId: 6004,
            serialNumber: '6004TableConfigurationTemplateID',
            tableId: "6004Table",
            tableName: "查询物料编码表",
            columnProp: "configurationTemplateID",
            headerAlign: "center",
            align: "left",
            columnLabel: "客户名称",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: false,
            columnWidth: 160
          },
          {
            userId: this.$store.state.user.name,
            functionId: 6004,
            serialNumber: '6004TableRemark',
            tableId: "6004Table",
            tableName: "查询物料编码表",
            columnProp: "remark",
            headerAlign: "center",
            align: "left",
            columnLabel: "客户产品科号",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: false,
            columnWidth: 250
          },
          {
            userId: this.$store.state.user.name,
            functionId: 6004,
            serialNumber: '6004TableUmid',
            tableId: "6004Table",
            tableName: "查询物料编码表",
            columnProp: "umid",
            headerAlign: "center",
            align: "left",
            columnLabel: "计量单位",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: false,
            columnWidth: 60
          },
          {
            userId: this.$store.state.user.name,
            functionId: 6004,
            serialNumber: '6004TableActive',
            tableId: "6004Table",
            tableName: "查询物料编码表",
            columnProp: "active",
            headerAlign: "center",
            align: "left",
            columnLabel: "在用",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: false,
            columnWidth: 40
          },
          {
            userId: this.$store.state.user.name,
            functionId: 6004,
            serialNumber: '6004TableCreateDate',
            tableId: "6004Table",
            tableName: "查询物料编码表",
            columnProp: "createDate",
            headerAlign: "center",
            align: "left",
            columnLabel: "新增日期",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: false,
            columnWidth: 120
          },
          {
            userId: this.$store.state.user.name,
            functionId: 6004,
            serialNumber: '6004TableSite',
            tableId: "6004Table",
            tableName: "查询物料编码表",
            columnProp: "site",
            headerAlign: "center",
            align: "left",
            columnLabel: "工厂编号",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: false,
            columnWidth: 60
          }
        ],
      }
    },

    mounted() {
      this.$nextTick(() => {
        this.height = window.innerHeight - 150;
      })
    },
    methods: {
      //多语言start
      // 获取页面多语言
      getMsgLanguage() {
        this.dataListLoading = true
        let queryLang = {
          functionId: 6004,
          table_id: '6004Table',
          languageCode: this.$i18n.locale
        }
        searchPageLanguageData(queryLang).then((data) => {
          if (JSON.stringify(data.data) != '{}') {
            this.pageLanguageData = data.data
          } else {
          }
        })
        this.dataListLoading = false
      },
      // 获取button的词典
      getFunctionButtonList() {
        searchFunctionButtonList(this.queryTable).then(({data}) => {
          if (JSON.stringify(data.data) != '{}') {
            this.buttons = data.data
          } else {
            // saveButtonList(this.buttonList).then(({data}) => {
            // })
          }
        })
      },
      // 获取语言词典
      getSysLanguageParamList() {
        searchSysLanguageParam(this.queryTable).then(({data}) => {
          this.sysLanguageParams = data.rows
        })
      },
      // 打开页面设置
      userSetting() {
        this.visible = true;
        let queryTable = {
          userId: this.$store.state.user.name,
          functionId: 6004,
          tableId: "6004Table",
          languageCode: this.$i18n.locale
        }
        this.$nextTick(() => {
          this.$refs.column.init(queryTable);
        });
      },
      // 获取 用户保存的 格式列
      getTableUserColumn() {
        getTableUserListLanguage(this.queryTableUser).then(({data}) => {
          if (data.rows.length>0) {
            //this.columnList = []
            this.columnList = data.rows
          } else {
            this.getColumnList()
          }

        })
      },
      // 保存 默认配置 列
      saveColumnList() {
        // 删除所有的该页面下保存的数据
        if (this.userColumnList) {
          //删除 user自定义的数据
          removerUser(this.queryTable)
        }
        // 删除默认配置
        removerDefault(this.queryTable)
        // 删除语言
        removerLanguage(this.queryTable)
        // 保存页面 table属性
        let sumColumnList = this.columnList;
        saveTableDefaultList(sumColumnList).then(({data}) => {
        })
        // 保存页面 button label title 属性
        saveButtonList(this.buttonList).then(({data}) => {
        })
        this.getFunctionButtonList()
        this.getColumnList()
      },
      // 获取 tableDefault 列
      getColumnList() {
        getTableDefaultListLanguage(this.queryTable).then(({data}) => {
          if (data.rows.length>0) {
            this.showDefault = false
            this.columnList = data.rows
          } else {
            this.showDefault = true
          }
        })
      },
      //多语言 end
      getData(){
        if((this.searchData.site==null||this.searchData.site=='')&&(this.searchData.partNo==null||this.searchData.partNo=='')&&(this.searchData.partDescription==null||this.searchData.partDescription=='')&&
          (this.searchData.spec==null||this.searchData.spec=='')&&(this.searchData.date1==null||this.searchData.date1=='')&&(this.searchData.date2==null||this.searchData.date2=='')){
          this.$alert("数据量过大，请至少输入一个查询条件！",'提示',{
            confirmButtonText:'确定'
          })
          return false;
        }
        searchPartNoData(this.searchData).then(({data}) => {
          this.dataList = data.rows
        })
      },
      //导出excel
      createExportData() {

        return this.dataList;

      },
      startDownload() {
        //  this.exportData = this.dataList

      },
      finishDownload() {

      },
      fields() {
        let json = "{"
        this.columnList.forEach((item, index) => {
          if (index == this.columnList.length - 1) {
            json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
          } else {
            json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
          }
        })
        json += "}"
        let s = eval("(" + json + ")")

        return s
      },
      // 导出 end
    },
    created() {
      this.getTableUserColumn()
      this.getSysLanguageParamList()
      this.getFunctionButtonList()
      this.getMsgLanguage()
    }
  }
</script>

<style >
  .el-textarea__inner {
    padding: 5px 5px;
  }
</style>