上传处置类型修改

luobisheng

2022-11-29 4641a877cd6a94e4d35dca7f7f14bc1443e2d2ad

 src/components/dispatch/index.vue

@@ -1,352 +1,455 @@
<template>
    <div class="dispatch">
        <el-form ref="form" :model="dispatch" :rules="rules" label-width="120px">
            <!-- 选择距离 -->
            <el-form-item label="距离:" prop="distance">
                <el-radio-group v-model="dispatch.distance">
                    <el-radio :label="1">100m以内</el-radio>
                    <el-radio :label="2">300m以内</el-radio>
                    <el-radio :label="3">500m以内</el-radio>
                    <el-radio :label="4">1km以内</el-radio>
                    <el-radio :label="5">2km以内</el-radio>
                    <el-radio :label="6">3km以内</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 选择执法车 -->
            <el-form-item label="选择执法车:" prop="enforcementCar">
                <el-select v-model="dispatch.enforcementCar" placeholder="请选择">
                    <el-option v-for="item in carOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- 选择人员 -->
            <div class="form-person">
                <!-- 部门 -->
                <el-form-item label="选择人员:" prop="dispatchOpinion">
                    <el-select v-model="dispatch.dispatchOpinion" placeholder="请选择部门" @change="handleTopChange">
                        <el-option v-for="item in departOptions" :key="item.id" :label="item.departName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 中队 -->
                <el-form-item prop="enforcementTeam" class="person-item">
                    <el-select v-model="dispatch.enforcementTeam" placeholder="选择中队"
                        :disabled="squadronOptions.length!==0?false:true" @change="handleMidChange">
                        <el-option v-for="item in squadronOptions" :key="item.id" :label="item.departName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop='lawEnforcer' class="person-item">
                    <!-- 人员 -->
                    <el-select v-model="dispatch.lawEnforcer" placeholder="请选择人员"
                        :disabled="personOptions.length !== 0 ? false:true" @change="handlePerChange">
                        <el-option v-for="item in personOptions" :key="item.id" :label="item.username" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div class="form-footer">
                <!-- 执法人员编号 -->
                <el-form-item label="执法人员编号:" prop="lawEnforcerName">
                    <el-input v-model="dispatch.lawEnforcerName"></el-input>
                </el-form-item>
                <!-- 执法人员联系方式 -->
                <el-form-item label="联系方式:" prop="contactWay">
                    <el-input v-model="dispatch.contactWay"></el-input>
                </el-form-item>
                <el-button type="primary">发送短信</el-button>
            </div>
        </el-form>
        <div class="map">
            <!-- <MyMap></MyMap> -->
        </div>
        <div class="footer">
            <el-button type="primary" @click="handleDispatch">确定</el-button>
            <el-button @click="handleBack">返回</el-button>
        </div>
  <div class="dispatch">
    <el-form ref="form" :model="dispatch" :rules="rules" label-width="120px">
      <!-- 选择距离 -->
      <el-form-item label="距离:" prop="distance">
        <el-radio-group v-model="dispatch.distance">
          <el-radio :label="1">100m以内</el-radio>
          <el-radio :label="2">300m以内</el-radio>
          <el-radio :label="3">500m以内</el-radio>
          <el-radio :label="4">1km以内</el-radio>
          <el-radio :label="5">2km以内</el-radio>
          <el-radio :label="6">3km以内</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 选择执法车 -->
      <el-form-item label="选择执法车:" prop="enforcementCar">
        <el-select v-model="dispatch.enforcementCar" placeholder="请选择">
          <el-option
            v-for="item in carOptions"
            :key="item.id"
            :label="item.carNumber"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 选择人员 -->
      <div class="form-person">
        <!-- 部门 -->
        <el-form-item label="选择人员:" prop="createUser">
          <el-select
            v-model="dispatch.createUser"
            placeholder="请选择部门"
            @change="handleTopChange"
          >
            <el-option
              v-for="item in departOptions"
              :key="item.id"
              :label="item.departName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 中队 -->
        <el-form-item prop="enforcementTeam" class="person-item">
          <el-select
            v-model="dispatch.enforcementTeam"
            placeholder="选择中队"
            :disabled="
              squadronOptions.length !== 0 && squadronOptions ? false : true
            "
            @change="handleMidChange"
          >
            <el-option
              v-for="item in squadronOptions"
              :key="item.id"
              :label="item.departName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="lawEnforcer" class="person-item">
          <!-- 人员 -->
          <el-select
            v-model="dispatch.lawEnforcer"
            placeholder="请选择人员"
            :disabled="
              personOptions.length !== 0 && personOptions ? false : true
            "
            @change="handlePerChange"
          >
            <el-option
              v-for="item in personOptions"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="form-footer">
        <!-- 执法人员编号 -->
        <el-form-item label="执法人员编号:" prop="lawEnforcerName">
          <el-input v-model="dispatch.lawEnforcerName" disabled></el-input>
        </el-form-item>
        <!-- 执法人员联系方式 -->
        <el-form-item label="联系方式:" prop="contactWay">
          <el-input v-model="dispatch.contactWay" disabled></el-input>
        </el-form-item>
        <el-button type="primary">发送短信</el-button>
      </div>
      <div class="form-time">
        <el-form-item label="派遣意见" prop="dispatchOpinion">
          <el-input
            v-model="dispatch.dispatchOpinion"
            placeholder="请输入派遣意见"
          ></el-input>
        </el-form-item>
        <el-form-item label="处置日期" prop="disposeDate">
          <el-date-picker
            v-model="dispatch.disposeDate"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </div>
    </el-form>
    <div class="map">
      <!-- <MyMap></MyMap> -->
    </div>
    <div class="footer">
      <el-button type="primary" @click="handleDispatch">确定</el-button>
      <el-button @click="handleBack">返回</el-button>
    </div>
  </div>
