Win.Sfs.SmartSettlementSystem.PG/vue/src/views/pg-fis/basedate/r100Online/index.vue

<!--总成模块信息管理页-->
<template>
  <div class="cr-body-content">
    <div ref="box">
    <flexbox class="content-header" >
      <el-form
        :model="listQuery"
        ref="queryForm"
        v-show="showSearch"
        :inline="true"
      >
      <!-- <el-row> -->
        <el-form-item label="生产线:" prop="workLine">
          <el-select
            v-model="listQuery.workLine"
            clearable
            placeholder="请选择"
            size="medium"
            style="margin-right: 15px"
            @change="valueselectChange"
          >
            <el-option label="门板" value="R0003"></el-option>
            <el-option label="二配" value="R0001"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="workLineCode">
          <el-select
            v-model="listQuery.workLineCode"
            clearable
            placeholder="请选择"
            size="medium"
            style="margin-right: 15px"
            @change="valueselectChange"
          >
            <el-option label="01-C8" value="01-C8"></el-option>
            <el-option label="01-C9" value="01-C9"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="版本:" prop="Version">
          <el-input
            v-model="listQuery.Version"
            placeholder=""
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      <!-- </el-row> -->
      <!-- <el-row> -->
        <el-form-item label="大众顺序号:" prop="ErpAssemblyName">
          <el-input
            v-model="listQuery.ErpAssemblyName"
            placeholder=""
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="-" prop="ErpAssemblyName">
          <el-input
            v-model="listQuery.ErpAssemblyName"
            placeholder=""
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="KNR:" prop="ErpAssemblyName">
          <el-input
            v-model="listQuery.ErpAssemblyName"
            placeholder=""
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="-" prop="ErpAssemblyName">
          <el-input
            v-model="listQuery.ErpAssemblyName"
            placeholder=""
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      <!-- </el-row> -->
      <!-- <el-row> -->
        <el-form-item label="底盘号:" prop="ErpAssemblyName">
          <el-input
            v-model="listQuery.ErpAssemblyName"
            placeholder=""
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="-" prop="ErpAssemblyName ">
          <el-input
            v-model="listQuery.ErpAssemblyName"
            placeholder=""
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="上线日期">
          <el-date-picker
            v-model="listQuery.OnlineTimeVale"
            size="small"
            style="width: 380px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      <!-- </el-row> -->
      <!-- <el-row> -->
        <el-form-item label="接收日期">
          <el-date-picker
            v-model="listQuery.ReceiveTimeVale"
            size="small"
            style="width: 380px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="单据状态" prop="State">
          <el-checkbox-group  v-model="listQuery.state" >
            <el-checkbox v-for="item in billState" :key="item.id" :label="item.id">
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item style="margin: 0px">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleFilter"
            >搜索</el-button
          >
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery('queryForm')"
            >重置</el-button
          >
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            style="margin-left: 15px"
            @click="handleDownload()"
            >导出(Excel)
          </el-button>
          <el-button
            type="primary"
            size="mini"
            style="margin-left: 15px"
            @click="SAPExport()"
            >导出Excel（用于SAP导入）
          </el-button>
        </el-form-item>
      <!-- </el-row> -->
      </el-form>
    </flexbox>
    </div>
    <div class="l-table">
      <!--表格渲染-->
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
        class="cr-table"
        :data="list"
        :height="tableHeight"
        :cell-style="cellStyle"
        :header-cell-style="headerRowStyle"
        size="small"
        stripe
        border
        highlight-current-row
        style="width: 100%"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        
        <!-- <el-table-column
          label="底盘号"
          prop="vin "
          sortable="custom"
          align="center"
          
          width="180px"
        >
          <template slot-scope="scope">
            <span class="link-type" @click="handleDrawerOpen(scope.row)">{{
              scope.row.vin
            }}</span>
          </template>
        </el-table-column> -->
        <el-table-column
          v-for="(item, index) in getDefaultField"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
          :formatter="fieldFormatter"
          sortable="custom"
          show-overflow-tooltip
          :gutter="0"
        >
          <template slot="header" slot-scope="scope">
            {{ scope.column.label }}
          </template>
        </el-table-column>
      </el-table>

    </div>

    <div class="table-footer">
      <!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"-->
      <pagination
        v-show="totalCount > 0"
        :total="totalCount"
        :page.sync="page"
        :limit.sync="listQuery.MaxResultCount"
        @pagination="getList"
      />
      <!-- 抽屉控件 -->
      <el-drawer
        title="信息详细页"
        size="75%"
        direction="rtl"
        :visible.sync="drawer"
        :before-close="handleDrawerClose"
      >
      </el-drawer>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";
import CRMTableHead from "../../components/CRMTableHead";
import importExcel from "@/components/ImportExcel-vw";
import Lockr from "lockr";
import moment from "moment";
import { downloadFile } from "@/utils/crmindex.js";

