iTDM-web/itdmWeb/src/views/module-iTDM/gongdanshuju/ItdmGongdanShujuList2.vue

<template>
  <div>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                      <a-form-item label="委托单位">
                        <a-select
                        v-model="queryParam2.weituoClient"
                        placeholder="请选择委托单位"
                        show-search
                        allowClear
                        :options="weituoClientOptions"
                        @change="getWeituoClientOptions">
                        </a-select>
                      </a-form-item>
                  </a-col>
                  <a-col :xl="6" :lg="7" :md="8" :sm="24">
                      <a-form-item label="委托编号">
                        <a-select
                        v-model="queryParam2.weituoId"
                        placeholder="请选择委托编号"
                        show-search
                        allowClear
                        :options="weituoNoOptions"
                        @change="getWeituoNoOptions">
                        </a-select>
                      </a-form-item>
                  </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="日期">
                            <a-select
                            v-model="queryParam2.riqi"
                            placeholder="请选择日期"
                            show-search
                            allowClear
                            :options="weituoRqOptions"
                            @change="getWeituoRqOptions">
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="工单号">
                            <a-select
                            v-model="queryParam.woId"
                            placeholder="请选择工单号"
                            show-search
                            allowClear
                            :options="weituoGdOptions"
                            @change="getWoId">
                            </a-select>
                        </a-form-item>
                    </a-col>
                <template v-if="toggleSearchStatus">
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="试验类型">
                            <!-- <j-dict-select-tag placeholder="请选择试验类型" v-model="queryParam.shiyanType" dictCode="shiiyan_type"/> -->
                            <a-select
                            v-model="queryParam2.shiyanType"
                            placeholder="请选择试验类型"
                            show-search
                            allowClear
                            :options="shiyanTypeOption"
                            @change="getSb">
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="试验设备">
                            <a-select
                            v-model="queryParam2.shebeiId"
                            placeholder="请选择试验设备"
                            show-search
                            allowClear
                            :options="shiyanSbOption"
                            @change="getSj">
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                    <a-form-item label="试验开始时间">
                        <a-time-picker
                        style="width: 100%"
                        format="HH:mm"
                        :valueFormat="'HH:mm'"
                        v-model="queryParam2.shiyanKaishitime"
                        placeholder="请选择试验开始时间"
                        />
                    </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                    <a-form-item label="试验结束时间">
                        <a-time-picker
                        style="width: 100%"
                        format="HH:mm"
                        :valueFormat="'HH:mm'"
                        v-model="queryParam2.shiyanJieshutime"
                        placeholder="请选择结束时间"
                        />
                    </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                    <a-form-item label="频次">
                        <a-input placeholder="请输入频次（分钟）" v-model="queryParam2.pinci"></a-input>
                    </a-form-item>
                    </a-col>
                </template>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                    <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="getList" icon="search">查询</a-button>
                    <a-button type="primary" @click="listReset" icon="reload" style="margin-left: 8px">重置</a-button>
                    <a-button type="primary" @click="submitSJ" icon="check" style="margin-left: 8px">提交</a-button>
                    <a-button type="primary" @click="submitFJ" icon="to-top" style="margin-left: 8px">附件</a-button>
                    <a-button type="primary" @click="create" icon="vertical-align-bottom" style="margin-left: 8px">生成</a-button>
                    <a @click="handleToggleSearch" style="margin-left: 8px">
                        {{ toggleSearchStatus ? '收起' : '展开' }}
                        <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                    </a>
                    </span>
                </a-col>
                </a-row>
            </a-form>
        </div>

        <vxe-toolbar>
          <template #buttons>
            <vxe-button icon="vxe-icon-square-plus" @click="insertEvent()">新增</vxe-button>
            <vxe-button @click="$refs.xTable.removeCheckboxRow()">删除选中</vxe-button>
          </template>
        </vxe-toolbar>

        <vxe-table
          border
          show-overflow
          ref="xTable"
          height="500"
          :data="dataSource"
          :mouse-config="{selected: true}"
          :checkbox-config="{range: true}"
          :menu-config="tableMenu"
          :loading="loading"
          :keyboard-config="{isArrow: true, isDel: true, isEnter: true, isTab: true, isEdit: true, isChecked: true}"
          :edit-config="{trigger: 'dblclick', mode: 'cell'}">
          <vxe-column type="checkbox" width="60"></vxe-column>
          <!-- <vxe-column field="shiyanType_dictText" title="试验类型" :edit-render="{autofocus: '.vxe-input--inner'}">
            <template #edit="{ row }">
              <input v-model="row.shiyanType" type="text" class="myinput" />
            </template>
          </vxe-column> -->
          <vxe-column field="shiyanType_dictText" title="试验类型" :edit-render="{}">
            <template #default="{ row }">
              <span>{{ formatShiyanType(row.shiyanType) }}</span>
            </template>
            <template #edit="{ row }">
              <vxe-select v-model="row.shiyanType" placeholder="请选择试验类型" transfer>
                <vxe-option v-for="(item, index) in shiyanTypeOption" :key="index" :value="item.value" :label="item.label"></vxe-option>
              </vxe-select>
            </template>
          </vxe-column>
          <vxe-column field="shiyanTime" title="生成时间" :edit-render="{autofocus: '.vxe-input--inner'}">
            <template #edit="{ row }">
              <vxe-input v-model="row.shiyanTime" type="text" placeholder="输入生成时间"></vxe-input>
              <!-- <vxe-input v-model="row.shiyanTime" type="time" placeholder="选择生成时间" clearable label-format="HH:mm" valueFormat="HH:mm"></vxe-input> -->
            </template>
          </vxe-column>
          <vxe-column field="shiyanWendu" title="温度" :edit-render="{autofocus: '.vxe-input--inner'}">
            <template #edit="{ row }">
              <vxe-input v-model="row.shiyanWendu" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="shiyanShidu" title="湿度" :edit-render="{autofocus: '.vxe-input--inner'}">
            <template #edit="{ row }">
              <vxe-input v-model="row.shiyanShidu" type="text"></vxe-input>
            </template>
          </vxe-column>
        </vxe-table>

        <a-modal
            :visible="visible"
            @ok="handleOk"
            @cancel="handleCancel"
            cancelText="关闭">
            <j-image-upload text="上传" v-model="fileList" isMultiple></j-image-upload>
        </a-modal>
        <!-- <a-modal
            :visible="visible"
            @ok="handleOk"
            @cancel="handleCancel"
            cancelText="关闭">
            <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="工单号" prop="woId">
                          <a-select
                            v-model="uploadParam.woId"
                            placeholder="请选择工单号"
                            show-search
                            allowClear
                            :options="weituoGdOptions"
                            @change="getWoId">
                          </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="上传附件" prop="remark">
                          <j-image-upload text="上传" v-model="fileList" isMultiple></j-image-upload>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-modal> -->
    </a-card>

  </div>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
