modified: src/views/basic/param/index.vue modified: src/views/common/...

zouyu

2023-11-13 ba296fa0cc7711ea745564bda80b2d1d8a3a09f0

 src/views/basic/param/index.vue

@@ -1,192 +1,368 @@
<template>
  <div class="mod-config">
  <div>
    <div class="param-basic">
      <el-form style="width:100%;margin-top: 20px;" class="l-mes" :inline="true" :model="searchForm">
        <el-row>
          <el-col :span="4">
            <el-form-item label="参数项:">
              <el-input clearable style="width: 100%;" v-model="searchForm.param" placeholder="参数项"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="参数编号:">
              <el-input clearable style="width: 100%;" v-model="searchForm.code" placeholder="参数编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="btn-group">
              <el-button type="" @click="onSearch">查询</el-button>
              <el-button type="primary" @click="addOrUpdateHandle">新增</el-button>
              <el-button type="primary" @click="showImportDialog">导入</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <basic-container>
      <ttable
        :table="table"
        @handleSelectionChange="handleSelectionChange"
        :uploadInfo="uploadInfo"
        :prelang="prelang"
        :options="options"
        :ajaxFun="ajaxFun"
        ref="paramTable"
      >
        <template #toolbar></template>
      </ttable>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="getData"
      ></table-form>
      <avue-crud :data="tableData" ref="crud" :option="option" :span-method="spanMethod" @refresh-change="getData"
        :page="page" :table-loading="loading" @row-update="updateParam" @row-del="delParam">
        <template #menu="{ row, index }">
          <el-button type="text" icon="el-icon-edit" size="small" @click="showEdit(row, index)">编辑</el-button>
          <el-button type="text" icon="el-icon-delete" size="small" @click="showDel(row, index)">删除</el-button>
        </template>
        <template slot-scope="scope" slot="paramTypeForm">
          <el-select v-model="scope.row.paramType" @change="changeType(scope.row)" filterable placeholder="请选择参数类型"
            :disabled="formDisabled">
            <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </template>
        <template slot="paramFormatLabel" slot-scope="scope">
          <span v-if="scope.row.paramType != '2'">参数格式</span>
          <span v-else>数据字典</span>
        </template>
        <template slot-scope="scope" slot="paramFormatForm">
          <el-input v-if="scope.row.paramType != '2'" v-model="scope.row.paramFormat" placeholder="请输入参数格式"
            :disabled="formDisabled" />
          <el-select v-else v-model="scope.row.paramFormat" filterable placeholder="请选择数据字典" :disabled="formDisabled">
            <el-option v-for="(item, index) in dictOptions" :key="index" :label="item.description" :value="item.type" />
          </el-select>
        </template>
      </avue-crud>
    </basic-container>
    <!-- 弹窗, 新增 / 修改 -->
    <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getData"></table-form>
    <el-dialog title="导入" :visible.sync="importDialog" width="22%">
      <el-upload ref="upload" style="width:100%;" class="upload-demo" drag action="#" :multiple="false"
        :file-list="fileList" :auto-upload="false" show-file-list :on-change="handleUpload">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传xls/xlsx文件，且不超过10MB
          <el-button type="text" style="font-size:15px;text-decoration: underline;"
            @click="downloadTemplate">下载模板</el-button>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmImport()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, delObj } from '@/api/basic/param'
