HS_MZAP/src/views/toBeDone/toBeDone_details.vue

<template>
  <div>
    <van-nav-bar
      fixed
      title="我的待办"
      left-arrow
      @click-left="onClickLeft"
      :style="{ 'background-color': selectColor }"
    />
  </div>
  <div class="main" v-show="!isLoading">
    <div class="banner">
      <img src="../../../public/loginbg/banner.jpg" alt="" />
    </div>
    <div class="info">
      <p class="miniTitle">详细信息</p>

      <div class="content-top">
        <van-cell-group>
          <van-field
            center
            readonly
            clearable
            label-align="top"
            label="问题内容："
            input-align="left"
          >
            <template #input>
              <p v-html="PersonInfo.data.problemContent"></p>
            </template>
          </van-field>
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="PersonInfo.createDepartment.name"
            center
            readonly
            clearable
            label="发起部门："
            input-align="right"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="PersonInfo.todoBy.name"
            center
            readonly
            clearable
            label="发起人："
            input-align="right"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="PersonInfo.data.assignTypeName"
            center
            readonly
            clearable
            label="交办类型："
            input-align="right"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="PersonInfo.data.problemArea"
            center
            readonly
            clearable
            label="问题区域："
            input-align="right"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="PersonInfo.data.siteName"
            center
            readonly
            clearable
            label="问题场所："
            input-align="right"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="PersonInfo.data.areaSelectName"
            center
            readonly
            clearable
            label="详细地址："
            input-align="right"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="PersonInfo.data.problemTime"
            center
            readonly
            clearable
            label="发生时间："
            input-align="right"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="PersonInfo.data.deadlineTime"
            center
            readonly
            clearable
            label="截止时间："
            input-align="right"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="PersonInfo.data.problemAccessory"
            center
            readonly
            clearable
            label="问题附件："
            input-align="right"
          />
        </van-cell-group>
      </div>
      <div class="content-bottom">
        <van-cell-group>
          <van-field
            center
            readonly
            clearable
            label-align="top"
            label="处理结果："
            input-align="left"
          >
            <template #input>
              <form action="">
                <textarea
                  v-if="PersonInfo.data.disposeContent == ''"
                  v-model="PersonInfo.disposeContent"
                  name=""
                  id=""
                  cols="50"
                  rows="5"
                ></textarea>
                <textarea
                  v-if="PersonInfo.data.disposeContent != ''"
                  v-model="PersonInfo.data.disposeContent"
                  name=""
                  id=""
                  cols="50"
                  rows="5"
                ></textarea>
              </form>
            </template>
          </van-field>
        </van-cell-group>
        <van-cell-group class="upload">
          <van-field name="uploader" label-align="top" label="处理证据资料：">
            <template #input>
              <van-uploader
                :after-read="afterRead"
                v-model="fileList"
                :max-count="6"
                capture="camera"
                accept=""
                :before-delete="fjdelete"
              >
                <van-button icon="plus">上传文件</van-button>
              </van-uploader>
            </template>
          </van-field>
        </van-cell-group>
      </div>
    </div>
     <van-button type="primary" @click="submit" class="btn-sub">确认</van-button>
  </div>

 
</template>

<script>
import { useRouter } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import ToBeDone from "@/api/toBeDone/toBeDone";
import tools from "@/api/sys/tools";
export default {
  setup() {
    const router = useRouter();
    const PersonInfo = reactive({
      data: {},
      createDepartment: {},
      todoBy: {},
      disposeContent: "",
    });
    // 导航栏颜色
    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
    //数据接收
    onMounted(() => {
      var item = JSON.parse(router.currentRoute.value.query.data);
      // let itemId = item.id
      console.log(item);
      PersonInfo.data = item;
      PersonInfo.createDepartment = PersonInfo.data.createDepartment;
      PersonInfo.todoBy = PersonInfo.data.todoBy;
    });
    //返回事件
    const onClickLeft = () => {
      history.back();
    };
    // 文件上传
    let fileList = ref([]);
    let fileupList = ref([]);
    const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      new tools()
        .uploadFile(file, `assign/assignWorkOrder`)
        .then(({ data }) => {
          console.log(data);
          data.name = decodeURIComponent(
            data.url.substring(data.url.lastIndexOf("/") + 1)
          );
          PersonInfo.data.disposeAccessory += ''+data.url
          //data.url = `${$base}` + data.url;
          fileupList.value.push(data);
        });
    };
    
    const fjdelete = (file) => {
      //删除文件操作
      for (let index = 0; index < fileList.value.length; index++) {
        if (file.file == fileList.value[index].file) {
          let delurl = fileupList.value[index].url;
          new tools().uploadFiledelete("", delurl).then(({ data }) => {});
          fileupList.value.splice(index, 1);
          fileList.value.splice(index, 1);
        }
      }
    };

    //待办反馈提交
    const submit = () => {
      if (
        PersonInfo.data.assignState != "3" ||
        PersonInfo.data.assignState != "4"
      ) {
        PersonInfo.data.disposeContent = PersonInfo.disposeContent;
        PersonInfo.data.assignState = "3";
        new ToBeDone().save(PersonInfo.data).then((res) => {
          // router.push({
          //   path: "/toBeDone",
          // });
        });
      } else {
        router.push({
          path: "/toBeDone",
        });
      }
    };
    return {
      onClickLeft,
      PersonInfo,
      submit,
      selectColor,
      afterRead,
      fileList,
      fjdelete,
    };
  },
};
</script>

<style lang="less">
.btn-sub {
  width: 90%;
  border-radius: 20px;
  margin-left: 5%;
  margin-bottom: 40px;
}
.upload{
  .van-button{
    border: none;
    color: #1989fa;
  }
}
</style>