// import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil'
import { getWeituoClientList, getWeituoInfoListByClient, getWeituoRq, getWeituoGdh, getWeiYi, getWeiSb, getWeiSj, listSj, saveSj, upload, getUpload } from '@/api/api'
import VXETable from 'vxe-table'
import JImageUpload from '@/components/jeecg/JImageUpload'
export default {
    mixins: [JeecgListMixin, mixinDevice],
    components: {JImageUpload},
    data() {
        return {
            // 查询
            queryParam2: {},
            queryParam: {},
            loading: false,
            // 委托单位列表
            weituoClientOptions : [],
            // 委托编号列表
            weituoNoOptions:[],
            // 工单日期列表
            weituoRqOptions:[],
            // 工单号下拉列表
            weituoGdOptions: [],
            // 试验类型下拉列表
            shiyanTypeOption: [],
            // 试验设备下拉列表
            shiyanSbOption: [],
            // 新增默认的试验类型
            shiyanType: '',
            // url: {
            //     list: '/itdmgomgongdanshuju/ItdmGongdanshuju/list',
            // },
            dataSource: [],
            tableMenu: {
                body: {
                options: [
                    [
                    { code: 'copy', name: '复制', prefixIcon: 'vxe-icon-copy', disabled: false },
                    { code: 'remove', name: '删除', disabled: false },
                    { code: 'save', name: '保存', prefixIcon: 'vxe-icon-save', disabled: false }
                    ]
                ]
                }
            },
            // 上传附件
            visible: false,
            fileList: [],
        }
    },
    created() {
        this.getClientList();
        // this.initDictConfig()
    },
    methods: {
        // 获取委托单位下拉列表
        getClientList(){
            getWeituoClientList().then((res) =>{
                console.log(res)
                this.weituoClientOptions = res.result.map( res => {
                return{
                    value: res,
                    label: res
                }
                })
            })
        },
        // 监听委托单位获取
        getWeituoClientOptions(value){
            console.log(value);
            this.weituoNoOptions = []
            this.queryParam2.weituoId = ''
            getWeituoInfoListByClient(this.queryParam2).then((res) =>{
                this.weituoNoOptions = res.result.map( res => {
                return{
                    value: res.id,  //传的值
                    label: res.weituoNo,  //展示
                }
                })
            })
        },
        // 监听选中的委托编号，以此获取日期的下拉列表
        getWeituoNoOptions(value){
            this.weituoRqOptions = []
            this.queryParam2.riqi = ''
            getWeituoRq(this.queryParam2).then((res) =>{
                console.log(res)
                this.weituoRqOptions = res.result.map( res => {
                    return{
                        value: res,  //传的值
                        label: res,  //展示
                    }
                })
            })
        },
        // 监听选中的日期，以此获取工单号的下拉列表
        getWeituoRqOptions(value){
            this.weituoGdOptions = []
            this.queryParam.woId = ''
            console.log(this.queryParam)
            // const query ={}
            // query.weituoClient = this.queryParam2.weituoClient
            // query.weituoId = this.queryParam2.weituoId
            // query.riqi = this.queryParam.riqi
            // console.log(query,this.queryParam,this.queryParam2)
            getWeituoGdh(this.queryParam2).then((res) =>{
                console.log(res)
                this.weituoGdOptions = res.result.map( res => {
                    return{
                        value: res,  //传的值
                        label: res,  //展示
                    }
                })
            })
        },
        // // 获取字典数据-试验类型
        // initDictConfig() {
        //   initDictOptions('shiiyan_type').then((res) => {
        //     if (res.success) {
        //         this.shiiyanTypeOptions = res.result;
        //     }
        //   });
        // },
        // 试验类型显示
        formatShiyanType (value) {
          var typeLabel
          var typeObj = this.shiyanTypeOption.find(res => res.value === value)
          if(typeObj){
            typeLabel = typeObj.label
          }
          return typeLabel
        },
        // 监听选中的工单，获取试验类型
        getWoId(value){
            // this.queryParam = {...this.queryParam}
            this.shiyanTypeOption = []
            this.queryParam2.shiyanType = ''
            const query ={}
            query.riqi = this.queryParam2.riqi
            query.woId = this.queryParam.woId
            console.log(query,this.queryParam,this.queryParam2)
            getWeiYi(query).then((res) => {
                console.log(res)
                this.shiyanTypeOption = res.result.map( res => {
                    return{
                        value: res.type,  //传的值
                        label: res.name,  //展示
                    }
                })
            })
            this.toggleSearchStatus = true;
        },
        getSb(){
            // this.queryParam2 = {...this.queryParam2}
            this.shiyanSbOption = []
            this.queryParam2.shebeiId = ''
            const query ={}
            query.riqi = this.queryParam2.riqi
            query.woId = this.queryParam.woId
            query.shiyanType = this.queryParam2.shiyanType
            console.log(query)
            getWeiSb(query).then((res) => {
                console.log(22222,res)
                this.shiyanSbOption = res.result.map( res => {
                    return{
                        value: res.type,  //传的值
                        label: res.name,  //展示
                    }
                })
            })
        },
        // 获取实绩开始时间结束时间
        getSj(){
            this.queryParam2 = {...this.queryParam2}
            // this.queryParam2.shiyanKaishitime = ''
            // this.queryParam2.shiyanJieshutime = ''
            const query ={}
            query.riqi = this.queryParam2.riqi
            query.woId = this.queryParam.woId
            query.shiyanType = this.queryParam2.shiyanType
            query.shebeiId = this.queryParam2.shebeiId
            console.log(query)
            getWeiSj(query).then((res) => {
                console.log(22222222,res)
                this.queryParam2.shiyanKaishitime = res.result.shiyanKaishitime
                this.queryParam2.shiyanJieshutime = res.result.shiyanJieshutime
                this.queryParam2 = {...this.queryParam2}
            })
        },
        // 获取已生成的数据列表
        getList(){
            this.loading = true
            console.log(2222,this.queryParam)
            listSj(this.queryParam).then((res) => {
                console.log(res)
                this.dataSource = res.result
                this.shiyanType = res.result[0].shiyanType
                this.loading = false
            })
        },
        listReset(){
            this.queryParam = {}
            this.queryParam2 = {}
            this.dataSource = []
        },
        // vex-table
        async insertEvent () {
            const $table = this.$refs.xTable
            const record = {
                // shiyanType: this.shiyanType,
                shiyanType: '',
                shiyanTime: '',
                shiyanWendu: '',
                shiyanShidu: ''
            }
            const { row: newRow } = await $table.insertAt(record)
            console.log(this.$refs.xTable)
            await $table.setActiveCell(newRow, 'shiyanType')
        },
        getInsertEvent () {
            const $table = this.$refs.xTable
            const insertRecords = $table.getInsertRecords()
            VXETable.modal.alert(insertRecords.length)
        },
        getSelectionEvent () {
            const $table = this.$refs.xTable
            const selectRecords = $table.getCheckboxRecords()
            VXETable.modal.alert(selectRecords.length)
        },

        // 提交
        submitSJ(){
            const querySubmit = {}
            querySubmit.woId = this.queryParam.woId
            querySubmit.shiyanDateTime = this.queryParam2.riqi
            querySubmit.list = this.$refs.xTable.afterFullData
            console.log(querySubmit)
            saveSj(querySubmit).then((res) => {
                if (res.success) {
                    this.$message.success("提交成功")
                    this.getList()
                }
            })
            // this.dataSource = this.$refs.xTable.afterFullData
            // console.log(this.dataSource)
            // saveSj(this.dataSource).then((res) => {
            // })
        },
        // 上传附件打开
        submitFJ(){
          getUpload({woId: this.queryParam.woId}).then(res => {
            console.log(res.result)
            this.fileList = res.result.split(',')
            console.log(this.fileList)
            this.visible = true;
          })
        },
        // 上传附件确定
        handleOk () {
            var query = {
                woId: this.queryParam.woId,
                images: this.fileList.toString()
            }
            upload(query).then(res => {
                this.fileList = []
                this.visible = false
            })
        },
        // 上传附件取消
        handleCancel(){
            this.visible = false
            this.fileList = []
        },

        create() {

            var select = this.queryParam
            select.riqi = this.queryParam2.riqi
            select.shiyanType = this.queryParam2.shiyanType
            select.shebeiId = this.queryParam2.shebeiId
            select.shiyanKaishitime = this.queryParam2.shiyanKaishitime
            select.shiyanJieshutime = this.queryParam2.shiyanJieshutime
            select.pinci = this.queryParam2.pinci

            httpAction('/itdmgomgongdanshuju/ItdmGongdanshuju/create',select, 'post').then((res) => {
                if (res.success) {
                console.log(res)
                this.$message.success(res.message)
                this.modalFormOk()
                } else {
                this.$message.warning(res.message)
                }
                this.searchReset()
            })

        },
    }

}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>