import { fetchList, delObj, putObj, uploadParam } from '@/api/basic/param'
import { uploadTemplate } from '@/api/basic/template'
import TableForm from './param-form'
import ttable from '@/views/common/ztt-table.vue'
import { mapGetters } from 'vuex'
import { remote } from '../../../api/admin/dict'
import { remote, fetchList as fetchDictList } from '@/api/admin/dict'
export default {
  data() {
    return {
      ajaxFun: fetchList,
      fileList: [],
      importDialog: false,
      formDisabled: false,
      dictOptions: [],
      typeOptions: [],
      multipleSelection: [],
      isShowQuery: false,
      uploadInfo: {
        // 是否展示上传EXCEL以及对应的url
        isShow: true,
        url: '/mes/param/upload'
      searchForm: {
        param: null,
        code: null
      },
      prelang: 'operation',
      options: {
        height: 300, // 默认高度-为了表头固定
        stripe: true, // 是否为斑马纹 table
        highlightCurrentRow: false, // 是否要高亮当前行
        border: true, // 是否有纵向边框
        lazy: false, // 是否需要懒加载
        fit: true, // 列的宽度是否自撑开
        multiSelect: true, //
        seqNo: true,
        isShowHide: true, // 是否显示显影按钮
        isSearch: true, // 高级查询按钮
        defaultOrderBy: { column: 'createTime', direction: 'desc' }
      },
      table: {
        total: 0,
      loading: true,
      page: {
        total: 10,
        currentPage: 1,
        pageSize: 20,
        data: [],
        // 标题
        pageSize: 10
      },
      tableData: [],
      option: {
        height: 585,
        columnBtn: false,
        index: true,
        indexLabel: '序号',
        menuAlign: 'center',
        editBtn: false,
        delBtn: false,
        addBtn: false,
        border: true,
        align: 'center',
        column: [
          {
            minWidth: 'code',
            prop: 'code',
            label: '参数编号',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text',
            render: { fun: this.addOrUpdateHandle }
            prop: 'code',
            disabled: true
          },
          {
            minWidth: '120',
            prop: 'parameterItem',
            label: '参数项',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
            prop: 'paramItem',
            disabled: true
          },
          {
            minWidth: '140',
            prop: 'type',
            label: '二级参数',
            prop: 'paramItemTwo',
            disabled: true
          },
          {
            label: '三级参数',
            prop: 'paramItemThree',
            disabled: true
          },
          {
            label: '参数类型',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'select',
            formatter: this.getParam,
            optList: () => {
              return this.typeOptions
            }
            prop: 'paramType',
            formslot: true,
            rules: [{
              required: true,
              message: "请选择参数类型",
              trigger: "change"
            }]
          },
          {
            minWidth: '120',
            prop: 'parameterFormat',
            label: '参数格式',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '120',
            prop: 'unit',
            prop: 'paramFormat',
            formslot: true,
            labelslot: true
          }, {
            label: '单位',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
            prop: 'unit',
            rules: [{
              required: true,
              message: "单位不能为空",
              trigger: "blur"
            }]
          },
          {
            minWidth: '200',
            prop: 'createUser',
            label: '创建人',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '140',
            prop: 'updateUser',
            label: '更新人',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '120',
            prop: 'createTime',
            label: '创建日期',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'datetimerange'
          },
          {
            minWidth: '200',
            prop: 'updateTime',
            label: '更新日期',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'datetimerange'
          }
        ],
        toolbar: [
          {
            text: '新增',
            type: 'primary',
            fun: this.addOrUpdateHandle
          }
        ],
        operator: [
          {
            text: '删除',
            icon: 'el-icon-delete',
            type: 'text',
            size: 'small',
            fun: this.deleteHandle
          }
        ],
        operatorConfig: {
          fixed: 'right',
          label: '操作',
          width: 100,
          minWidth: 100
        }
        ]
      },
      spanArr: [{
        prop: 'code',
        span: []
      }, {
        prop: 'paramItem',
        span: []
      }, {
        prop: 'paramItemTwo',
        span: []
      }],
      addOrUpdateVisible: false
    }
  },
  components: {
    ttable,
    TableForm
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  created() {
    this.loading = true
    this.getData()
    this.getParamType()
    this.rowSort()
    this.rowCalc()
  },
  beforeUpdate() {
    this.rowSort()
    this.rowCalc()
  },
  methods: {
    // 获取数据列表
    getData() {
      this.$refs.paramTable.getDataList()
    //下载模板
    downloadTemplate() {
      uploadTemplate('param').then((response) => {
        const blob = new Blob([response.data], {
          type: 'application/force-download'
        })
        const filename = decodeURI('参数模板.xlsx')
        // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
        const elink = document.createElement('a')
        elink.download = filename
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      })
    },
    // 文件上传
    handleUpload(file, fileList) {
      const maxSize = 10 * 1024 * 1024 * 1024;//10MB
      const xlsType = "application/vnd.ms-excel";
      const xlsxType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      if (file.raw.type != xlsType && file.raw.type != xlsxType) {
        this.$message.warning("导入文件格式不符！");
        fileList.pop()
        return;
      }
      if (Number.parseInt(file.size) > maxSize) {
        this.$message.warning("导入文件过大！");
        fileList.pop()
        return;
      }
      if (fileList.length > 1) {
        this.$message.warning("只能导入单个文件!")
        fileList.pop()
      }
      this.fileList = fileList;
      // this.importFile = file;
    },
    showImportDialog() {
      this.importDialog = true
    },
    //确定导入
    confirmImport() {
      console.log(this.fileList)
      const fileData = new FormData();
      fileData.append('file', this.fileList[0].raw);
      uploadParam(fileData).then((res) => {
        this.$message.success("导入参数成功!")
        this.fileList = []
        this.importDialog = false
        this.getData()
        this.getParamType()
      }).catch()
    },
    // 修改参数类型
    changeType(row) {
      if (row.paramType === '1') {
        row.paramFormat = '#.0000'
      } else if (row.paramType === '2') {
        this.getDictOptions()
      } else {
        row.paramFormat = ''
      }
    },
    // 获取所有字典
    getDictOptions() {
      fetchDictList(
        Object.assign({
          current: 1,
          size: 9999
        })
      ).then((response) => {
        if (response.data.code === 0) {
          this.dictOptions = response.data.data.records
        }
      })
    },
    showEdit(row, index) {
      this.option.column.forEach(item => {
        if (row.paramItemThree == "" && item.prop == 'paramItemThree') {
          item.display = false
        }else if(row.paramItemThree != "" && item.prop == 'paramItemThree'){
          item.display = true
        }
        if (row.paramItemTwo == "" && item.prop == 'paramItemTwo') {
          item.display = false
        }else if(row.paramItemTwo != "" && item.prop == 'paramItemTwo'){
          item.display = true
        }
      })
      console.log(row);
      // let type=this.typeOptions.filter(t=>{
      //   return t.label==row.paramType
      // })[0]
      // row.paramType=type.value
      this.$refs.crud.rowEdit(row, index)
    },
    showDel(row, index) {
      this.$refs.crud.rowDel(row, index)
    },
    updateParam(row, index, done, loading) {
      let data = {
        dict: '',
        id: '',
        parameterFormat: '',
        parameterItem: '',
        type: row.paramType,
        unit: row.unit,
      }
      row.paramType == '2' ? data.dict = row.paramFormat : data.parameterFormat = row.paramFormat
      if (row.threeId!="null") {
        data.id = row.threeId
        data.parameterItem = row.paramItemThree
      } else {
        if (row.twoId!="null") {
          data.id = row.twoId
          data.parameterItem = row.paramItemTwo
        } else {
          data.id = row.oneId
          data.parameterItem = row.paramItem
        }
      }
      if(data.type=='文本格式'){
        let type=this.typeOptions.filter(t=>{
        return t.label==row.paramType
      })[0]
      data.type=type.value
      }
      putObj(data).then(res => {
        if (res.data.data.code == 0) {
          this.$message.success("更新成功")
        } else {
          this.$message.error(res.data.data.msg)
        }
        this.getData()
        done(row)
      }).catch(error => {
        console.log(error)
      })
    },
    delParam(row) {
      let id;
      if (row.threeId) {
        id = row.threeId
      } else {
        if (row.twoId) {
          id = row.twoId
        } else {
          id = row.oneId
        }
      }
      this.$confirm('是否确认删除编号为【' + row.code + '】的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delObj(id).then(res => {
          if (res.data.code == 0) {
            this.$message.success("删除成功")
          } else {
            this.$message.error("删除失败")
          }
          this.getData()
        })
      }).catch(() => { });
    },
    // 获取工序参数类型
    getParamType() {
      remote('technology_param').then((response) => {
        if (response.data.code === 0) {
          this.typeOptions = response.data.data
          this.optionType = response.data.data
        }
      })
    },
    onSearch() {
      this.getData()
    },
    // 新增 / 修改
    addOrUpdateHandle(row) {
@@ -195,41 +371,195 @@
        this.$refs.addOrUpdate.init(row == null ? null : row.id)
      })
    },
    // 获取工序参数类型
    getParamType() {
      remote('technology_param').then((response) => {
        if (response.data.code === 0) {
          this.typeOptions = response.data.data
        }
    // 获取数据列表
    getData() {
      this.loading = true
      let param = {
        code: this.searchForm.code,
        size: 20,
        current: 1,
        parameterItem: this.searchForm.param
      }
      fetchList(param).then((res) => {
        this.tableData = res.data.data.records
        this.page.total = res.data.data.total
        this.page.currentPage = res.data.data.records.pages
        this.loading = false
      })

    },
    //动态合并方法
    rowCalc() {
      this.spanArr.forEach((ele, index) => {
        let parent
        if (index !== 0) parent = this.spanArr[ele.parent || index - 1].span
        ele.span = this.rowSpan(ele.prop, parent)
      })
    },
    // 选中仓库行
    handleSelectionChange(val) {
      this.multipleSelection = val
    rowSort(list) {
      let propList = this.spanArr.map(ele => ele.prop)
      this.spanArr.forEach((ele, index) => {
        let key = ele.prop
        this.tableData = this.tableData.sort((a, b) => {
          let flag = true;
          for (let i = 0; i < index; i++) {
            let prop = this.spanArr[i].prop
            flag = flag && a[prop] == b[prop]
          }
          if (flag) {
            if (a[key] < b[key]) { return 1; }
            else if (a[key] > b[key]) { return -1; }
            return 0;
          }
          return 0;
        })
      })
    },
    // 表格字段格式化
    getParam(row, column, cellValue) {
      for (let i = 0, len = this.typeOptions.length; i < len; i++) {
        if (cellValue == this.typeOptions[i].value) {
          return this.typeOptions[i].label
    rowSpan(key, parent) {
      let list = [];
      let position = 0;
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          list.push(1)
          let position = 0;
        } else {
          if (this.tableData[index][key] === this.tableData[index - 1][key]) {
            if (parent && parent[index] !== 0) {
              list.push(1)
              position = index
            } else {
              list[position] += 1;
              list.push(0)
            }
          } else {
            list.push(1)
            position = index
          }
        }
      })
      return list
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      for (let i = 0; i < this.spanArr.length; i++) {
        const ele = this.spanArr[i]
        if (column.property == ele.prop) {
          const _row = ele.span[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    },
    // 删除
    deleteHandle(row) {
      this.$confirm('是否确认删除编号为' + row.code, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function() {
          return delObj(row.id)
        })
        .then((data) => {
          this.$message.success('删除成功')
          this.getData()
        })
    }
  }
}
</script>

<style>
/* .grid-header {
  display: none;
} */

.param-basic {
  margin: 0 10px;
  border-radius: 0px;
  background-color: #fff;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  padding: 10px 20px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

.btn-group .el-button,
.btn-custom .el-button {
  border-radius: 0;
  padding: 9px 30px;
}

.btn-group .el-dropdown .el-button {
  border-radius: 0;
  padding: 9px 20px;
}

/*自定义disabled状态下checkbox的样式*/
.completeproductstructure-checkout .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #006eff;
  border-color: #006eff;
}

.completeproductstructure-checkout .el-checkbox__input.is-disabled.is-checked+span.el-checkbox__label {
  color: #006eff;
  border-color: #006eff;
}

.completeproductstructure-checkout .el-checkbox__input.is-disabled .el-checkbox__inner {
  background-color: #ffffff;
  cursor: pointer;
}

.completeproductstructure-checkout .el-checkbox__input.is-disabled+span.el-checkbox__label {
  color: #606266;
  cursor: pointer;
}

.completeproductstructure-checkout .el-checkbox__inner::after {
  border: 1px solid #fff !important;
  border-left: 0 !important;
  border-top: 0 !important;
  cursor: pointer !important;
}

.structure-detail-table th.gutter {
  display: table-cell !important;
  width: 10px !important;
}

.structure-detail-table colgroup.gutter {
  display: table-cell !important;
  width: 10px !important;
}

.final-product-checkout .el-card__header {
  padding: 0px 20px;
  border-bottom: 0px;
}

.final-product-checkout .el-card__body {
  padding: 0px 20px 20px;
}

.orimaterial-quantity .el-card__header {
  padding: 0px 20px;
  border-bottom: 0px;
}

.orimaterial-quantity .el-card__body {
  padding: 0px 20px 20px;
}

.GooFlow .ico .ico_start:before {
  color: red;
}

.highlight-tab-class {
  color: #006eff;
  background: #e4e7ed;
  border-top: 1px solid #006eff;
}

.unhighlight-tab-class {
  border: 1px solid #e4e7ed;
  border-bottom: none;
}

.el-upload-dragger {
  width: 300px;
}

.upload-demo {
  width: 300px;
}
</style>