AnYang_UI/anyangWebAPP/pages/editWorkOrder/editWorkOrde...

<template>
  <view class="wrapper">
    <view class="form">
      <form @submit="formSubmit" @reset="formReset">
        <view class="uni-form-item uni-column">
          <view class="title">标题：</view>
          <input class="uni-input" name="workOrderTitle" :value="formData.workOrderTitle" placeholder="标题" />
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">来电内容：</view>
          <view class="uni-textarea">
            <textarea name="callContent" :value="formData.callContent" auto-height />
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">工单内容：</view>
          <view class="uni-textarea">
            <textarea name="workOrderContent" :value="formData.workOrderContent" auto-height />
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">处理方式：</view>
          <radio-group name="processingMethod" :value="formData.processingMethod" @change="bindChangeProcessingMethod">
            <label> <radio value="1" :checked="!radioChecked.processingMethod" /><text>当即办理</text> </label>
            <label> <radio value="0"  :checked="radioChecked.processingMethod" /><text>网络转办</text> </label>
          </radio-group>
        </view>
        <view class="uni-form-item uni-column" v-show="isDisplay.result">
          <view class="title">办理内容：</view>
          <view class="uni-textarea">
            <textarea name="result" :value="formData.result" auto-height />
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">姓名：</view>
          <input class="uni-input" name="name" :value="formData.name" placeholder="这是一个输入框" />
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">性别：</view>
          <radio-group name="gender" :value="formData.gender">
            <label> <radio value="0" :checked="radioChecked.gender" /><text>男</text></label>
            <label> <radio value="1" :checked="!radioChecked.gender" /><text>女</text></label>
          </radio-group>
        </view>
        <view class="uni-form-item uni-column">
          <view class="uni-title uni-common-pl">来源：</view>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker @change="bindPickerChangeSource" :range="sourceListData" :range-key="'F_Value'">
                  <view name="source" class="uni-input">{{ sourceListData[pickerIndex.indexSource].F_Value }}</view>
                </picker>
              </view>
            </view>
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">来电号码：</view>
          <input class="uni-input" name="callerNumber" :value="formData.callerNumber" placeholder="这是一个输入框" />
        </view>
        <view class="uni-form-item uni-column">
          <view class="uni-title uni-common-pl">类型：</view>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker @change="bindPickerChangeType" value="" :range="typeListData" :range-key="'F_Value'">
                  <view class="uni-input">{{ typeListData[pickerIndex.indexType].F_Value }}</view>
                </picker>
              </view>
            </view>
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">反映类别：</view>
          <view>
            <bjx-inputs the-style="font-size: 14px; overflow: auto" :value="formData.responseCategory" item-key="names" placeholder="请输入内容" @list="getReflectCategoryData" @select="selectReflectCategory" overflow="hide"> </bjx-inputs>
          </view>
        </view>
        <view class="uni-form-item uni-column">
          <view class="title">号码密级：</view>
          <radio-group name="numberSecurityLevel" :value="formData.numberSecurityLevel">
            <label> <radio value="0" :checked="radioChecked.numberSecurityLevel" /><text>普通</text> </label>
            <label> <radio value="1" :checked="!radioChecked.numberSecurityLevel" /><text>保密</text> </label>
          </radio-group>
        </view>
        <view class="uni-form-item uni-column">
          <view class="uni-title uni-common-pl">紧急程度：</view>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker @change="bindPickerChangeEmergencyLevel" :value="pickerIndex.indexEmergencyLevel" :range="emergencyLevelListData" :range-key="'text'">
                  <view class="uni-input">{{ emergencyLevelListData[pickerIndex.indexEmergencyLevel].text }}</view>
                </picker>
              </view>
            </view>
          </view>
        </view>
        <view class="uni-form-item uni-column" v-show="isDisplay.phoneType">
          <view class="uni-title uni-common-pl">电话类别：</view>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker @change="bindPickerChangePhoneType" :value="formData.phoneType" :range="phoneTypeListData" :range-key="'F_Remark'">
                  <view class="uni-input">{{ phoneTypeListData[pickerIndex.indexPhoneType].F_Remark }}</view>
                </picker>
              </view>
            </view>
          </view>
        </view>
        <view class="uni-form-item uni-column" v-show="isDisplay.leaderCharge">
          <view class="uni-title uni-common-pl">分管领导：</view>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker @change="bindPickerChangeLeaderCharge" :value="formData.leaderCharge" :range="leaderChargeListData" :range-key="'text'">
                  <view class="uni-input">{{ leaderChargeListData[pickerIndex.indexLeaderCharge].text }}</view>
                </picker>
              </view>
            </view>
          </view>
        </view>
        <view class="uni-form-item uni-column" v-show="isDisplay.leaderCharge">
          <view class="uni-title uni-common-pl">事发区域：</view>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker @change="bindPickerChangeLeaderCharge" :value="formData.leaderCharge" :range="leaderChargeListData" :range-key="'text'">
                  <view class="uni-input">{{ leaderChargeListData[pickerIndex.indexLeaderCharge].text }}</view>
                </picker>
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="uni-form-item uni-column" v-show="isDisplay.leaderCharge">
          <view class="uni-title uni-common-pl">分管领导：</view>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker @change="bindPickerChangeLeaderCharge" :value="formData.leaderCharge" :range="leaderChargeListData" :range-key="'text'">
                  <view class="uni-input">{{ leaderChargeListData[pickerIndex.indexLeaderCharge].text }}</view>
                </picker>
              </view>
            </view>
          </view>
        </view> -->
        <!-- <view class="uni-form-item uni-column" v-show="isDisplay.leaderCharge">
          <view class="uni-title uni-common-pl">分管领导：</view>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker @change="bindPickerChangeLeaderCharge" :value="formData.leaderCharge" :range="leaderChargeListData" :range-key="'text'">
                  <view class="uni-input">{{ leaderChargeListData[pickerIndex.indexLeaderCharge].text }}</view>
                </picker>
              </view>
            </view>
          </view>
        </view> -->
        <view class="uni-btn-v">
          <button form-type="submit" class="mini-btn" type="default" size="mini">保存</button>
        </view>
      </form>
    </view>
  </view>
