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

Fixiaobai

2023-11-08 1ad4dd1d9a1a521980ce2cfeae4208b1873c7c9a

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

 src/views/basic/param/index.vue

@@ -1,97 +1,83 @@
<template>
  <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 @click="showImportDialog">导入</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      <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 @click="showImportDialog">导入</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <basic-container>
        <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>
      <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;" 
    <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>
        </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,putObj,uploadParam } 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 { mapGetters } from 'vuex'
import { remote,fetchList as fetchDictList } from '@/api/admin/dict'
import { remote, fetchList as fetchDictList } from '@/api/admin/dict'
export default {
    data() {
  data() {
    return {
      fileList: [],
      importDialog: false,
@@ -103,7 +89,7 @@
        code: null
      },
      loading: true,
      page:{
      page: {
        total: 10,
        currentPage: 1,
        pageSize: 10
@@ -145,7 +131,7 @@
            label: '参数类型',
            prop: 'paramType',
            formslot: true,
            rules:[{
            rules: [{
              required: true,
              message: "请选择参数类型",
              trigger: "change"
@@ -159,7 +145,7 @@
          }, {
            label: '单位',
            prop: 'unit',
            rules:[{
            rules: [{
              required: true,
              message: "单位不能为空",
              trigger: "blur"
@@ -170,7 +156,7 @@
      spanArr: [{
        prop: 'code',
        span: []
      },{
      }, {
        prop: 'paramItem',
        span: []
      }, {
@@ -190,13 +176,13 @@
    this.getData()
    this.getParamType()
  },
  beforeUpdate(){
  beforeUpdate() {
    console.log("updated");
    this.rowSort()
    this.rowCalc()
    this.loading = false
  },
  watch:{ },
  watch: {},
  methods: {
    //下载模板
    downloadTemplate() {
@@ -217,47 +203,50 @@
      })
    },
    // 文件上传
        handleUpload(file, fileList) {
    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){
      if (file.raw.type != xlsType && file.raw.type != xlsxType) {
        this.$message.warning("导入文件格式不符！");
        fileList.pop()
        return;
      }
      if(Number.parseInt(file.size) > maxSize){
      if (Number.parseInt(file.size) > maxSize) {
        this.$message.warning("导入文件过大！");
        fileList.pop()
        return;
      }
      if(fileList.length > 1){
      if (fileList.length > 1) {
        this.$message.warning("只能导入单个文件!")
        fileList.pop()
      }
      this.fileList = fileList;
      // this.importFile = file;
    },
    showImportDialog(){
    showImportDialog() {
      this.importDialog = true
    },
    //确定导入
    confirmImport(){
    confirmImport() {
      console.log(this.fileList)
      const fileData =  new FormData();
      const fileData = new FormData();
      fileData.append('file', this.fileList[0].raw);
      uploadParam(fileData).then((res)=>{
        console.log(res);
        // this.exportLoading = false;
      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'){
      } else if (row.paramType === '2') {
        this.getDictOptions()
      }else {
      } else {
        row.paramFormat = ''
      }
    },
@@ -274,21 +263,21 @@
        }
      })
    },
    showEdit(row,index){
      this.option.column.forEach(item=>{
        if(row.paramItemThree=="" && item.prop=='paramItemThree'){
    showEdit(row, index) {
      this.option.column.forEach(item => {
        if (row.paramItemThree == "" && item.prop == 'paramItemThree') {
          item.display = false
        }
        if(row.paramItemTwo=="" && item.prop=='paramItemTwo'){
        if (row.paramItemTwo == "" && item.prop == 'paramItemTwo') {
          item.display = false
        }
      })
      this.$refs.crud.rowEdit(row,index)
      this.$refs.crud.rowEdit(row, index)
    },
    showDel(row,index){
      this.$refs.crud.rowDel(row,index)
    showDel(row, index) {
      this.$refs.crud.rowDel(row, index)
    },
    updateParam(row,index,done,loading){
    updateParam(row, index, done, loading) {
      // this.formDisabled = true
      let data = {
        dict: '',
@@ -298,57 +287,57 @@
        type: row.paramType,
        unit: row.unit,
      }
      row.paramType=='2' ? data.dict=row.paramFormat : data.parameterFormat=row.paramFormat
      if(row.threeId){
      row.paramType == '2' ? data.dict = row.paramFormat : data.parameterFormat = row.paramFormat
      if (row.threeId) {
        data.id = row.threeId
        data.parameterItem = row.paramItemThree
      }else{
        if(row.twoId){
      } else {
        if (row.twoId) {
          data.id = row.twoId
          data.parameterItem = row.paramItemTwo
        }else{
        } else {
          data.id = row.oneId
          data.parameterItem = row.paramItem
        }
      }
      console.log(data)
      putObj(data).then(res=>{
        if(res.data.data.code==0){
      putObj(data).then(res => {
        if (res.data.data.code == 0) {
          this.$message.success("更新成功")
        }else{
        } else {
          this.$message.error(res.data.data.msg)
        }
        this.getData()
        done(row)
      }).catch(error=>{
      }).catch(error => {
        console.log(error)
      })
    },
    delParam(row){
    delParam(row) {
      let id;
      if(row.threeId){
      if (row.threeId) {
        id = row.threeId
      }else{
        if(row.twoId){
      } else {
        if (row.twoId) {
          id = row.twoId
        }else{
        } 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(() => {});
      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() {
@@ -359,7 +348,7 @@
        }
      })
    },
    onSearch() { 
    onSearch() {
      this.getData()
    },
    // 新增 / 修改
@@ -385,14 +374,14 @@
      })
    },
    //动态合并方法
    rowCalc () {
    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)
      })
    },
    rowSort (list) {
    rowSort(list) {
      let propList = this.spanArr.map(ele => ele.prop)
      this.spanArr.forEach((ele, index) => {
        let key = ele.prop
@@ -411,7 +400,7 @@
        })
      })
    },
    rowSpan (key, parent) {
    rowSpan(key, parent) {
      let list = [];
      let position = 0;
      this.tableData.forEach((item, index) => {
@@ -435,7 +424,7 @@
      })
      return list
    },
    spanMethod ({ row, column, rowIndex, columnIndex }) {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      for (let i = 0; i < this.spanArr.length; i++) {
        const ele = this.spanArr[i]
        if (column.property == ele.prop) {
@@ -456,6 +445,7 @@
.grid-header {
  display: none;
}

.param-basic {
  margin: 0 10px;
  border-radius: 0px;
@@ -480,30 +470,22 @@
}

/*自定义disabled状态下checkbox的样式*/
.completeproductstructure-checkout
  .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner {
.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 {
.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 {
.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 {
.completeproductstructure-checkout .el-checkbox__input.is-disabled+span.el-checkbox__label {
  color: #606266;
  cursor: pointer;
}
@@ -546,14 +528,23 @@
.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>