更新value-table列表点击功能

licp

2024-03-06 5ccf3b19b39f00b6e71836238c7c91634cdc23c0

更新value-table列表点击功能

 src/components/tool/value-table.vue

@@ -63,10 +63,12 @@
                            <el-tag v-for="(b, bi) in data.tagField[a.label].select" :key="bi" v-if="b.value == scope.row[a.label]"
                                :type="b.type" size="medium">{{b.label}}</el-tag>
                        </div>
            <!-- å¯æ“ä½œè¡Œè¿›è¡Œç‚¹å‡»äº‹ä»¶ -->
            <span v-else-if="data.linkEvent&&showLink(a.label, data.linkEvent)" style="color:#409EFF;cursor: pointer;" @click="$emit(showLink(a.label, data.linkEvent),scope.row)">{{scope.row[a.label]}}</span>
                        <span v-else>{{scope.row[a.label]}}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" align="center" label="操作" :width="60 + data.do.length * 35"
                <el-table-column fixed="right" align="center" label="操作" :width="60 + data.do.length * 40"
                    v-if="data.do.length > 0">
                    <template slot-scope="scope">
                        <el-button v-for="(a, ai) in data.do" :key="ai" :type="a.type"
@@ -388,6 +390,10 @@
                var str = ob[val]
                return str == undefined ? null : ob[val].select
            },
      showLink(val, ob){
        var str = ob[val]
                return str == undefined ? null : ob[val].method
      },
            showAddReq(label) {
                if (this.data.requiredAdd == undefined) {
                    return

 src/components/view/a6-device-management.vue

@@ -347,11 +347,6 @@
                    showSelect: false,
                    select: false,
                    do: [{
                        id: 'details',
                        font: '详情',
                        type: 'text',
                        method: 'selectAllByOne'
                    }, {
                        id: 'delete',
                        font: '删除',
                        type: 'text',
@@ -378,6 +373,11 @@
                                label: '保修'
                            }]
                        }
          },
          linkEvent:{
            deviceName:{
              method:'selectAllByOne'
            }
          },
                    selectField: {},
                    requiredAdd:['largeCategory','subclass','deviceName','internalCode','specificationModel','manufacturer'],
