nnbp_ui/src/components/Task/Add/index.vue

<template>
  <div class="taskadd">
    <el-form :model="taskinfo" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="工单号:">
            <el-input v-model="taskinfo.taskCode" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="行政区:">
            <el-select
              v-model="taskinfo.taskArea"
              class="m-1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in sys_area"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="其他工单号">
            <el-input v-model="taskinfo.taskOtherId" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事件来源:">
            <el-select
              v-model="taskinfo.taskType"
              class="m-1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in task_type"
                :label="item.label"
                :value="parseInt(item.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="道路名">
            <el-input v-model="taskinfo.taskAddrRoad" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="投诉人电话">
            <el-input v-model="taskinfo.taskComplainConnect" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班组区域:">
            <el-tree-select
              v-model="taskinfo.taskDeptRange"
              multiple
              :data="treedept"
              check-strictly="true"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="来件时间:">
            <el-date-picker
              v-model="taskinfo.taskTime"
              type="datetime"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="要求完成时间:">
            <el-date-picker
              v-model="taskinfo.taskReqCompleteTime"
              type="datetime"
              placeholder="请选择"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="事件分类:">
            <el-select
              v-model="taskinfo.taskEventCategory"
              class="m-1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in task_event_category"
                :label="item.label"
                :value="parseInt(item.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="事件类型:">
            <el-select
              v-model="taskinfo.taskEventType"
              class="m-1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in task_event_type"
                :label="item.label"
                :value="parseInt(item.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="任务内容:">
            <el-input v-model="taskinfo.taskContent" />
          </el-form-item>
        </el-col>

        <!-- <el-col :span="12">
          <el-form-item label="设施编号:">
            <el-input v-model="taskinfo.taskFacilitieCode" />
          </el-form-item>
        </el-col> -->

        <el-col :span="12">
          <el-form-item label="是否需要确认:">
            <el-select
              v-model="taskinfo.remark"
              class="m-1"
              placeholder="请选择"
            >
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="接单人员">
            <el-select
              v-model="taskinfo.taskReporter"
              placeholder="请选择人员"
              style="width: 100%"
              filterable
              allow-create
            >
              <el-option
                v-for="item in allusers"
                :label="item.nickName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="来件备注:">
            <el-input v-model="taskinfo.taskFromRemark" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="事件地址">
            <div style="position: relative; width: 100%">
              <div style="width: 80%">
                <el-input v-model="taskinfo.taskAddr" />
              </div>
              <el-button
                type="primary"
                style="position: absolute; right: 0; top: 0"
                @click="searchaddr"
                >查询</el-button
              >
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="照片附件(4张)"> </el-form-item>
        </el-col>

        <el-col :span="12">
          <div style="padding-left: 30px">
            <MapSelect ref="mapSelect" v-model:formv="formlocation"></MapSelect>
          </div>
        </el-col>

        <el-col :span="12">
          <div style="padding-left: 120px">
            <ImageUpload v-model="fileList"></ImageUpload>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { ref, watch, defineComponent, onMounted } from "vue";
import { listTask } from "@/api/system/task";
import {
  changeUserStatus,
  listUser,
  resetUserPwd,
  delUser,
  getUser,
  updateUser,
  addUser,
} from "@/api/system/user";
import { useDict } from "@/utils/dict";
import { cloneDeep } from "lodash";
import { listDept, getDept } from "@/api/system/dept";
import MapSelect from "@/components/MapSelect";
import { Plus } from "@element-plus/icons-vue";
// 文件上传组件
import ImageUpload from "@/components/ImageUpload";
import moment from "moment";
import { treeselect as deptTreeselect } from "@/api/system/dept";

