zuel-itsm-3.0.2/src/views/repair.vue

<template>
  <div slot="content" class="bgColor">
    <cube-form
      :model="model"
      @validate="validateHandler"
      @submit="submitHandler"
    >
      <cube-form-group>
        <!-- <div class="label">
                    报修联系人</div>
                <div class="zhidu">
                    <div>联系人:</div>
                    <div>{{name}}</div>
        </div>-->
        <cube-form-item :field="fields[5]" v-if="repairMain.valueconfig == 2">
          <cube-input
            @input="showDeptId(model.deptId)"
            @blur="model.deptId = deptIdText"
            v-model="model.deptId"
            >{{ model.deptId || "请输入报修科室" }}</cube-input
          >
        </cube-form-item>

        <cube-form-item :field="fields[0]"></cube-form-item>
        <cube-form-item :field="fields[1]"></cube-form-item>
        <cube-form-item
          :field="fields[2]"
          class="btn_plcaeholde"
        ></cube-form-item>
        <cube-form-item :field="fields[8]" v-if="ifRoom == 1"></cube-form-item>
        <cube-form-item :field="fields[3]"></cube-form-item>
        <!-- <cube-form-item :field="fields[3]">
          <cube-input
            @focus="showAddress(model.address)"
            @input="showAddress(model.address)"
            v-model="model.address"
            >{{ model.address || "请输入故障地点" }}</cube-input
          >
        </cube-form-item> -->
        <cube-form-item
          :field="fields[6]"
          v-if="reqHasCategory.valueconfig == 1"
        ></cube-form-item>
        <div class="label">报修信息</div>
        <div class="zc" v-if="wxIncidentWithCmdb == 1">
          <cube-form-item :field="fields[7]" class="zc-item"></cube-form-item>
          <span class="icon dash dash-saoyisao zc-sao" @click="scan()"></span>
        </div>
        <cube-form-item :field="fields[4]"></cube-form-item>
        <div class="label">
          报修图片
          <span>(最多可上传3张JPG或PNG,每张不能超过10M)</span>
        </div>
        <div class="uplod">
          <!-- <div>报修图片:</div> -->
          <cube-upload
            ref="upload"
            :max="3"
            :action="action"
            :simultaneous-uploads="3"
            @files-added="filesAdded"
            @file-submitted="fileSubmitted"
          />
        </div>
      </cube-form-group>
      <cube-form-group class="sub">
        <cube-button type="submit" @click="subVali()">提交报修</cube-button>
      </cube-form-group>
    </cube-form>
    <load-ing v-show="loadShow"></load-ing>
    <promp-ting
      :conents="promptingConent"
      :status="promptingStatus"
    ></promp-ting>
  </div>