@@ -438,10 +438,10 @@
                        add = true
                    }
                }
                if(!del){
        if(!up){
                    this.componentData.do.splice(1, 1)
                }
                if(!up){
                if(!del){
                    this.componentData.do.splice(0, 1)
                }
                this.addPower = add

 src/components/view/a6-device-overview.vue

@@ -42,6 +42,7 @@
    grid-template-columns: repeat(auto-fit, 375px);
    /* justify-content: center; */
    grid-gap: 16px;
    min-height: 300px;
  }
  .card li{
    width: 375px;

 src/components/view/b1-inspection-order.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,348 @@
<style scoped>
    .title {
        height: 60px;
        line-height: 60px;
    }

    .search {
        background-color: #fff;
        height: 80px;
        display: flex;
        align-items: center;
    }

    .search_thing {
        width: 350px;
        display: flex;
        align-items: center;
    }

    .search_label {
        width: 110px;
        font-size: 14px;
        text-align: right;
    }

    .search_input {
        width: calc(100% - 110px);
    }

    .table {
        margin-top: 10px;
        background-color: #fff;
        width: calc(100% - 40px);
        height: calc(100% - 60px - 80px - 10px - 40px);
        padding: 20px;
    }
  .tab{
    list-style-type: none;
    display: flex;
    margin-bottom: 12px;
  }
  .tab li{
    line-height: 24px;
    padding: 6px 14px;
    font-size: 14px;
    color: #333333;
    border: 1px solid #EEEEEE;
    cursor: pointer;
  }
  .tab li:nth-child(1){
    border-radius: 8px 0 0 8px;
  }
  .tab li:nth-child(4){
    border-radius: 0 8px 8px 0;
  }
  .tab li.active{
    border-color: #3A7BFA;
    color: #3A7BFA;
  }

  .el-form-item{
    margin-bottom: 16px;
  }
  .picName{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    width: 120px;
  }
</style>

<template>
    <div class="role_manage">
        <div>
            <el-row class="title">
                <el-col :span="12" style="padding-left: 20px;">检验下单</el-col>
                <el-col :span="12" style="text-align: right;">
          <el-button size="medium" type="primary" @click="playOrder">下单</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="search">
            <div class="search_thing">
                <div class="search_label">委托编号：</div>
                <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                        v-model="componentData.entity.deviceName" @keyup.enter.native="refreshTable()"></el-input></div>
            </div>
        <div class="search_thing">
                <div class="search_label">样品名称：</div>
                <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                        v-model="componentData.entity.specificationModel" @keyup.enter.native="refreshTable()"></el-input></div>
            </div>
            <div class="search_thing" style="padding-left: 30px;">
                <el-button size="small" @click="refresh()">重 ç½®</el-button>
                <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
            </div>
        </div>
        <div class="table">
      <ul class="tab">
        <li v-for="(m,i) in tabList" :key="i" :class="{active:i==tabIndex}" @click="handleTab(m,i)">{{m.label}}</li>
      </ul>
            <!-- è¯­æ³• å­ç»„件通过 this.$emit +传入方法名 è°ƒç”¨çˆ¶ç»„件方法 ä¾‹å¦‚  this.$emit（selectAllByOne） å°±éœ€åœ¨çˆ¶ç»„件声明并传入  @selectAllByOne="selectAllByOne"-->
            <ValueTable
      ref="ValueTable"
      :url="$api.deviceScope.selectDeviceParameter"
      :componentData="componentData"
      :key="upIndex"
      style="height: calc(100% - 44px)"
      @selectAllByOne="selectAllByOne"
      @handleDataLook="handleDataLook"
      @download="download"
      @handleVerify="handleVerify"
      @handlEquash="handlEquash"
      @handleIssued="handleIssued" />
        </div>
    <!-- å®¡æ ¸ -->
    <el-dialog
      title="下单审核"
      :visible.sync="dialogVisible0"
      width="30%"
      :before-close="handleClose">
      <p style="font-size:16px;color:#333333">委托编号<span style="color:#34BD66">ZTMS2023071001</span>的信息是否通过</p>
      <span slot="footer" class="dialog-footer">
        <el-row v-if="!isPass">
          <el-button @click="handleClose">退 å›ž</el-button>
        <el-button type="primary" @click="submitForm" :loading="upLoad">通 è¿‡</el-button>
        </el-row>
        <el-row v-else>
          <el-button @click="handleClose">返 å›ž</el-button>
        <el-button type="primary" @click="submitForm" :loading="upLoad">ç¡® å®š</el-button>
        </el-row>
      </span>
    </el-dialog>
    </div>
</template>

<script>
    import ValueTable from '../tool/value-table.vue'
    export default {
        components: {
            ValueTable
        },
        data() {
            return {
                //是否通过  true是 false不是
                isPass: true,
                formData: {},
                value: '',
                options: [],
                labelPosition: 'right',
                dialogVisible0: false,
                componentData: {
                    entity: {
                        deviceStatus: null,
                        deviceName: null,
                        specificationModel: null,
                        largeCategory: null,
                        orderBy: {
                            field: 'id',
                            order: 'asc'
                        }
                    },
                    isIndex: true,
                    showSelect: false,
                    select: false,
                    do: [{
                        id: 'details',
                        font: '详情',
                        type: 'text',
                        method: 'selectAllByOne'
                    }, {
                        id: 'dataLook',
                        font: '数据查看',
                        type: 'text',
                        method: 'handleDataLook'
                    },{
                        id: 'download',
                        font: '报告下载',
                        type: 'text',
                        method: 'download'
                    },{
                        id: 'verify',
                        font: '审核',
                        type: 'text',
                        method: 'handleVerify'
                    },{
                        id: 'quash',
                        font: '撤销',
                        type: 'text',
                        method: 'handlEquash'
                    },{
                        id: 'issued',
                        font: '下发',
                        type: 'text',
                        method: 'handleIssued'
                    }],
                    tagField: {
            deviceStatus: {
                            select: [{
                                value: 0,
                                type: 'success',
                                label: '正常'
                            },{
                                value: 1,
                                type: 'warning',
                                label: '报废'
                            },{
                                value: 2,
                                type: 'danger',
                                label: '保修'
                            }]
                        }
          },
                    selectField: {},
                    requiredAdd:['largeCategory','subclass','deviceName','internalCode','specificationModel','manufacturer'],
                    requiredUp:['largeCategory','subclass','deviceName','internalCode','specificationModel','manufacturer']
                },
                entityCopy: {},
                upIndex: 0,
                addDia: true,
                addPower: true,
        //设备类型列表
        equipmentList:[],
        // è´Ÿè´£äººåˆ—表
        responsiblePersonList:[],
        // æŽˆæƒäººåˆ—表
        authorizerList:[],
        // è®¾å¤‡çŠ¶æ€åˆ—表
        deviceStatusList:[],
        upLoad:false,
        tabList:[
          {
            label:'检验处理',
            value:0
          },
          {
            label:'待审核',
            value:1
          },
          {
            label:'退回',
            value:2
          },
          {
            label:'撤销',
            value:3
          },
        ],
        tabIndex:0,
            }
        },
        mounted() {
            this.entityCopy = this.HaveJson(this.componentData.entity)
            this.getPower()
        },
        methods: {
            refreshTable() {
                this.$refs['ValueTable'].selectList()
            },
            refresh() {
                this.componentData.entity = this.HaveJson(this.entityCopy)
                this.upIndex++
            },
            // æƒé™åˆ†é…
            getPower(radio) {
                let power = JSON.parse(sessionStorage.getItem('power'))
                let up = false
                let del = false
                let add = false
                for (var i = 0; i < power.length; i++) {
                    if(power[i].menuMethod=='upDeviceParameter'){
                        up = true
                    }
                    if(power[i].menuMethod=='delDeviceParameter'){
                        del = true
                    }
                    if(power[i].menuMethod=='addDeviceParameter'){
                        add = true
                    }
                }
                if(!del){
                    this.componentData.do.splice(1, 1)
                }
                if(!up){
                    this.componentData.do.splice(0, 1)
                }
                this.addPower = add
            },
            handleClose(){
                this.dialogVisible0 = false;
        this.upLoad = false;
            },
      // è¯¦æƒ…
            selectAllByOne(row){
                //打开弹框
                this.dialogVisible = true;
                //row = ç‚¹å‡»å¯¹åº”行值
                //复制给formData
                this.formData=this.HaveJson(row);
            },
      // æ•°æ®æŸ¥çœ‹
      handleDataLook(row){},
      // ä¸‹è½½æŠ¥å‘Š
      download(row){},
      // å®¡æ ¸
      handleVerify(row){
        this.dialogVisible0 = true;
      },
      // æ’¤é”€
      handlEquash(row){},
      // ä¸‹å‘
      handleIssued(row){},
      submitForm(){
        this.upLoad = true;
        let authorizedPerson = this.formData.authorizedPerson.length>0?this.formData.authorizedPerson.join(','):''
        delete this.formData.createTime
        delete this.formData.updateTime
        delete this.formData.createUser
        delete this.formData.updateUser
        this.formData.authorizedPerson = authorizedPerson
        this.$axios.post(this.$api.deviceScope.upDeviceParameter, this.formData, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                    if (res.code === 201) {
                        this.upLoad = false
                        return
                    }
                    this.$message.success('修改成功')
          this.upLoad = false
                    this.refreshTable()
          this.dialogVisible = false
                }).catch(e => {
                    this.$message.error('修改失败')
                    this.dialogVisible = false
                    this.upLoad = false
                })
      },
      // ä¸‹å•
      playOrder(){},
      handleTab(m,i){
        this.tabIndex = i;
      }
        }
    }
</script>

 src/main.js

@@ -13,7 +13,7 @@

//本地
Vue.prototype.LOCATIONVUE = "http://127.0.0.1:80";
const javaApi = 'http://127.0.0.1:8001';
const javaApi = 'http://192.168.0.133:8003';
//胜云服务器
// Vue.prototype.LOCATIONVUE = "http://syxt.shxiao2.cn";
// const javaApi = 'http://122.114.52.69:8001';

 src/view/index.vue

@@ -345,7 +345,6 @@
        const componentConfig = requireComponent(fileName);
        comObj[names] = componentConfig.default || componentConfig;
    });
    import menu from '../../static/js/menu.js';
    import menus from '../../static/js/menu.js'
    import nullFace from '../view/404.vue'
    comObj['nullFace'] = nullFace
@@ -486,4 +485,4 @@
            }
        }
    };
</script>
</script>

 static/js/menu.js

@@ -17,7 +17,7 @@
        c: [{
            v: "检验下单",
            i: "font icon-24gl-clipboardList",
            u: "",
            u: "b1-inspection-order",
            p: ""
        }, {
            v: "检验任务",