export default defineComponent({
  name: "taskadd",
  components: { MapSelect },
  props: {
    taskinfo: Object,
  },
  setup(props, context) {
    const mapSelect = ref(null);
    const formlocation = ref({ addr: "", locations: "" });
    const {
      task_status,
      task_type,
      task_event_type,
      task_event_category,
      sys_area,
    } = useDict(
      "task_status",
      "task_type",
      "task_event_type",
      "task_event_category",
      "sys_area"
    );
    const taskinfo = ref({});
    listTask({ taskCode: moment().year() + "" }).then((res) => {
      taskinfo.value.taskCode =
        moment().year() + (Array(3).join(0) + (res.total + 1)).slice(-3);
    });

    watch(
      () => formlocation.value.addr,
      () => {
        taskinfo.value.taskAddr = formlocation.value.addr;
      }
    );
    watch(
      () => formlocation.value.locations,
      () => {
        taskinfo.value.taskLocation = formlocation.value.locations;
        if (formlocation.value.locations != "") {
          mapSelect.value.getlocationaddr(
            formlocation.value.locations,
            (data) => {
              var qu = data.regeocode.addressComponent.district;
              if (qu) {
                for (var i in sys_area.value) {
                  if (sys_area.value[i].label == qu) {
                    taskinfo.value.taskArea = sys_area.value[i].value;
                  }
                }
              }
            }
          );
        }
      }
    );
    const store = useStore();
    const getters = computed(() => store.getters);


    const searchaddr = () => {
      if (taskinfo.value.taskAddr) {
        mapSelect.value.searchaddr(taskinfo.value.taskAddr);
      } else {
        ElMessage.warning("请输入地址");
      }
    };
    const alldept = ref([]);
    listDept().then((response) => {
      alldept.value = cloneDeep(response.data);
    });
    const allusers = ref([]);
    listUser({ pageSize: 1000 }).then((res) => {
      allusers.value = res.rows;
    });
    const doinit = (data) => {
      // console.log(getters.value)
      taskinfo.value = data;

      if (data.taskId == null) {
        fileList.value = "";
        formlocation.value = { addr: "", locations: "" };
        taskinfo.value.taskReporter = getters.value.userId;

      } else {
        if (
          taskinfo.value.taskDeptRange != null &&
          taskinfo.value.taskDeptRange != "" &&
          taskinfo.value.taskDeptRange != undefined &&
          !Array.isArray(taskinfo.value.taskDeptRange)
        ) {
          taskinfo.value.taskDeptRange = taskinfo.value.taskDeptRange
            .split(",")
            .map((i) => parseInt(i));
        }
        if (taskinfo.value.taskReporter == null ||
          taskinfo.value.taskReporter == "" ||
          taskinfo.value.taskReporter == undefined) {
           taskinfo.value.taskReporter = getters.value.userId;
        }
        if (
          taskinfo.value.taskPics != null &&
          taskinfo.value.taskPics != "" &&
          taskinfo.value.taskPics != undefined
        ) {
          fileList.value = taskinfo.value.taskPics;
        }
        if (
          taskinfo.value.taskAddr != null &&
          taskinfo.value.taskAddr != "" &&
          taskinfo.value.taskAddr != undefined
        ) {
          formlocation.value.addr = taskinfo.value.taskAddr;
          formlocation.value.locations = taskinfo.value.taskLocation;
        }
      }
    };
    onMounted(() => {
      doinit(props.taskinfo);
    });

    const fileList = ref([]);
    watch(
      () => fileList.value,
      () => {
        taskinfo.value.taskPics = fileList.value;
      }
    );
    const updateallvalue = () => {
      context.emit("update:taskinfo", taskinfo.value);
    };

    function setdatakey(dept) {
      if (dept.children) {
        dept.children = dept.children.map((i) => {
          return setdatakey(i);
        });
      }
      dept["value"] = dept.id;
      return dept;
    }

    const treedept = ref([
      {
        value: "1",
        label: "ss",
      },
      {
        value: "2",
        label: "ss1",
      },
    ]);
    deptTreeselect().then((res) => {
      treedept.value = [setdatakey(res.data[0])];
    });

    return {
      mapSelect,
      MapSelect,
      formlocation,
      taskinfo,
      searchaddr,
      alldept,
      allusers,
      treedept,
      task_status,
      task_type,
      task_event_type,
      task_event_category,
      sys_area,
      fileList,
      doinit,
      updateallvalue,
    };
  },
});
</script>

<style lang="scss" scoped>
.taskadd {
  .el-select {
    width: 100% !important;
  }
}
</style>

<style>
.el-date-editor {
  width: 100% !important;
}

.el-upload--picture-card {
  --el-upload-picture-card-size: 100px !important;
}

.el-upload-list--picture-card {
  --el-upload-list-picture-card-size: 100px;
}
</style>