</template>
<script>
import CubePage from "./../components/cube-page.vue";
import CubeButtonGroup from "./../components/cube-button-group.vue";
import DatePicker from "./../components/date-picker.vue";
import CubeExtendPopup from "./../components/extend-popup.vue";
import LoadIng from "./../views/loading.vue";
import PrompTing from "./../views/prompting.vue";
import { SM } from "./../http/http";
const PCA = {
  props: {
    value: {
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      selected: [],
      selectData: []
    };
  },
  render(createElement) {
    return createElement(
      "cube-button",
      {
        on: {
          click: this.showPicker
        }
      },
      this.selected.length ? this.selected.join(" ") : "请选择区域地点"
    );
  },
  mounted() {},
  methods: {
    showPicker() {
      this.picker.show();
    },
    selectHandler(selectedVal, selectedIndex, selectedTxt) {
      this.selected = selectedTxt;
      this.$emit("input", selectedVal);
    },
    getAreaData() {
      var that = this;
      this.$http
        .post("service/user/data/fetchDataList/area", {
          idx: 0,
          sum: 1000,
          area: {
            wechatArea: true
          }
        })
        .then(function(res) {
          var data = res.data.list;
          for (var i = 0; i < data.length; i++) {
            that.selectData.push({
              text: data[i].area,
              value: data[i].id,
              children: []
            });
          }
        });
    },
    getPlaceData() {
      var that = this;
      this.$http
        .post("service/user/data/fetchDataList/place", {
          idx: 0,
          sum: 1000,
          area: {
            wechatAreaId: ""
          }
        })
        .then(function(res) {
          var data = res.data.list;
          for (var i = 0; i < data.length; i++) {
            for (var j = 0; j < that.selectData.length; j++) {
              if (data[i].area.id == that.selectData[j].value) {
                that.selectData[j].children.push({
                  text: data[i].place,
                  value: data[i].id
                });
              }
            }
          }
          that.picker = that.$createCascadePicker({
            title: "区域地点选择",
            data: that.selectData,
            selectedIndex: [0, 0],
            onSelect: that.selectHandler
          });
        });
    },
    getParamsPlace() {
      var data = JSON.parse(localStorage.getItem("loginUser"));
      this.selected[0] = data.place.area.area;
      this.selected[1] = data.place.place;
    }
  },
  created() {
    this.getAreaData();
    this.getPlaceData();
    this.getParamsPlace();
  }
};
const delay = (function() {
  let timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();
export default {
  watch: {
    "model.uuu": {
      handler(newV, oldV) {
        this.model.address = newV;
      }
    }
  },
  data() {
    return {
      incidentWithConsumable: localStorage.getItem("incidentWithConsumable"), //是否绑定耗材
      wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"), //是否绑定资产
      ifRoom: localStorage.getItem("ifRoom"), //是否增加房间号选择
      loginUser: null,
      // 故障地点下拉数据
      // addressData: [],
      // 故障地点选中文本
      // addressText: "",
      // 报修科室下拉数据
      deptIdData: [],
      // 报修科室选中文本
      deptIdText: "",
      // 报修科室选中id
      deptIdNum: -1,
      // 报修主体
      repairMain: null,
      // 自动创建
      reqHasCategory: null,
      validity: {},
      valid: undefined,
      // action: 'http://localhost:8080/service/common/common/uploadAttachment/wechatRequesterIncident/',
      // action: 'http://192.168.199.164:8080/service/common/common/uploadAttachment/wechatRequesterIncident/',
      action: {
        // "target":'http://192.168.3.100:8080/service/common/common/uploadAttachment/wechatRequesterIncident/',
        // "fileName":"upload",
        // "target":'http://localhost/service/common/common/uploadAttachment/wechatRequesterIncident/',
        // "target":'http://weixintest.ngser.dashitech.com/service/common/common/uploadAttachment/wechatRequesterIncident/',
        target:
          this.$host +
          "/service/common/common/uploadAttachment/wechatRequesterIncident/",
        data: {}
      },
      isUploading: false,
      loadShow: false,
      name: "",
      phone: "",
      model: {
        contactsInformation: "",
        pcaValue: [],
        address: "",
        description: "",
        bxcode: "",
        deptId: "",
        contacts: "",
        assetId: "",
        uuu: ""
      },
      // showPrompting:false,
      promptingConent: "",
      promptingStatus: "",
      vali: false,
      fields: [
        {
          type: "input",
          modelKey: "contacts",
          label: "联系人:",
          props: {
            placeholder: "请输入联系人"
          },
          rules: {
            // required: this.repairMain.valueconfig == 1
            required: true
          }
        },
        {
          type: "input",
          modelKey: "contactsInformation",
          label: "联系电话:",
          props: {
            placeholder: "请输入联系电话"
          },
          rules: {
            required: true
          }
        },
        {
          component: PCA,
          modelKey: "pcaValue",
          label: "区域地点:",
          rules: {
            required: true
          },
          messages: {
            required: "请选择区域地点"
          }
        },
        {
          type: "textarea",
          modelKey: "address",
          label: "详细地址:",
          props: {
            placeholder: "请输入详细地址"
          },
          rules: {
            required: false
          },
          debounce: 100
        },
        {
          type: "textarea",
          modelKey: "description",
          label: "报修内容:",
          props: {
            placeholder: "请输入报修内容"
          },
          rules: {
            required: true
          },
          debounce: 100
        },
        {
          type: "input",
          modelKey: "deptId",
          label: "报修科室:",
          props: {
            placeholder: "请选择报修科室"
          },
          rules: {
            required: true
          }
        },
        {
          type: "select",
          modelKey: "categoryId",
          label: "报修类别:",
          props: {
            placeholder: "请选择报修类别",
            options: []
          },
          rules: {
            required: true
          }
        },
        {
          type: "input",
          modelKey: "assetId",
          label: "资产:",
          props: {
            placeholder: "右侧扫一扫资产",
            disabled: true
          },
          rules: {
            required: false
          }
        },
        {
          type: "select",
          modelKey: "uuu",
          label: "房间号",
          props: {
            placeholder: "请选择房间号",
            options: ['2015', '2016', '2017', '2018', '2019', '2020']
          },
          rules: {
            required: true
          }
        }
      ]
    };
  },
  methods: {
    //扫资产
    scan() {
      SM(this).then(ress1 => {
        this.model.assetId = ress1;
      });
    },
    // -----------故障地点-----
    showAddressPicker() {
      if (!this.picker) {
        this.picker = this.$createPicker({
          title: "故障地点",
          data: [this.addressData],
          onSelect: this.selectAddressHandle
        });
      }
      this.picker.show();
    },
    selectAddressHandle(selectedVal, selectedIndex, selectedText) {
      this.model.address = selectedText[0];
      this.addressText = selectedText[0];
    },
    // ----------------
    // -----------报修科室-----
    showDeptIdPicker() {
      if (!this.picker1) {
        this.picker1 = this.$createPicker({
          title: "报修科室",
          data: [this.deptIdData],
          onSelect: this.selectDeptIdHandle
        });
      }
      this.picker1.show();
    },
    selectDeptIdHandle(selectedVal, selectedIndex, selectedText) {
      this.model.deptId = selectedText[0];
      this.deptIdText = selectedText[0];
      this.deptIdNum = selectedVal[0];
      this.deptIdList.forEach(item => {
        if (item.id == this.deptIdNum) {
          this.model.contactsInformation = item.phone;
          this.model.address = item.place
            ? item.place.place
              ? item.place.area.area + item.place.place
              : item.place.area
            : ""; //seimin
        }
      });
    },
    // ----------------
    subVali() {
      this.vali = true;
    },
    getbxcode() {
      var that = this;
      this.$http.get("service/bpm/bpm/restful/wxbx", {}).then(function(res) {
        that.model.bxcode = res.data.data;
      });
    },
    submitHandler() {
      if (this.model.pcaValue.length == 2) {
        this.model.areaId = this.model.pcaValue[this.model.pcaValue.length - 2];
        this.model.placeId = this.model.pcaValue[
          this.model.pcaValue.length - 1
        ];
      } else if (this.model.pcaValue.length == 1) {
        this.model.areaId = this.model.pcaValue[this.model.pcaValue.length - 1];
        this.model.placeId = "";
      }

      this.model["requester"] = this.loginUser;
      delete this.model.pcaValue;
      this.model.fileUrl = "url";
      this.model.sourceType = "wechatRequesterIncident";
      var that = this;
      this.loadShow = true;
      var reqData = {
        verification: "true",
        loginUser: {
          id: that.loginUser.id,
          account: that.loginUser.account
        },
        incident: JSON.parse(JSON.stringify(this.model))
      };
      //  报修主体是报修科室的时候，不传科室id艺洛
      if (this.repairMain.valueconfig == 2) {
        reqData.incident.deptId = this.deptIdNum;
      } else {
        delete reqData.incident.deptId;
      }
      this.$http
        .post("service/apply/bpm/addWxIncident", reqData)
        .then(function(res) {
          if (res.data.state == 200) {
            that.action.target = that.action.target + res.data.incident.id;
            // that.action.target=that.action.target+res.data.incident.bxcode;
            setTimeout(function() {
              that.$refs.upload.start();
            }, 100);
            $("#fade").fadeIn();
            that.promptingConent = "恭喜您,新建报修成功!";
            that.promptingStatus = true;
            that.dialog = that
              .$createDialog({
                type: "alert",
                title: "报修成功",
                content: "点击返回首页",
                icon: "cubeic-right",
                onConfirm: (e, promptValue) => {
                  that.$router.push({ path: "/main" });
                }
              })
              .show();
            setTimeout(function() {
              $("#fade").fadeOut();
            }, 2000);
          } else {
            $("#fade").fadeIn();
            that.promptingConent = "系统错误,请稍后再试!";
            that.promptingStatus = false;
            that.loadShow = false;
            that.dialog = that
              .$createDialog({
                type: "alert",
                title: "系统错误,请稍后再试!",
                content: "点击返回首页",
                icon: "cubeic-wrong",
                onConfirm: (e, promptValue) => {
                  that.$router.push({ path: "/main" });
                }
              })
              .show();
            setTimeout(function() {
              $("#fade").fadeOut();
            }, 2000);
          }
        });
      event.preventDefault();
    },
    validateHandler(result) {
      this.validity = result.validity;
      this.valid = result.valid;
      // if (this.valid == false) {
      //   $("#fade").fadeIn();
      //   this.promptingConent = "提交失败,请填写必填信息!";
      //   this.promptingStatus = false;
      //   setTimeout(function() {
      //     $("#fade").fadeOut();
      //   }, 2000);
      // }
      this.valid = false;
    },
    // 展示故障地点搜索下拉
    showAddress(data) {
      if (this.addressText !== this.model.address) {
        delay(() => {
          this.$http
            .post("service/apply/bpm/searchFaultLocation", {
              searchKey: data
            })
            .then(result => {
              if (result.data.state == 200) {
                if (result.data.result.length > 0) {
                  this.addressData.length = 0;
                  result.data.result.forEach(item => {
                    this.addressData.push({
                      text: item.place
                        ? item.area.area + item.place
                        : item.area,
                      value: item.place
                        ? item.area.area + item.place
                        : item.area
                    });
                  });
                  // 显示
                  this.showAddressPicker();
                }
              }
            });
        }, 500);
      }
    },
    // 展示报修科室搜索下拉
    showDeptId(data) {
      if (this.deptIdText !== this.model.deptId) {
        delay(() => {
          this.$http
            .post("service/user/data/fetchDataList/department", {
              idx: 0,
              sum: 50,
              department: { dept: data }
            })
            .then(result => {
              if (result.data.status == 200) {
                if (result.data.list.length > 0) {
                  this.deptIdData.length = 0;
                  this.deptIdList = result.data.list;
                  result.data.list.forEach(item => {
                    this.deptIdData.push({
                      text: item.dept,
                      value: item.id
                    });
                  });
                  // 显示
                  this.showDeptIdPicker();
                }
              }
            });
        }, 500);
      }
    },
    filesAdded(files) {
      let hasIgnore = false;
      const maxSize = 1000 * 1024 * 1024; // 1M
      for (let k in files) {
        const file = files[k];
        if (file.size > maxSize) {
          file.ignore = true;
          hasIgnore = true;
        }
      }
      hasIgnore &&
        this.$createToast({
          type: "warn",
          time: 1000,
          txt: "不能上传超过100M的文件"
        }).show();
    },
    fileSubmitted(files) {
      files.base64Value = files.file.base64;
      this.action.data = { fileName: files.name };
      console.log("ok");
    },
    fileSuccess() {
      console.log("上传成功");
    },
    getMessage() {
      this.name = this.loginUser.name;
      this.model.contactsInformation =
        this.repairMain.valueconfig == 1
          ? this.loginUser.mphone
          : this.loginUser.dept
          ? this.loginUser.dept.phone
          : "";
      this.model.contacts = this.loginUser.name;
      this.model.address = this.loginUser.houseNumber;
      this.model.pcaValue[0] = this.loginUser.place.area.id;
      this.model.pcaValue[1] = this.loginUser.place.id;
      this.model.deptId = this.loginUser.dept ? this.loginUser.dept.dept : "";
    }
  },
  created() {
    this.repairMain = JSON.parse(localStorage.getItem("repairMain"));
    this.reqHasCategory = JSON.parse(localStorage.getItem("reqHasCategory"));
    if (this.$route.params.data) {
      this.model.assetId = this.$route.params.data;
    }
    this.fields.forEach(item => {
      // 联系人在报修人主体下必填，报修科室主体下非必填
      if (item.modelKey == "contacts") {
        item.rules.required = this.repairMain.valueconfig == 1;
      }
    });
    // 获取报修类别
    this.$http
      .post("service/bpm/data/fetchDataList/incidentcategory", {
        idx: 0,
        sum: 100,
        incidentcategory: { selectType: "one" }
      })
      .then(result => {
        if (result.data.status == 200) {
          let arr = [];
          result.data.list.forEach(item => {
            arr.push({ value: item.id, text: item.category });
          });
          this.fields.forEach(item => {
            // 初始化报修类别下拉框列表
            if (item.modelKey == "categoryId") {
              item.props.options = arr;
            }
          });
        }
      });
  },
  mounted() {
    this.loginUser = JSON.parse(localStorage.getItem("loginUser"));
    this.getMessage();
    this.getbxcode();
    // 获取报修主体
    this.deptIdNum = this.loginUser.dept ? this.loginUser.dept.id : "";
    this.deptIdText = this.loginUser.dept ? this.loginUser.dept.dept : "";
    // this.addressText = this.loginUser.place
    //   ? this.loginUser.place.place
    //     ? this.loginUser.place.area.area + this.loginUser.place.place
    //     : this.loginUser.place.area
    //   : null;
    this.$refs.upload.pause();
  },
  components: {
    CubePage,
    CubeButtonGroup,
    DatePicker,
    // JsonView
    CubeExtendPopup,
    LoadIng,
    PrompTing
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.zc{
  display:flex;
  position:relative;
  .zc-item{
    flex:7;
  }
  .zc-sao{
    flex:3;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:0.6rem;
  }
}
.form-custom {
  .cube-form-item {
    .cube-btn {
      padding-left: 0;
      padding-right: 0;
      text-align: left;
      color: inherit;
      background: none;
      border: none;
    }
  }
}

.label {
  background-color: rgb(238, 238, 238);
  height: 0.6rem;
  line-height: 0.5rem;
  padding-left: 0.2rem;
  font-size: 0.24rem;
  color: #666666;
}

.label span {
  font-size: 0.2rem;
  display: inline-block;
  margin-left: 0.08rem;
  color: #999999;
}

.zhidu {
  display: flex;
  height: 0.7rem;
  line-height: 0.7rem;
  border-bottom: 0.02rem rgb(245, 245, 245) solid;
}

.bgColor {
  background-color: white;
}

.zhidu div:nth-child(1) {
  width: 27.5%;
  padding-left: 6%;
}

.uplod {
  padding: 0 0.24rem;
}
</style>
<style>
.btn_plcaeholde .cube-btn {
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  color: inherit;
  background: none;
  border: none;
}
.cube-form_standard .cube-upload-def .cube-upload-btn,
.cube-form_standard .cube-upload-def .cube-upload-file {
  margin-left: 3% !important;
}
.sub .cube-btn {
  background-color: #005395 !important;
  width: 90%;
  margin: 0 auto;
  border-radius: 8px;
}
.cube-picker-wheel-item {
  text-overflow: ellipsis;
}
</style>