dy-admin-manager/src/views/repairManager/repairList.vue

<!--  -->
<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      维修单列表
    </h2>
    <div class="m-core">
      <save-form
        :inline="true"
        @submit="search"
        @reset="onReSet"
        :model="searchForm"
      >
        <el-form-item>
          <el-input
            v-model.trim="searchForm.search"
            clearable
            @keyup.enter.native="search"
            placeholder="维修单号/姓名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            type="number"
            v-model="searchForm.studentInstrumentId"
            clearable
            placeholder="维护编号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            placeholder="是否有特权减免金额"
            v-model.trim="searchForm.hasExemptionAmount"
            clearable
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            placeholder="维修技师"
            v-model="searchForm.employeeId"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) in employeeList"
              :label="item.userName"
              :value="item.userId"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            placeholder="请选择分部"
            v-model="searchForm.organIdList"
            clearable
          >
            <el-option
              v-for="(item, index) in selects.branchs"
              :label="item.name"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-select
            placeholder="请选择乐器类型"
            v-model="searchForm.subjectId"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) in soundLists"
              :label="item.name"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-select
            placeholder="维修状态"
            v-model="searchForm.repairStatus"
            clearable
          >
            <el-option label="已完成" value="1"></el-option>
            <el-option label="维修中" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="维修类型" v-model="searchForm.type" clearable>
            <el-option label="线上" value="1"></el-option>
            <el-option label="线下" value="0"></el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="送修日期">
          <el-date-picker
            v-model.trim="searchForm.timer"
            style="width: 400px"
            type="daterange"
            value-format="yyyy-MM-dd"
            :picker-options="{
              firstDayOfWeek: 1,
            }"
            range-separator="至"
            start-placeholder="送修开始日期"
            end-placeholder="送修结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" native-type="submit">搜索</el-button>
          <el-button native-type="reset" type="primary">重置</el-button>
        </el-form-item>
      </save-form>
      <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="tableList"
        >
          <el-table-column align="center" prop="organName" label="分部">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.organName }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="transNo"
            label="维修单号"
            width="175"
          >
            <template slot-scope="scope">
              <copy-text>{{ scope.row.transNo }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="studentName" label="学生姓名">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.studentName }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="studentId" label="学生编号">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.studentId }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="employeeName" label="维修技师">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.employeeName }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="subjectName" label="乐器种类">
            <template slot-scope="scope">
              <copy-text>{{ scope.row.subjectName }}</copy-text>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="type" label="维修类型">
            <template slot-scope="scope">{{
              scope.row.type ? "线上" : "线下"
            }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="repairName"
            label="维修单名称"
          ></el-table-column>
          <el-table-column align="center" prop="createTime" label="送修日期">
            <template slot-scope="scope">{{
              scope.row.createTime | formatTimer
            }}</template>
          </el-table-column>
          <el-table-column align="center" prop="finishTime" label="完成日期">
            <template slot-scope="scope">{{
              scope.row.finishTime | formatTimer
            }}</template>
          </el-table-column>
          <el-table-column align="center" prop="repairStatus" label="状态">
            <template slot-scope="scope">{{
              scope.row.repairStatus ? "已完成" : "维修中"
            }}</template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="showDetail(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          sync
          :total.sync="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog
      title="维修单详情"
      :close-on-click-modal="false"
      :visible.sync="repairVisible"
      width="600px"
    >
      <el-form :model="visibleForm" :inline="true">
        <el-row>
          <el-col :span="12">
            <el-form-item label="维修单号:">
              <p v-if="activeRow" class="visibleCell">
                {{ activeRow.transNo }}
              </p>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维修单名称:">
              <p v-if="activeRow" class="visibleCell">
                {{ activeRow.repairName }}
              </p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="学生姓名:">
              <p v-if="activeRow" class="visibleCell">
                {{ activeRow.studentName }}
              </p>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属乐团:">
              <p v-if="activeRow" class="visibleCell">
                {{ activeRow.studentSchool }}
              </p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="activeRow&&activeRow.sendType!=0" >
          <el-col :span="12">
            <el-form-item label="联系人:">
              <p v-if="activeRow" class="visibleCell">
                {{ activeRow.contactName }}
              </p>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式:">
              <p v-if="activeRow" class="visibleCell">
                {{ activeRow.contactMobile }}
              </p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮寄地址:" v-if="activeRow&&activeRow.sendType!=0">
              <p v-if="activeRow" class="visibleCell">
                {{ activeRow.address }}
              </p>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="取件方式:">
              <p v-if="activeRow" class="visibleCell">
                {{ activeRow.sendType == "0" ? "自取" : "邮寄" }}
              </p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="维修服务费:">
              <p v-if="activeRow" class="visibleCell">
                {{ activeRow.amount | moneyFormat }}元
              </p>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否乐保乐器:">
              <p v-if="activeRow" class="visibleCell">
                {{ activeRow.maintenanceStatus ? '是' : '否' }}
              </p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="特权减免金额">
              <p v-if="activeRow">
                {{ activeRow.exemptionAmount | moneyFormat }}
              </p>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col>
            <el-form-item label="实际支付服务费">
              {{ 0.0 }}
            </el-form-item>
          </el-col>
        </el-row> -->

        <el-form-item
          label="问题描述及解决方案:"
          style="width: 100%; margin-bottom: 0"
        ></el-form-item>
        <div>
          <el-row>
            <el-col :span="5" v-for="url in imgList" :key="url">
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="url"
                  fit="fill"
                  :preview-src-list="imgList"
                ></el-image>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <!-- <div>
          <el-image
            v-for="(item, index) in srcList"
            :key="index"
            style="width: 100px; height: 100px; margin-right: 10px"
            :src="url"
            :preview-src-list="srcList"
          >
          </el-image>
        </div> -->
        <el-input
          type="textarea"
          v-if="activeRow"
          style="width: 100%"
          :rows="3"
          v-model="activeRow.description"
          :disabled="activeRow && Boolean(activeRow.finishTime)"
        ></el-input>
        <el-form-item
          label="收费组成:"
          style="width: 100%; margin-bottom: 0"
          v-if="activeRow && activeRow.feeList"
        ></el-form-item>
        <el-input
          type="textarea"
          v-if="activeRow && activeRow.feeList"
          style="width: 100%"
          :rows="3"
          v-model="activeRow.feeList"
          :disabled="true"
        ></el-input>
        <el-form-item
          label="商品列表:"
          style="width: 100%; margin-bottom: 0"
        ></el-form-item>
        <el-table
          style="width: 100%"
          v-if="activeRow"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="activeRow.goodsList"
        >
          <el-table-column
            align="center"
            prop="name"
            label="商品名"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="groupPurchasePrice"
            label="商品价格（元）"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.groupPurchasePrice | moneyFormat }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="danger"
          v-if="!(activeRow && Boolean(activeRow.finishTime))"
          v-permission="'studentRepair/repairSuccess'"
          @click="repairEnd('save', activeRow)"
          >保存</el-button
        >
        <el-button
          type="primary"
          v-permission="'studentRepair/repairSuccess'"
          v-if="!(activeRow && activeRow.finishTime)"
          @click="repairEnd('end', activeRow)"
          >完成维修</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import pagination from "@/components/Pagination/index";