</template>
<script>
import MyMap from '@/components/map'
import MyMap from "@/components/map";
import { parseTime } from "@/utils/index";
export default {
    components: {
        MyMap
  components: {
    MyMap,
  },
  props: ["id", "changeDialog", "refresh", "mytype"],
  created() {
    // 判断车辆类型
    this.mytype === 1 ? this.getLawCarList() : this.getSoilCarList();
    this.getDepartList();
  },
  data() {
    const checkPhone = (rule, value, callback) => {
      if (value) {
        const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/;
        if (!rep.test(value)) {
          callback("请输入正确的手机号码");
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const checkOpinion = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("派遣意见不能为空"));
      }
    };
    const checkDistance = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("距离不能为空"));
      }
    };
    const checkTeam = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("处置日期不能为空"));
      }
    };
    const checkPerson = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback();
      }
    };
    const checkNumber = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback();
      }
    };
    const checkDepart = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("请选择部门"));
      }
    };
    return {
      dispatch: {
        baseCaseId: 0, //案件id
        contactWay: "", //联系方式
        dispatchOpinion: "", //处置意见
        disposeDate: "", //处置日期
        distance: 0, //距离
        enforcementCar: "", //执法车
        enforcementTeam: "", //执法中队
        lawEnforcer: "", //执法人员
        lawEnforcerName: "", //执法编号,
        createUser: null,
      },
      rules: {
        createUser: [
          {
            required: true,
            trigger: "change",
            validator: checkDepart,
          },
        ],
        contactWay: [
          {
            required: false,
            trigger: "blur",
            validator: checkPhone,
          },
        ],
        dispatchOpinion: [
          { required: true, trigger: "change", validator: checkOpinion },
        ],
        // distance: [
        //   { required: true, trigger: "change", validator: checkDistance },
        // ],
        // enforcementTeam: [
        //     { required: true, trigger: 'change', validator: checkTeam }
        // ],
        lawEnforcer: [
          { required: true, trigger: "change", validator: checkPerson },
        ],
        lawEnforcerName: [
          { required: false, trigger: "change", validator: checkNumber },
        ],
        disposeDate: [
          {
            required: true,
            trigger: "false",
            validator: checkTeam,
          },
        ],
      },
      carOptions: [
        {
          label: "车辆一",
          value: 1,
        },
        {
          label: "车辆二",
          value: 2,
        },
      ],
      departOptions: [],
      carOptions: [
        {
          label: "车辆一",
          value: 1,
        },
        {
          label: "车辆二",
          value: 2,
        },
      ],
      squadronOptions: [],
      personOptions: [],
    };
  },
  methods: {
    // 执行调度
    handleDispatch() {
      console.log(this.dispatch);
      this.$refs.form.validate((valid) => {
        console.log(valid);
        if (valid) {
          const { dispatch, id } = this;
          // dispatch.disposeDate = new Date();
          console.log(id);
          dispatch.baseCaseId = id;
          console.log(dispatch);
          this.$axios({
            method: "post",
            url: `sccg/dispatch_handle/dispatch`,
            data: dispatch,
          }).then((res) => {
            this.$message({
              type: res.code === 200 ? "success" : "error",
              message: res.code === 200 ? "调度成功" : res.message,
            });
            this.$emit("changeDialog", { flag: false });
            this.refresh();
          });
        } else {
          return false;
        }
      });
    },
    props: ['id', 'changeDialog', 'refresh', 'mytype'],
    created() {
        // 判断车辆类型
        this.mytype === 1 ? this.getLawCarList() : this.getSoilCarList();
        this.getDepartList();
    // 取消调度
    handleBack() {
      this.$emit("changeDialog", { flag: false });
    },
    data() {
        const checkPhone = (rule, value, callback) => {
            if (value) {
                const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/
                if (!rep.test(value)) {
                    callback("请输入正确的手机号码");
                } else {
                    callback();
                }
            } else {
                callback(new Error('联系方式不能为空'))
            }
        }
        const checkOpinion = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('部门不能为空'))
            }
        }
        const checkDistance = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('距离不能为空'))
            }
        }
        const checkTeam = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('中队不能为空'))
            }
        }
        const checkPerson = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('执法人员不能为空'))
            }
        }
        const checkNumber = (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error('执法人员编号不能为空'))
            }
        }
        return {
            dispatch: {
                baseCaseId: 0,//案件id
                contactWay: "",//联系方式
                dispatchOpinion: "",//部门
                disposeDate: "",//处置日期
                distance: 0,//距离
                enforcementCar: '',//执法车
                enforcementTeam: "",//执法中队
                lawEnforcer: '',//执法人员
                lawEnforcerName: ""//执法编号
            },
            rules: {
                contactWay: [
                    {
                        required: true, trigger: 'blur', validator: checkPhone
                    }
                ],
                dispatchOpinion: [
                    { required: true, trigger: 'change', validator: checkOpinion }
                ],
                distance: [
                    { required: true, trigger: 'change', validator: checkDistance }
                ],
                // enforcementTeam: [
                //     { required: true, trigger: 'change', validator: checkTeam }
                // ],
                lawEnforcer: [
                    { required: true, trigger: 'change', validator: checkPerson }
                ],
                lawEnforcerName: [
                    { required: true, trigger: 'change', validator: checkNumber }
                ],
            },
            carOptions: [
                {
                    label: '车辆一',
                    value: 1,
                },
                {
                    label: '车辆二',
                    value: 2,
                },
            ],
            departOptions: [
            ],
            carOptions: [
                {
                    label: '车辆一',
                    value: 1,
                },
                {
                    label: '车辆二',
                    value: 2,
                },
            ],
            squadronOptions: [
            ],
            personOptions: [

            ],
        }
    // 获取执法车辆
    getLawCarList() {
      this.$axios({
        method: "get",
        url: `sccg/car_Manage/query_enforce?current=1&size=1000`,
      }).then((res) => {
        this.carOptions = res.data.records;
        console.log(res, this.carOptions);
      });
    },
    methods: {
        // 执行调度
        handleDispatch() {
            console.log(this.dispatch);
            this.$refs.form.validate((valid) => {
                console.log(valid);
                if (valid) {
                    const { dispatch, id } = this;
                    dispatch.disposeDate = new Date();
                    console.log(id);
                    dispatch.baseCaseId = id;
                    console.log(dispatch);
                    this.$axios({
                        method: 'post',
                        url: `sccg/dispatch_handle/dispatch`,
                        data: dispatch
                    })
                        .then(res => {
                            this.$message({
                                type: res.code === 200 ? 'success' : 'error',
                                message: res.code === 200 ? '调度成功' : res.message,
                            })
                            this.$emit('changeDialog', { flag: false });
                            this.refresh();
                        })
                } else {
                    return false;
                }
            })
        },
        // 取消调度
        handleBack() {
            this.$emit('changeDialog', { flag: false })
        },
        // 获取执法车辆
        getLawCarList() {
            this.$axios({
                method: 'get',
                url: `sccg/car_Manage/query_enforce?current=1&size=1000`
            })
                .then(res => {
                    this.carOptions = res.data.orders;
                    console.log(res);
                })
        },
        // 获取渣土车辆
        getSoilCarList() {
            this.$axios({
                method: 'get',
                url: `sccg/car_Manage/query_slag?current=1&size=1000`
            })
                .then(res => {
                    this.carOptions = res.data.orders;
                    console.log(res);
                })
        },
        // 获取顶级部门
        getDepartList() {
            this.$axios({
                method: 'get',
                url: `sccg/depart/query_father`,
            })
                .then(res => {
                    this.departOptions = res.data;
                })
        },
        // 获取中队
        async getTeamList(id) {
            await this.$axios({
                method: 'get',
                url: `sccg/depart/query_father_children?fatherId=${id}`
            })
                .then(res => {
                    this.squadronOptions = res.data;
                })
                .catch(err => {
                    console.log(err);
                })
        },
        // 获取部门下的用户
        async getDepartUserList(id) {
            await this.$axios({
                method: 'get',
                url: `sccg/admin/getDepartUser/${id}`,
            })
                .then(res => {
                    this.personOptions = res.data;
                })
                .catch(err => {
                    this.$message({
                    type: 'error',
                    message: '该部门人员不足，请换个部门'
                })
                })
        },
        // 部门更改
        async handleTopChange(id) {
            this.dispatch.lawEnforcer = '';
            this.dispatch.enforcementTeam = '';
            await this.getTeamList(id);
            await this.getDepartUserList(id);
        },
        // 中队更改
        async handleMidChange(id) {
            this.dispatch.lawEnforcer = '';
            await this.getDepartUserList(id);
        },
        // 人员更改
        async handlePerChange(id){
            await this.getLawUser(id);
        },
        // 获取执法人员信息
        async getLawUser(id){
            await this.$axios({
                method:'get',
                url:`sccg/admin/${id}`
            })
            .then(res=>{
                console.log(res);
            })
    // 获取渣土车辆
    getSoilCarList() {
      this.$axios({
        method: "get",
        url: `sccg/car_Manage/query_enforce?current=1&size=1000`,
      }).then((res) => {
        this.carOptions = res.data.records;
      });
    },
    // 获取顶级部门
    getDepartList() {
      this.$axios({
        method: "get",
        url: `sccg/depart/query_father`,
      }).then((res) => {
        this.departOptions = res.data;
      });
    },
    // 获取中队
    async getTeamList(id) {
      console.log(id);
      await this.$axios({
        method: "get",
        url: `sccg/depart/query_father_children?fatherId=${id}`,
      })
        .then((res) => {
          this.squadronOptions = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取部门下的用户
    async getDepartUserList(id) {
      console.log(id);
      await this.$axios({
        method: "get",
        url: `sccg/admin/getDepartUser/${id}`,
      })
        .then((res) => {
          if (res.code === 200) {
            this.personOptions = res.data;
          } else {
            this.personOptions = [];
          }
          if (this.personOptions.length === 0) {
            this.$message({
              type: "warning",
              message: "该中队下没有人员",
            });
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: "该部门人员不足，请换个部门",
          });
        });
    },
    // 部门更改
    async handleTopChange(id) {
      this.dispatch.lawEnforcer = "";
      this.dispatch.enforcementTeam = "";
      this.dispatch.contactWay = "";
      this.dispatch.lawEnforcerName = "";
      await this.getTeamList(id);
      // if (this.squadronOptions.length === 0) {
      //     await this.getDepartUserList(id);
      // }
    },
    // 中队更改
    async handleMidChange(id) {
      this.dispatch.lawEnforcer = "";
      this.dispatch.contactWay = "";
      this.dispatch.lawEnforcerName = "";
      await this.getDepartUserList(id);
    },
    // 人员更改
    async handlePerChange(id) {
      let obj = await this.getLawUser(id);
      this.dispatch.lawEnforcerName = obj.nickName;
      this.dispatch.contactWay = obj.mobile;
    },
    // 获取执法人员信息
    async getLawUser(id) {
      let obj = {};
      await this.$axios({
        method: "get",
        url: `sccg/admin/${id}`,
      }).then((res) => {
        obj = res.data;
      });
      return obj;
    },
  },
  watch: {
    "squadronOptions.length": {
      handler(newval, oldval) {
        console.log(newval);
        if (newval === 0) {
          console.log(1);
          this.$message({
            type: "warning",
            message: "该部门下没有中队",
          });
        }
    }
}
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.dispatch {
    padding: 50px 20px 10px;
  padding: 50px 20px 10px;

    .form-person {
        display: flex;
  .form-person {
    display: flex;

        .person-item {
            margin-left: -100px;
        }
    .person-item {
      margin-left: -100px;
    }
  }

    .form-footer {
        display: flex;
        align-items: center;
        line-height: 40px;
  .form-footer {
    display: flex;
    align-items: center;
    line-height: 40px;

        .el-button {
            margin-bottom: 22px;
            margin-left: 40px;
        }
    .el-button {
      margin-bottom: 22px;
      margin-left: 40px;
    }
  }

    .map {
        height: 388px;
        width: 100%;
    }
  .map {
    height: 388px;
    width: 100%;
  }

    .footer {
        display: flex;
        justify-content: flex-end;
        padding: 10px 20px;
    }
  .footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 20px;
  }
}
</style>