//组件计量单位
const bomUnit = [
  { key: 0, display_name: "PC" },
  { key: 1, display_name: "TON" },
  { key: 2, display_name: "Other" },
];


const projectTypeKeyValue = bomUnit.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name;
  return acc;
}, {});

export default {
  name: "M100Online",
  components: { Pagination, CRMTableHead, importExcel },
  directives: { permission },
  filters: {
    IsCustomerSignFilter(status) {
      //翻译是否签字
      const statusMap = {
        true: "是",
        false: "否",
      };
      return statusMap[status];
    },
  },
  data() {
    const validVersion = (rule, value, callback) => {
      let numberReg = /^\d{6}$/;
      if (!numberReg.test(value)) {
        callback(new Error("只能为6位数字！"));
      } else {
        callback();
      }
    };
    return {
      crmType: "M100Online",
      rules: {
        erpAssemblyName: [
          { required: true, message: "必须输入！", trigger: "blur" },
        ],
      },
      billState:[
        {id:0,name:"已匹配"},
        {id:1,name:"已导出"}
      ],
      valueSelect: "",
      customerInfos: [],
      dialogOptions: [],
      versionValue: "",
      searchContent: "", // 输入内容
      showExcelImport: false,
      form: {},
      drawer: false,
      list: null,
      totalCount: 0,
      listLoading: true,
      customerInfo: {
        bomId: "",
      },
      // 高级搜索
      filterObj: {
        type: Object,
        default: () => {
          return {};
        },
      },
      listQuery: {
        SkipCount: 0,
        MaxResultCount: 15,
        ErpAssemblyName: undefined,
        ErpAssemblyCode: undefined,
        carType:undefined,
        OnlineTimeVale:undefined,
        ReceiveTimeVale:undefined,
        state:[],

      },
      listExportQuery: {
        erpAssemblyCode: undefined,
        erpAssemblyName: undefined,
      },
      form:{
        details:[]
      },
      page: 1,
      // 显示搜索条件
      showSearch: true,
      bomUnit,
      multipleSelection: [],
      drawer: false,
      dialogFormVisible: false,
      formTitle: "",
      isEdit: false,
      formLoading: false,
      tableHeight: document.documentElement.clientHeight - 335,
      detailTableHeight:250,
      details:[], //修改子表数据源
    };
  },
  mounted() {
    this.$nextTick(() => { 
        var offsetHei = document.documentElement.clientHeight;
        //console.log(offsetHei);
        let boxH = this.$refs.box.offsetHeight;
        this.tableHeight = offsetHei - boxH - 57 - 79;//57为footer高度，79为页面上部标签高度
        //console.log(this.$refs.box.offsetHeight);
        //console.log(this.tableHeight);
    });
  },
  created() {
    this.getList();
  },
  computed: {
    getDefaultField() {
      
      var tempsTabs = [];
      tempsTabs.push({ label: "大众顺序号", prop: "hostSN", width: 120 });
      tempsTabs.push({
        label: "KNR",
        prop: "knr",
        width: 120,
      });
      // tempsTabs.push({
      //   label: "底盘号",
      //   prop: "vin",
      //   width: 130,
      // });
      tempsTabs.push({
        label: "KNR",
        prop: "knr",
        width: 150,
      });
      tempsTabs.push({
        label: "单据状态",
        prop: "billState",
        width: 150,
      });
      tempsTabs.push({
        label: "上线时间",
        prop: "onlineTime",
        width: 150,
      });
      tempsTabs.push({
        label: "接收时间",
        prop: "receiveTime",
        width: 180,
      });
      tempsTabs.push({
        label: "车型代码",
        prop: "vehicleModelCode",
        width: 120,
      });
      tempsTabs.push({
        label: "版本",
        prop: "version",
        width: 150,
      });
      tempsTabs.push({
        label: "总成编号",
        prop: "erpAssemblyCode",
        width: 150,
      });
      tempsTabs.push({
        label: "总成名称",
        prop: "erpAssemblyName",
        width: 180,
      });
      tempsTabs.push({
        label: "备注",
        prop: "remark",
        width: 120,
      });
      return tempsTabs;
    },
  },
  methods: {
    //抽屉
    handleDrawerOpen(param) {
      this.drawer = true;
      var parentId = param.id; //主键id
      this.customerInfos = [
        {
          ParentId: parentId,
        },
      ];
    },
    handleDrawerClose(done) {
      done();
    },
    /** 导出功能 */
    handleDownload() {
      this.listLoading = true;
      this.listExportQuery.erpAssemblyCode = this.listQuery.ErpAssemblyCode;
      this.listExportQuery.erpAssemblyName = this.listQuery.ErpAssemblyName;
      console.log(JSON.stringify(this.listExportQuery));
      this.$axios
        .posts("/api/newjit/assembly-cfg-erp/export", this.listExportQuery)
        .then((res) => {
          let filename = res.item;
          this.$axios
            .BolbGets("/api/newjit/exclude-part-cfg/download/" + filename)
            .then((response) => {
              if (filename.indexOf("_") != -1) {
                let downName =
                  filename.slice(0, filename.lastIndexOf("_")) +
                  filename.slice(filename.lastIndexOf("."));
                downloadFile(response, downName);
                this.$notify({
                  title: "成功",
                  message: "数据-导出成功！",
                  type: "success",
                  duration: 2000,
                });
              } else {
                downloadFile(response, filename);
                this.$notify({
                  title: "成功",
                  message: "数据-导出成功！",
                  type: "success",
                  duration: 2000,
                });
              }
              this.listLoading = false;
            });
        });
      this.listLoading = false;
    },
    /** 重置按钮操作 */
    resetQuery(refName) {
      //this.$refs[refName].resetFields();
      this.listQuery.ErpAssemblyName = "";
      this.listQuery.ErpAssemblyCode = "";
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.listQuery.SkipCount = 1;
      this.getList();
    },
    selectValue(params) {
      //版本下拉选择
      this.versionValue = params.value;
      this.getList();
    },

    selectOptionsChange(item) {
      this.getList();
    },
    importExcelData() {
      //关闭导入窗体时调用
      this.showExcelImport = false;
      //this.getList();
    },

    /** 刷新列表 */
    handleHandle(data) {
      if (data.type !== "edit") {
        this.getList();
      }
    },

    handleAddDetails() {
      if (this.form.details === undefined) {
        this.form.details = [];
        //console.log(679);
      }
      let obj = {};
      obj.partCode = "";
      obj.partName = "";
      obj.partNum = "";
      obj.isKey = false;
      obj.description = "";

      console.log(this.form.details);
      this.form.details.push(obj);
      //console.log(688);
    },
    handleDeleteDetails(index){
      this.form.details.splice(index, 1);
      //console.log(693);
    },

    /** 格式化字段 */
    fieldFormatter(row, column) {
      if (column.property === "billStatus") {
        return { 0: "未生效", 2: "已生效", 3: "已发布" }[row[column.property]];
      }
      if (column.property == "onlineTime" || column.property == "receiveTime") {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      }
      return row[column.property] || "--";
    },
    roleFilter(type) {
      return projectTypeKeyValue[type];
    },
    getList() {
      this.listLoading = true;
      this.listQuery.SkipCount = (this.page - 1) * 10;
      this.$axios
        .gets("/api/newjit/assembly-cfg-erp/list", this.listQuery)
        .then((response) => {
          this.list = response.items;
          this.totalCount = response.totalCount;
          setTimeout(() => {
            //大数据量加载时
            this.listLoading = false;
          }, 500);
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    
    getDetialList(partCode) {
      this.listLoading = true;
      console.log("详表条件：" + JSON.stringify(this.customerInfo.parentId));
      this.$axios
        .gets("/api/newjit/assembly-cfg-erp/" + this.customerInfo.parentId)
        .then((response) => {
          console.log(partCode)
          if(partCode !== "" && partCode !== undefined)
          {
            //console.log(partCode)
            this.list = response.item.details.filter(u => u.partCode === partCode);
          }
          else
          {
            this.list = response.item.details;
          }
          //alert(JSON.stringify(response.Items))
          //this.totalCount = response.totalCount;
          setTimeout(() => {
            //大数据量加载时
            this.listLoading = false;
          }, 500);
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    valueselectChange(){},
    handleImportSAP(){},

    handleFilter() {
      this.page = 1;
      this.getList();
    },

    sortChange(data) {
      const { prop, order } = data;
      if (!prop || !order) {
        this.handleFilter();
        return;
      }
      this.listQuery.Sorting = prop + " " + order;
      this.handleFilter();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === "qty") {
        return { textAlign: "right" };
      } else {
        return { textAlign: "left" };
      }
    },
    /** 通过回调控制表头style */
    headerRowStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === "qty") {
        return { textAlign: "right", background: "#FAFAFA" };
      } else {
        return { textAlign: "left", background: "#FAFAFA" };
      }
    },
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    SAPExport(){},
  },
};
</script>


<style lang="scss" scoped>
@import "../../../ux/styles/crmtable.scss";

// /*表格全选框去除空框*/
// .el-table >>> .DisabledSelection .cell .el-checkbox__inner {
//   display: none;
//   position: relative;
// }
// /*表格全选框改为：选择*/
// .el-table >>> .DisabledSelection .cell:before {
//   content: "是否Key件";
//   position: absolute;
//   left: 7px;
// }
.divider1{
  margin: 0 ;
}
.divider2{
  margin: 10px;
  margin-bottom: 20px ;
  width: 95%;
}
</style>