</template>

<script>
import BjxInputs from "@/components/bjx-inputs/bjx-inputs.vue"

export default {
  components: {
    BjxInputs,
  },
  data() {
    return {
      wid: "", // 工单id
      title: "picker",
      index: 0,
      reflectCategoryListData: [], // 反映类别列表数据
      // date: currentDate,
      formData: {
        workOrderTitle: "", // 标题
        callContent: "", // 来电内容
        workOrderContent: "", // 工单内容
        processingMethod: "", // 处理方式
        result: "", // 办理内容
        name: "", // 姓名
        gender: "", // 性别
        source: "", // 来源
        callerNumber: "", // 来电号码
        workOrderType: "", // 工单类型
        responseCategory: "", // 反映类别
        responseCategoryId: "", // 反映类别id
        numberSecurityLevel: "", // 来电号码密级
        emergencyLevel: "", // 紧急程度
        organizer: "", // 承办单位
        processingTimeLimit: "", // 办理时限
        emergencyTimeLimit: "", // 积极时限
        phoneType: "", // 电话类别
        phoneTypeId: "", // 电话类别
        leaderCharge: "", // 分管领导
        threeWayCall: "", // 三方通话
      },
      radioChecked: {
        processingMethod: true,
        gender: true,
        numberSecurityLevel: true,
      },
      isDisplay: {
        result: false, // 办理内容
        phoneType: false, // 电话类别
        leaderCharge: false, // 分管领导
      },
      pickerIndex: {
        indexSource: 0, // 来源index
        indexType: 0, // 类型index
        indexEmergencyLevel: 0, // 紧急程度index
        indexPhoneType: 0, // 电话类别index
        indexLeaderCharge: 0, // 分管领导index
      },
      // 来源数据
      sourceListData: [
        {
          F_Value: "请选择",
        }
      ],
      // 工单类型数据
      typeListData: [
        {
          F_Value: "请选择",
        }
      ], 
      // 紧急程度
      emergencyLevelListData: [
        {
          value: "1",
          text: "普通",
        },
        {
          value: "2",
          text: "紧急",
        },
      ],
      // 电话类别
      phoneTypeListData: [
        {
          F_Value: "请选择",
        }
      ],
      // 分管领导
      leaderChargeListData: [
        {
          value: "0",
          text: "省长",
        },
        {
          value: "1",
          text: "市长",
        }
      ]
    }
  },
  onLoad(option) {
    console.log("option", option);
    this.wid = option.wid
    // 获取来源数据 dictionaryId=1
    this.getDictionaryData(1)
    // 获取来源数据 dictionaryId=2
    this.getDictionaryData(2)
    // 获取电话类别 dictionaryId=2498
    this.getDictionaryData(2498)
    // 获取反映类别
    this.getReflectCategoryList()
    // 获取详情 type=0
    this.getDetail(0)
  },
  methods: {
    formSubmit: function (e) {
      this.formData.workOrderTitle = e.detail.value.workOrderTitle;
      this.formData.processingMethod = e.detail.value.processingMethod;
      this.formData.name = e.detail.value.name;
      this.formData.gender = e.detail.value.gender;
      this.formData.callerNumber = e.detail.value.callerNumber;
      this.formData.numberSecurityLevel = e.detail.value.numberSecurityLevel;
      this.formData.callContent = e.detail.value.callContent;
      this.formData.workOrderContent = e.detail.value.workOrderContent;
      this.formData.result = e.detail.value.result;
      console.log("form发生了submit事件，携带数据为：" + JSON.stringify(e.detail.value))
      this.saveData();
    },
    // 保存
    saveData() {
      const params = {
        workorderid: this.wid,
        cusname: this.formData.name, // 姓名
        cussex: this.formData.gender, // 性别
        cusphone: this.formData.callerNumber, // 电话
        title: this.formData.workOrderTitle, // 标题
        content: this.formData.callContent, // 来电内容
        workcontent: this.formData.workOrderContent, // 工单内容
        // files: $("#file").val(), //(多个用英文逗号,隔开)
        files: "",
        // sourcearea: $("#sourcearea").val(), //=事发地域id
        sourcearea: "",
        // sourceaddress: $("#sourceaddress").val(), //=事发详细地址
        sourceaddress: "",
        source: this.formData.source, // 来源
        splituser: this.formData.leaderCharge, // 分管领导
        phonetype: this.formData.phoneType, // 电话类别
        isresult: this.formData.processingMethod, //=（0转办1直办）
        // business: this.formData.threeWayCall, // 三方通话
        business: "0",
        result: this.formData.result, // 办理内容
        keys: this.formData.responseCategoryId, // 反映类别
        type: this.formData.workOrderType, // 类型
        isprotect: this.formData.numberSecurityLevel, //=(0普通1保密)
        level: this.formData.emergencyLevel, //=(1普通2紧急)
        // visittype: $("#visittype").val(), // 回访方式
        issubmit: 0, //=（0保存1保存并提交）
        token: uni.getStorageSync("token"),
      }
      this.$http
        .post("/WorkOrder/EditWorkOrder", params)
        .then((response) => {
          if (response.state.toLowerCase() === "success") {
            
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },

    //获取详情
    getDetail(type) {
      let params = {
        type: type,
        workorderid: this.wid,
        token: uni.getStorageSync("token"),
      }
      this.$http.get("/WorkOrder/GetWorkOrderNew", params).then((response) => {
        if (response.state.toLowerCase() === "success") {
          let data = response.data.data[0];

          this.formData.name = data.F_CusName; // 姓名
          this.formData.gender = data.F_CusSex; // 性别
          this.formData.callerNumber = data.F_CusPhone; // 电话
          this.formData.workOrderTitle = data.F_ComTitle; // 标题
          this.formData.callContent = data.F_Content; // 来电内容
          this.formData.workOrderContent = data.F_Content; // 工单内容
          // files: $("#file").val(), //(多个用英文逗号,隔开)
          // sourcearea: $("#sourcearea").val(), //=事发地域id
          // sourceaddress: $("#sourceaddress").val(), //=事发详细地址
          // this.formData.threeWayCall = data.F_Business, // 三方通话
          this.formData.result = data.F_Result; // 办理内容
          this.formData.responseCategoryId = data.F_Key; // 反映类别

          // 处理方式（0转办1直办）
          if (String(data.F_IsResult) === "0") {
            this.radioChecked.processingMethod = true;
          } else if (Sting(data.F_IsResult) === "1") {
            this.radioChecked.processingMethod = false;
          }

          // 性别(0男1女)
          if (String(data.F_CusSex) === "0") {
            this.radioChecked.gender = true;
          } else if (String(data.F_CusSex) === "1") {
            this.radioChecked.gender = false;
          }

          // 号码密级(0普通1保密)
          if (String(data.F_IsProtect) === "0") {
            this.radioChecked.numberSecurityLevel = true;
          } else if (String(data.F_IsProtect) === "1") {
            this.radioChecked.numberSecurityLevel = false;
          }

          // 来源
          this.sourceListData.forEach((e,i) => {
            if (String(e.F_ValueId) === String(data.F_InfoSource)) {
              this.pickerIndex.indexSource = i;
              this.formData.source = data.F_InfoSource;
            }
          });

          // 咨询
          this.typeListData.forEach((e,i) => {
            if (String(e.F_ValueId) === String(data.F_InfoType)) {
              this.pickerIndex.indexType = i;
              this.formData.workOrderType = data.F_InfoType;
            }
          });

          // 紧急程度
          this.emergencyLevelListData.forEach((e,i) => {
            if (String(e.value) === String(data.F_Level)) {
              this.pickerIndex.indexEmergencyLevel = i;
              this.formData.emergencyLevel = data.F_Level;
            }
          });

          // 分管领导
          this.phoneTypeListData.forEach((e,i) => {
            if (String(e.text) === String(data.F_PhoneType)) {
              this.pickerIndex.indexPhoneType = i;
              this.formData.phoneType = data.F_PhoneType;
            }
          });

          // 分管领导
          this.leaderChargeListData.forEach((e,i) => {
            if (String(e.text) === String(data.F_SplitUser)) {
              this.pickerIndex.indexLeaderCharge = i;
              this.formData.leaderCharge = data.F_SplitUser;
            }
          });

        // visittype: $("#visittype").val(), // 回访方式
        }
      }).catch((e) => {
        console.log(e);
      })
    },

    // 获取数据字典
    getDictionaryData(dictionaryId) {
      const params = {
        id: dictionaryId,
        token: uni.getStorageSync("token"),
      }
      this.$http
        .get("/Dictionary/GetDicValueListById", params)
        .then((response) => {
          if (response.state.toLowerCase() === "success") {
            let data = response.data;
            if (String(dictionaryId) === "1") {
              // 来源数据
              this.sourceListData = data;
            } else if (String(dictionaryId) === "2") {
              // 类型数据
              this.typeListData = data;
            } else if (String(dictionaryId) === "2498") {
              // 电话类别
              this.phoneTypeListData = data;
            }
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },

    getReflectCategoryList() {
      let params = {
        token: uni.getStorageSync("token"),
      }
      this.$http
        .get("Dictionary/GetKeyListNew", params)
        .then((response) => {
          if (response.state.toLowerCase() === "success") {
            let data = response.data
            this.reflectCategoryListData = data
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },

    // 远程加载数据 返回一个对象，{value: 输入框值, callback: 回调函数}
    getReflectCategoryData(e) {
      console.log("e", e)
      this.formData.responseCategory = e.value
      if (!e.value) {
        e.callback(this.reflectCategoryListData)
      } else {
        let data = []
        this.reflectCategoryListData.forEach((item) => {
          if (item.names.indexOf(e.value) > -1) {
            data.push(item)
          }
        })
        e.callback(data)
      }
    },
    
    selectReflectCategory(value) {
      this.formData.responseCategory = value.name
      this.formData.responseCategoryId = value.id
    },

    bindPickerChange: function (e) {
      console.log("picker发送选择改变，携带值为", e.target.value)
      this.index = e.target.value
    },

    bindPickerChangeSource: function (e) {
      this.pickerIndex.indexSource = e.target.value;
      this.formData.source = this.sourceListData[e.target.value].F_ValueId;
      if (String(this.formData.source) === "4") {
        this.isDisplay.leaderCharge = true
        this.isDisplay.phoneType = false
      } else if (String(this.formData.source) === "1") {
        this.isDisplay.phoneType = true
        this.isDisplay.leaderCharge = false
      } else {
        this.isDisplay.phoneType = false
        this.isDisplay.leaderCharge = false
      }
    },
    bindPickerChangeType: function (e) {
      this.pickerIndex.indexType = e.target.value;
      this.formData.workOrderType = this.typeListData[e.target.value].F_ValueId
    },
    bindPickerChangeEmergencyLevel: function (e) {
      this.pickerIndex.indexEmergencyLevel = e.target.value;
      this.formData.emergencyLevel = this.emergencyLevelListData[e.target.value].value
    },
    bindPickerChangePhoneType: function (e) {
      this.pickerIndex.indexPhoneType = e.target.value;
      this.formData.phoneType = this.phoneTypeListData[e.target.value].F_ValueId
    },
    bindPickerChangeLeaderCharge: function (e) {
      this.pickerIndex.indexLeaderCharge = e.target.value;
      this.formData.leaderCharge = this.leaderChargeListData[e.target.value].text
    },
    bindChangeProcessingMethod: function (e) {
      if (String(e.detail.value) === "0") {
        this.isDisplay.result = false;
      } else if (String(e.detail.value) === "1") {
        this.isDisplay.result = true;
      }
    }
  },
}
</script>

<style lang="scss">
.wrapper {
  padding: 10px 15px;
  .form {
    .uni-form-item {
      // display: flex;
      margin: 10px 0 0 0;
      padding: 0 0 5px 0;
      font-size: 14px;
      border-bottom: 1px solid #bfbfbf;
      .title {
        font-size: 14px;
      }
      .uni-input {
        font-size: 14px;
      }
      radio-group label radio {
        transform: scale(0.7);
      }
      radio-group uni-text {
        font-size: 14px;
      }
      .uni-input-input {
        font-size: 14px !important;
      }
      .bjx-inputs {
        // .uni-input-wrapper {
        //   font-size: 14px !important;
        // }
        // .uni-input {
        //   font-size: 14px !important;
        // }
        .uni-input-placeholder {
          font-size: 14px;
        }
      } 
    }
    .uni-btn-v {
      margin: 15px 0 0 0;
      text-align: center;
      button{
        background: #1e90ff;
        color: #eee
      }
    }
  }
}
</style>