udiwms-vue-frame/src/views/dev/deviceRepairApply.vue

<template>
  <div>
    <el-card>

      <el-form :model="query" v-if="showSearch" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="报修信息">
              <el-input v-model.trim="query.repairInfo" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="受理信息">
              <el-input v-model.trim="query.acceptInfo" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="受理状态">
              <el-select v-model="query.status" clearable>
                <el-option v-for="item in deviceRepairApplyStatus" :label="item.desc" :value="item.key" :key="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="top-right-btn">
        <el-button-group>
          <el-button icon="el-icon-view" type="primary" @click="showSearch = !showSearch">显示/隐藏搜索栏</el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onReset"
          >重置
          </el-button>
          <el-button type="primary" icon="el-icon-search" @click="search"
          >查询
          </el-button>
          <el-button type="primary" icon="el-icon-plus" @click="openCreate"
          >新增
          </el-button>
        </el-button-group>
      </div>
      <el-divider style="margin: 15px"></el-divider>

      <el-table :data="list" ref="table"
                v-loading="loading" @row-click="rowClick" highlight-current-row
                click-row-light>
        <el-table-column label="序号" width="50" type="index"/>
        <el-table-column label="报修号" width="150" prop="id"/>
        <el-table-column label="状态" width="150" prop="statusName">
          <template slot-scope="scope">
            <el-tag :type="deviceRepairApplyStatus[scope.row.status].tagType">{{ scope.row.statusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="报修部门" width="120" prop="applyDeptName"/>
        <el-table-column label="报修人" width="120" prop="applyUserName"/>
        <el-table-column label="报修人电话" width="120" prop="applyUserPhone"/>
        <el-table-column label="报修时间" width="140" prop="applyTime"/>
        <el-table-column label="受理部门" width="140" prop="confirmDeptName"/>
        <el-table-column label="受理人" width="140" prop="confirmUserName"/>
        <el-table-column label="受理人电话" width="140" prop="confirmPhone"/>
        <el-table-column label="受理时间" width="140" prop="confirmTime"/>
        <el-table-column label="设备数量" width="100" prop="deviceCount"/>
        <el-table-column label="已完成数量" width="100" prop="finishCount"/>
        <!--        <el-table-column label="操作" fixed="right" width="80">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-button type="text" @click="delFunc(scope.row)">删除</el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="query.page"
        :limit.sync="query.limit"
        @pagination="getList"
      />
    </el-card>

    <el-card>
      <div slot="header" class="clearfix">
        <div class="fl">
          {{ `报修单详情 ${clickRow ? '——' + clickRow.id : ''}` }}
        </div>
        <div v-if="clickRow" class="fr">
          <el-button @click="getDetailList">刷新</el-button>
        </div>
      </div>
      <el-table :data="detailList" v-loading="detailLoading">
        <el-table-column label="序号" width="50" type="index"/>
        <el-table-column label="设备编码" width="150" prop="deviceCode"/>
        <el-table-column label="设备部门" width="100" prop="deptName"/>
        <el-table-column label="最小销售标识" width="150" prop="nameCode"/>
        <el-table-column label="名称" width="150" prop="productName"/>
        <el-table-column label="规格型号" width="160" prop="ggxh"/>
        <el-table-column label="状态" width="160" prop="statusName">
          <template slot-scope="scope">
            <el-tag :type="deviceRepairApplyDetailStatus[scope.row.status].tagType">{{ scope.row.statusName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否维修" width="160" prop="repairFlag">
          <template slot-scope="scope">
                <span>{{
                    scope.row.repairFlag == null ? "" : scope.row.repairFlag ? "维修" : "不维修(报废/销毁)"
                  }}
                </span>
          </template>
        </el-table-column>
        <el-table-column label="问题描述" width="160" prop="description"/>
        <el-table-column label="诊断信息" width="160" prop="diagnosisInfo"/>
        <el-table-column label="计量单位" width="100" prop="measname"/>
        <el-table-column label="批次号" width="100" prop="batchNo"/>
        <el-table-column label="序列号" width="100" prop="serialNo"/>
        <el-table-column label="生产日期" width="140" prop="productionDate"/>
        <el-table-column label="过期时间" width="140" prop="expireDate"/>
        <el-table-column label="供应商" width="100" prop="supName"/>
        <el-table-column label="udi码" width="150" prop="udi"/>
        <el-table-column label="注册/备案号" width="150" prop="zczbhhzbapzbh"/>
        <el-table-column label="生产企业" width="180" prop="manufactory"/>
        <el-table-column label="操作" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button type="text" :disabled="!scope.row.repairId" @click="repairId = scope.row.repairId">查看维修单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="detailTotal>0"
        :total="detailTotal"
        :page.sync="detailQuery.page"
        :limit.sync="detailQuery.limit"
        @pagination="getDetailList"
      />

    </el-card>

    <el-dialog
      :visible="createFlag"
      v-if="createFlag"
      width="80%"
      title="创建报修单"
      @close="createFlag = false"
    >
      <el-card>
        <div slot="header" class="clearfix">
          <div class="fl">
          </div>
          <div class="fr">
            <el-button @click="createFlag = false">取消</el-button>
            <el-button type="primary" @click="saveFunc">保存</el-button>
          </div>
        </div>
        <el-form :model="saveData" ref="saveForm" :rules="formRule" label-width="auto">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="报修部门" prop="applyDeptCode">
                <deptSelect :value.sync="saveData.applyDeptCode"/>
              </el-form-item>
            </el-col>
<!--            <el-col :span="8">-->
<!--              <el-form-item label="报修部门">-->
<!--                {{ user.locDeptName }}-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="8">-->
<!--              <el-form-item label="报修人">-->
<!--                {{ user.employeeName }}-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="12">
              <el-form-item label="报修人电话" prop="applyUserPhone">
                <el-input v-model="saveData.applyUserPhone" clearable show-word-limit maxlength="20"/>
              </el-form-item>
            </el-col>
            <el-col>
              <el-card style="background-color: #e6f1ff;">
                <div slot="header" class="clearfix">
                  <div class="fl">
                    <el-form-item style="margin-bottom: 0px;" label-width="auto" label="报修设备" prop="details">
                      <div slot="error" slot-scope="scope" style="color: #ff4949;white-space:nowrap;">
                        {{ scope.error }}
                      </div>
                    </el-form-item>
                  </div>
                  <div class="fr">
                    <el-button type="primary" @click="chooseDeviceFlag=true">选入设备</el-button>
                  </div>
                </div>
                <div class="grid-container" v-if="saveData.details&&saveData.details.length>0">
                  <el-card
                    :body-style="{padding:0,paddingTop:'10px' }" class="grid-item"
                           v-for="(item,i) in saveData.details" :key="item.deviceCode">
                    <div slot="header" class="clearfix" >
                      <div class="fl">
                        设备号：{{ item.deviceCode }}
                      </div>
                      <div class="fr" >
                        <el-button type="text" @click="removeDetail(i)">移除</el-button>
                      </div>
                    </div>
                    <el-form :model="item" :rules="detailRules" :ref="item.deviceCode" label-width="auto" >
                      <el-descriptions border label-style="width:70px" :column="2">
                        <el-descriptions-item label="名称" >{{ item.productName }}</el-descriptions-item>
                        <el-descriptions-item label="规格" >{{ item.ggxh }}</el-descriptions-item>
                        <el-descriptions-item label="问题描述" disabled>
                          <el-row>
                            <el-col>
                              <el-form-item label=" " prop="description">
                                <el-input type="textarea" resize="none" :autosize="{ minRows: 4, maxRows: 4 }" clearable
                                          show-word-limit
                                          maxlength="300" v-model.trim="item.description"/>
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </el-descriptions-item>

                        <el-descriptions-item label="报修现场图片" span="4" label-style="height:100px">
                          <localImageUpload
                            :fileType="['image/jpeg','image/png','image/gif']"
                            :maxFiles= "maxFiles"
                            :fileSizeLimit="fileSizeLimit"
                            :type="deptDeviceCheck"
                            :uploadedFileNames="item.livePath"
                            :isShowTip="false"
                            :disabledUp="true"
                          ></localImageUpload>
                        </el-descriptions-item>

                      </el-descriptions>
                    </el-form>
                  </el-card>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-dialog>


    <el-dialog width="80%" title="选择设备(只能选择状态为'正常'的设备)"
               :visible="true"
               v-if="chooseDeviceFlag"
               @close="chooseDeviceFlag = false"
    >
      <deviceInfo :is-choose="true" :chooseFunc="chooseDevice"/>

    </el-dialog>

    <el-dialog
      visible
      v-if="repairId"
      @close="repairId=null"
      title="维修单信息"
      width="80%"
    >
      <deviceRepairDialog :repairId="repairId" :disabledUp="true" />

    </el-dialog>
  </div>
</template>

<script src="./js/deviceRepairApply.js"/>

<style lang="scss" scoped>

.grid-container {
  height: inherit;
  grid-template-columns: repeat(1, 1fr);
  display: grid;
  grid-gap: 10px;

  .el-card {
    margin: 0;
    padding-top: 0;
  }
}


.grid-item {
  height: 100%;
  padding: 15px;

  .el-row, .el-col {
    height: 100%;
  }

  .header {
    color: #676a6c;
    font-size: 20px;
    font-weight: bolder;
  }

  .el-table {
    margin-top: 10px;
    width: 100%;
  }
}

::v-deep .el-dialog__body {
  padding: 0 0 20px 0;
}

::v-deep .el-select {
  width: 100%;
}

</style>