import load from "@/utils/loading";
import { getSoundTree } from "@/api/buildTeam";
import {
  findAllTechnician,
  studentRepairList,
  repairSuccess,
} from "@/api/repairManager";
export default {
  components: { pagination },
  data() {
    return {
      searchForm: {
        search: null,
        employeeId: null,
        organIdList: null,
        repairStatus: null,
        // subjectId: null,
        time: [],
        exemptionAmount: "",
      },
      repairVisible: false,
      employeeList: [],
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      soundLists: [],
      soundList: [],
      isInit: false,
      visibleForm: {},
      activeRow: null,
      srcList: [],
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.$route.query.studentInstrumentId) {
      this.searchForm = {
        ...this.searchForm,
        ...this.$route.query,
      };
      this.$router.replace("/business/repairList");
    }
    findAllTechnician().then((res) => {
      if (res.code == 200) {
        this.employeeList = res.data;
      }
    });
    this.$store.dispatch("setBranchs");
    // 获取声部
    getSoundTree({ tenantId: 1, rows: 9999 }).then((res) => {
      if (res.code == 200) {
        if (res.code == 200) {
          this.soundList = res.data.rows;
          this.getSound();
        }
      }
    });
    // if (!this.isInit) {
    this.init();
    // }
  },
  methods: {
    init() {
      this.isInit = true;
      this.getList();
    },
    getList() {
      let obj = JSON.parse(JSON.stringify(this.searchForm));
      obj.page = this.rules.page;
      obj.rows = this.rules.limit;
      if (this.searchForm.timer && this.searchForm.timer.length > 0) {
        obj.startTime = this.searchForm.timer[0];
        obj.endTime = this.searchForm.timer[1];
      }
      delete obj.timer;
      studentRepairList(obj).then((res) => {
        if (res.code == 200) {
          this.isInit = false;
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      });
    },
    getSound() {
      // soundLists
      // soundList
      this.soundLists = [];
      for (let i in this.soundList) {
        if (this.soundList[i].subjects.length > 0) {
          this.soundLists = this.soundLists.concat(this.soundList[i].subjects);
        }
      }
    },
    onReSet() {
      this.searchForm = {
        search: null,
        employeeId: null,
        organIdList: null,
        repairStatus: null,
        // subjectId: null,
        time: [],
      };
      this.search();
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    showDetail(row) {
      let goodsList = row.goodsJson ? JSON.parse(row.goodsJson) : [];
      row.goodsList = goodsList;
      this.activeRow = row;
      this.repairVisible = true;
    },
    repairEnd(str, row) {
      let repairStatus = null;
      if (str && str == "end") {
        repairStatus = 1;
      }
      repairSuccess({
        repairStatus: repairStatus,
        id: row.id,
        description: row.description,
      }).then((res) => {
        if (res.code == 200) {
          if (str && str == "end") {
            this.$message.success("完成维修");
          } else {
            this.$message.success("保存成功");
          }
          this.repairVisible = false;
          this.getList();
        }
      });
    },
  },
  watch: {
    repairVisible(val) {
      if (!val) {
        this.activeRow = null;
      }
    },
  },
  computed: {
    imgList() {
      let activeRow = this.activeRow
      let arr = activeRow?.repairImg ? activeRow.repairImg.split(",") : []
      return arr;
    },
  },
};
</script>
<style lang='scss' scoped>
.visibleCell {
  // width: 180px;
}

.box-card {
  align-items: center;
  height: 102px;
  width: 102px;
  margin-bottom: 20px;
}
</style>