water-tank-installation-portal/src/views/base/workOrder-detail.vue

<template>
    <el-dialog
      :visible.sync="showDialog"
      :title="title"
      :modal-append-to-body="false"
      style="text-align: left;"
      @close="closeDialog"
      :close-on-click-modal="false"
      width="1500px"
    >
      <div class="user-panel" v-loading="loading">
        <el-form
          ref="form"
          :model="formModel"
          :rules="ruleValidate"
          :label-width="'100px'"
          :inline="true"
        >
          <el-form-item label="工单号" prop="number">
            <el-input v-model="formModel.number" placeholder="请输入真实姓名" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-input v-model="formModel.title" placeholder="请输入联系电话" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="formModel.address" placeholder="请输入身份证号" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="日期" prop="date">
            <el-input v-model="formModel.date" placeholder="请输入所在地区" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="报价" prop="price">
            <el-input v-model="formModel.price" placeholder="请输入报价" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="支付状态" prop="payStatus">
            <el-select v-model="formModel.payStatus" placeholder="请选择" style="width: 300px">
              <el-option
                v-for="item in paystatusList"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="工单信息" name="first">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>工单信息</span>
                    </div>
                    <div>
                        <el-form
                            ref="form"
                            :model="formModel2"
                            :rules="ruleValidate"
                            :label-width="'150px'"
                            :inline="true"
                            >
                        <el-form-item label="所在地" prop="address">
                            <el-input v-model="formModel2.address" placeholder="请输入所在地" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="施工位置" prop="location">
                            <el-select v-model="formModel2.location" placeholder="请选择" style="width: 300px">
                              <el-option
                                v-for="item in locationList"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                              </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="施工环境" prop="environment">
                            <el-select v-model="formModel2.environment" placeholder="请选择" style="width: 300px">
                              <el-option
                                v-for="item in environmentList"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                              </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="水箱材质" prop="material">
                            <el-select v-model="formModel2.material" placeholder="请选择" style="width: 300px">
                              <el-option
                                v-for="item in materialList"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                              </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="水箱体积" prop="volume">
                            <el-input v-model="formModel2.volume" placeholder="请输入所在地" style="width: 300px">
                              <template slot="append">m³</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="异型水箱补贴" prop="amount">
                            <el-input v-model="formModel2.amount" placeholder="请输入所在地" style="width: 300px">
                              <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="施工难度" prop="difficulty">
                            <el-select v-model="formModel2.difficulty" placeholder="请选择" style="width: 300px">
                              <el-option
                                v-for="item in difficultyList"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                              </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="额外补助" prop="subsidyType">
                            <el-input v-model="formModel2.subsidyType" placeholder="请输入所在地" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="补贴金额" prop="subsidyAmount">
                            <el-input v-model="formModel2.subsidyAmount" placeholder="请输入所在地" style="width: 300px">
                              <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="工程总预算" prop="budget">
                            <el-input v-model="formModel2.budget" placeholder="请输入所在地" style="width: 300px">
                              <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="工期要求" prop="period">
                            <el-input v-model="formModel2.period" placeholder="请输入所在地" style="width: 300px">
                              <template slot="append">月</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="通过后打款比例" prop="completionPayProp">
                            <el-input v-model="formModel2.completionPayProp" placeholder="请输入所在地" style="width: 300px">
                              <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="驻地条件要求" prop="requirement">
                            <el-input v-model="formModel2.requirement" placeholder="请输入所在地" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="施工阶段要求" prop="stageRequirements">
                            <el-input v-model="formModel2.stageRequirements" placeholder="请输入所在地" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="验收标准" prop="acceptanceCriteria">
                            <el-input v-model="formModel2.acceptanceCriteria" placeholder="请输入所在地" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="售后要求" prop="salesRequirement">
                            <el-input v-model="formModel2.salesRequirement" placeholder="请输入所在地" style="width: 300px"></el-input>
                        </el-form-item>
                        </el-form>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>接单要求</span>
                    </div>
                    <div>
                        <el-form
                            ref="form"
                            :model="formModel3"
                            :rules="ruleValidate"
                            :label-width="'250px'"
                            :inline="true"
                            >
                        <el-form-item label="保证金" prop="amount">
                            <el-input v-model="formModel3.amount" placeholder="请输入所在地" style="width: 300px">
                              <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="师傅完成工单量" prop="completedNum">
                            <el-input v-model="formModel3.completedNum" style="width: 300px">
                              <template slot="append">单</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="订单发布模式" prop="orderModel">
                            <el-select v-model="formModel3.orderModel" placeholder="请选择" style="width: 300px">
                              <el-option
                                v-for="item in orderModelList"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                              </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否要求师傅具有施工资质" prop="isQualification">
                            <el-switch
                            style="width: 300px"
                              v-model="formModel3.isQualification">
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="是否要求师傅上传购买保险凭证" prop="isInsuranceCertificate">
                            <el-switch
                            style="width: 300px"
                              v-model="formModel3.isInsuranceCertificate">
                            </el-switch>
                        </el-form-item>

                    </el-form>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>客户信息</span>
                    </div>
                    <div>
                        <el-form
                            ref="form"
                            :model="formModel4"
                            :rules="ruleValidate"
                            :label-width="'150px'"
                            :inline="true"
                            >
                        <el-form-item label="客户名称">
                            <el-input v-model="formModel4.customerName" placeholder="请输入所在地" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式" prop="phone">
                            <el-input v-model="formModel4.customerPhone" placeholder="请输入所在地" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-form>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                    <span>订单信息</span>
                    </div>
                    <div>
                        <el-form
                            ref="form"
                            :model="formModel5"
                            :rules="ruleValidate"
                            :label-width="'150px'"
                            :inline="true"
                            >
                        <el-form-item label="订单状态" prop="status">
                            <el-select v-model="formModel.status" placeholder="请选择订单状态" style="width: 300px">
                              <el-option
                                v-for="item in orderStatusList"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                              </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="订单编号" prop="number">
                            <el-input v-model="formModel.number" placeholder="请输入订单编号" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="发布时间" prop="createTime">
                            <el-input v-model="formModel.createTime" placeholder="请输入发布时间" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-form>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="现场照片" name="second">
                <div>
                    <el-image v-for="(item,index) in imageList" :key="index"
                        class="img"
                        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                        fit="fit"></el-image>
                </div>
            </el-tab-pane>
            <el-tab-pane label="师傅信息" name="third">
                <div style="margin:30px">
                    <el-descriptions v-if="technicianInfo!=null">
                        <el-descriptions-item label="姓名">{{technicianInfo.realName}}</el-descriptions-item>
                        <el-descriptions-item label="星级">4.6分</el-descriptions-item>
                        <el-descriptions-item label="已完成单数">50单</el-descriptions-item>
                        <el-descriptions-item label="好评率">80%</el-descriptions-item>
                        <el-descriptions-item label="擅长类目">家具灯具厨卫健身器材</el-descriptions-item>
                        <el-descriptions-item label="师傅来源">4.6分</el-descriptions-item>
                        <el-descriptions-item label="所在地区">50单</el-descriptions-item>
                        <el-descriptions-item label="公司性质">80%</el-descriptions-item>
                        <el-descriptions-item label="公司地址">家具灯具厨卫健身器材</el-descriptions-item>
                        <el-descriptions-item label="联系电话">4.6分</el-descriptions-item>
                        <el-descriptions-item label="服务介绍">50单</el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-tab-pane>
            <el-tab-pane label="施工进度" name="fourth">
                <div style="margin:50px">
                  <el-timeline >
                    <el-timeline-item :timestamp="item.submitDate" placement="top" v-for="(item,index) in constructionProgressList" :key="index">
                        <h4>{{item.submitByN}} {{item.title}}</h4>
                        <div>
                          <el-image v-for="(item1,index1) in item.imageList" :key="index1"
                          class="img"
                          style="width:50px;height:50px"
                          :src="item1"
                          fit="fit"></el-image>
                        </div>
                        <p>{{item.submitByN}} 提交于 {{item.submitTime}}</p>
                    </el-timeline-item>
                  </el-timeline>
                </div>
            </el-tab-pane>
            <el-tab-pane label="客户评价" name="five">
                <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="companyName"
                    label="评论人"
                    width="180">
                </el-table-column>
                <el-table-column prop="starRating" label="星级" >
                  <template slot-scope="{row}">
                    <el-rate v-model="row.starRating" disabled ></el-rate>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="content"
                    label="评论内容" width="400">
                </el-table-column>
                <el-table-column prop="address" label="评论图片">
                  <template slot-scope="{row}">
                    <span>
                      <el-image
                    class="img"
                    style="width: 50px; height: 50px"
                    :src="row.image"
                    fit="fit"></el-image>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="评论时间">
                </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <!-- <el-button type="primary" @click="handleSubmit" :loading="submitting"
          >确 定</el-button
        > -->
      </span>
    </el-dialog>
  </template>
  <script>
  import Constant from "@/constant";
  import { getToken } from "@/utils/auth"; // get token from cookie
  import workOrderApi from "@/api/base/workOrder";
  import dataDictionaryApi from "@/api/sys/dataDictionary";
  
  export default {
    props: ["businessKey", "title"],
    data() {
      return {
          showPwd: true,
          ruleValidate: {

          },
          roleList: [],
          formModel: {},
          formModel2:{},
          formModel3:{},
          formModel4:{},
          formModel5:{},
          tableData:[],
          showDialog: true,
          loading: false,
          submitting: false,
          enterpriseList:[],
          //上传地址
          uploadUrl: Constant.serverUrl + "/uploadPicture",
          uploadData: {
              subFolder: "water-tank",
          },
          fileUrl: "",
          headers: {
              Authorization: getToken(),
          },
          activeName: 'first',
          paystatusList:[],
          orderStatusList:[],
          orderModelList:[],
          technicianInfo:{},
          imageList:[],
          constructionProgressList:[],
          reverse: true,
          locationList:[],
          environmentList:[],
          materialList:[],
          difficultyList:[],
      };
    },
    created() {
      var self = this;

      dataDictionaryApi.findByCatalogName({
        catalogName: "支付状态",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.paystatusList = jsonData.data;
      });

      dataDictionaryApi.findByCatalogName({
        catalogName: "工单状态",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.orderStatusList = jsonData.data;

        //alert(JSON.stringify(self.orderStatusList))
      });

      dataDictionaryApi.findByCatalogName({
        catalogName: "订单发布模式",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.orderModelList = jsonData.data;
      });

      dataDictionaryApi.findByCatalogName({
        catalogName: "施工位置",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.locationList = jsonData.data;
      });

      dataDictionaryApi.findByCatalogName({
        catalogName: "施工环境",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.environmentList = jsonData.data;
      });

      dataDictionaryApi.findByCatalogName({
        catalogName: "水箱材质",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.materialList = jsonData.data;
      });

      dataDictionaryApi.findByCatalogName({
        catalogName: "施工难度",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.difficultyList = jsonData.data;
      });
    },
    methods: {
      closeDialog() {
        this.$emit("close", false);
      },
      handleSubmit() {
        var self = this;
  
        this.$refs["form"].validate((valid) => {
          if (valid) {
            (function () {
              var id = self.formModel.id;
  
              if (id == null || id.length == 0) {
                return workOrderApi.add(self.formModel);
              } else {
                return workOrderApi.update(self.formModel);
              }
            })().then(function (response) {
              var jsonData = response.data;
  
              if (jsonData.result) {
                self.$message({
                  message: "保存成功!",
                  type: "success",
                });
  
                self.$emit("close", true);
              } else {
                self.$message({
                  message: jsonData.message + "",
                  type: "warning",
                });
  
                self.$emit("close", false);
              }
            });
          }
        });
      },
      handleAvatarSuccess(res, file) {
          var self = this;
          self.formModel.image = res.data;
  
          self.fileUrl =
            res.data + "?x-oss-process=image/resize,m_lfit,h_300,w_300";
      },
      beforeAvatarUpload(file) {
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isLt2M;
      }
    },
    async mounted() {
      var self = this;
      self.loading = true;
  
      (function () {
        if (self.businessKey != null && self.businessKey.length > 0) {
          return workOrderApi.edit(self.businessKey);
        } else {
          return workOrderApi.create();
        }
      })()
        .then((response) => {
          self.showModal = true;
          var jsonData = response.data;
  
          if (jsonData.result) {
              self.formModel = jsonData.data.workOrder;
              self.formModel2 = jsonData.data.installationRequirement;
              self.formModel3 = jsonData.data.receiveRequire;
              self.formModel4.customerName = jsonData.data.customerName;
              self.formModel4.customerPhone = jsonData.data.customerPhone;
              self.tableData = jsonData.data.commentInfoList;
              self.technicianInfo = jsonData.data.technicianInfo;
              self.imageList = jsonData.data.imageList;
              self.constructionProgressList = jsonData.data.constructionProgressList;
  
              let image = self.formModel.image;
              if (image != null) {
                  self.fileUrl = image 
              }
  
             
          } else {
            self.$message.error(jsonData.message + "");
          }
  
          self.loading = false;
        })
        .catch((error) => {
          self.$message.error(error + "");
          self.loading = false;
        });
    },
    components: {
    },
  };
  </script>
  <style scoped>
  .user-panel {
    margin: 10px auto;
  }
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .box-card{
        margin-bottom:10px
    }
    .img{
        width: 100px; 
        height: 100px;
        margin:10px
    }
    
  </style>