twyp/ruoyi-ui/src/views/report/add.vue

<template>
  <div class="app-container addPlan">
    <div>
      <div
        style="
          font-size: 16rem;
          font-weight: 1000;
          text-align: left;
          color: #333333;position: relative;
          background: #fff;
        "
      >
        {{ name }}
        <el-button size="small" type="primary" plain style="position: absolute;top:0;right: 10px"  @click="cancle">返回</el-button>
      </div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="200rem"
        style="padding-left: 10%; padding-right: 100rem; margin-top: 50rem"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="选择计划" prop="planId">
              <el-select
                v-model="form.planId"
                placeholder="请选择施工计划"
                clearable
                size="small"
                style="width: 300rem"
                :disabled="readonly"
                @change="planChange()"
              >
                <el-option
                  v-for="obj in planList"
                  :key="obj.id"
                  :label="obj.name"
                  :value="obj.id"
                />
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="施工路段" prop="section" >
              <el-select
                v-model="form.section"
                placeholder="请选择路段"
                clearable
                size="small"
                :disabled="readonly"
                style="width: 300rem"
              >
                <el-option
                  v-for="dict in dict.type.road"
                  :key="dict.value"
                  :label="dict.value"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="方向" prop="direction">
              <el-select
                v-model="form.direction"
                placeholder="请选择方向"
                clearable
                :disabled="readonly"
                size="small"
              >
                <el-option
                  v-for="dict in dict.type.sys_direction"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-row >
              <el-col :span="7">
                <el-form-item label="开始公里桩" prop="startKm">
                  <el-input
                    v-model="form.startKm"
                    placeholder="请输入开始公里桩"
                    style="width: 300rem"
                    :readonly="readonly"
                  >
                    <template slot="prepend">K</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="" prop="startHectometer">
                  <el-input
                    v-model="form.startHectometer"
                    placeholder="请输入开始米桩"
                    style="width: 300rem"
                    :readonly="readonly"
                  >
                    <template slot="prepend">+</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-col>

          <el-col :span="24">
            <el-row>
            <el-col :span="12">
            <el-form-item label="占用车道" prop="lane">
              <el-select
                multiple
                v-model="roadlan"
                placeholder="请选择方向"
                clearable
                :disabled="readonly"
                size="small"
                style="width: 300rem"
              >
                <el-option
                  v-for="i in ['1','2','3', '4']"
                  :key="i"
                  :label="i"
                  :value="i"
                />
              </el-select>
              <!-- <el-input v-model="form.lane" placeholder="请输入占用车道" style="width:300rem"/> -->
            </el-form-item>

            </el-col>
              <el-col :span="12">
                <el-row >
                  <el-col :span="7">
                    <el-form-item label="结束公里桩" prop="endKm">
                      <el-input
                        v-model="form.endKm"
                        :readonly="readonly"
                        placeholder="请输入结束公里桩"
                        style="width: 300rem"
                      >
                        <template slot="prepend">K</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="" prop="endHectometer">
                      <el-input
                        v-model="form.endHectometer"
                        :readonly="readonly"
                        placeholder="请输入结束米桩"
                        style="width: 300rem"
                      >
                        <template slot="prepend">+</template>
                      </el-input>

                    </el-form-item>
                    <span v-if="showlengthover" style="color:red;position: absolute;bottom:0;left: 12vw;width:200px">{{showlenfthmsg}}</span>
                  </el-col>
                </el-row>

              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工内容一" prop="contentOne">
              <el-select
                v-model="form.contentOne"
                placeholder="请选择方向"
                clearable
                :disabled="readonly"
                size="small"
                style="width: 300rem"
              >
                <el-option
                  v-for="dict in dict.type.content_one"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="预计开始时间" prop="startTime">
              <!-- <el-date-picker clearable
                                                v-model="form.startTime"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="请选择预计开始时间">
                                            </el-date-picker> -->
              <el-date-picker
                style="width: 300rem"
                v-model="form.startTime"
                value-format="yyyy-MM-dd HH:mm:dd"
                type="datetime"
                :readonly="readonly"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="施工内容二" prop="contentTwo">

              <el-select
                v-model="form.contentTwo"
                placeholder="请选择方向"
                clearable
                :disabled="readonly"
                size="small"
                style="width: 300rem"
              >
                <el-option
                  v-for="dict in dict.type.content_two"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="预计结束时间" prop="endTime">
              <el-date-picker
                clearable
                style="width: 300rem"
                v-model="form.endTime"
                :readonly="readonly"
                value-format="yyyy-MM-dd HH:mm:dd"
                type="datetime"
                placeholder="请选择预计结束时间"
              >
              </el-date-picker>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="现场负责人" prop="manageUser">
              <el-input
                :readonly="readonly"
                v-model="form.manageUser"
                placeholder="请输入现场负责人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现场安全员" prop="saveUser">
              <el-input
                :readonly="readonly"
                v-model="form.saveUser"
                placeholder="请输入现场安全员"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现场负责人手机号" prop="managePhone">
              <el-input
                type="textarea"
                :readonly="readonly"
                v-model="form.managePhone"
                placeholder="请输入现场负责人手机号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安全员手机号" prop="savePhone">
              <el-input
                type="textarea"
                :readonly="readonly"
                v-model="form.savePhone"
                placeholder="请输入安全员手机号"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="施工内容描述" prop="contentDes">
              <el-input type="textarea" :readonly="readonly" v-model="form['contentDes']"></el-input>
            </el-form-item>

          </el-col>

        </el-row>
        <div >
          <el-form-item label="审批流程" >
            <div style="padding-top: 10px">
              <el-timeline :reverse="true">
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :timestamp="activity.timestamp">
                  {{activity.deptname + "  "+activity.content}}
                </el-timeline-item>
              </el-timeline>

            </div>

          </el-form-item>

        </div>

      </el-form>






      <div style="text-align: center">
        <el-button size="mini" type="primary" v-if="!readonly" @click="save(1)">保存</el-button>
        <el-button size="mini" type="success" v-if="!readonly" @click="dialogVisible = true">提交</el-button>
        <el-button size="mini" v-if="!readonly" @click="cancle">取消</el-button>
      </div>
    </div>

    <el-dialog
      title="选择部门"
      :visible.sync="dialogVisible"
      append-to-body
      width="20%"
      style="margin-top: 20vh"
    >
      <div>
        <el-row>
          <el-col
            :span="12"
            v-for="item in deptlist.filter(i=>{

              for (const iKey in spl) {
                 if (spl[iKey][0]+'' == i.deptId+''){return true;}
              }
              return  false;
            })" v-bind:key="item.deptId"
            style="margin-bottom: 10px"
          >
            <el-radio v-model="audioDept" :label="item.deptId">{{
              item.deptName
            }}</el-radio>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save(2)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listReport,
  getReport,
  delReport,
  addReport,
  updateReport,
} from "@/api/system/report";
import {
  listPlan,
  getPlan,
  delPlan,
  addPlan,
  updatePlan,
} from "@/api/system/plan";
import {
  listDept,
  getDept,
  delDept,
  addDept,
  updateDept,
  listDeptExcludeChild,
} from "@/api/system/dept";
import {
  listConfig,
  getConfig,
  delConfig,
  addConfig,
  updateConfig,
  refreshCache,
  getConfigKey
} from "@/api/system/config";

import { cloneDeep } from "lodash";
import moment from "moment";
import router from "@/router";
// import { AppMain } from '@/layout/components'
export default {
  name: "Index",
  dicts: ["sys_direction", "content_one", "content_two","road"],
  // components: {
  //   AppMain,
  // },
  data() {
    return {
      // 版本号
      version: "3.8.2",
      // 表单参数
      form: {},
      activities:[{content: '报备创建',
        timestamp: '2018-04-15'}],
      rules: {},
      planList: [],
      status: "",
      name: "",
      dialogVisible: false,
      audioDept: "103",
      deptlist: [],
      roadlan:[],
      showlengthover:false,
      showlenfthmsg:"总长不得超过2.5公里",
      readonly:false,
      nexdept:null,
      alldept:[],
      spl:[],

    };
  },
  watch: {
    'roadlan': {
      handler(oldValue, newVal) {
         var cpc =cloneDeep(oldValue);
         this.form["lane"] = cpc.sort().join(",");
      }
    },
    form: {
      handler(oldValue, newVal) {

        var len = (getobjdata(newVal.endKm)+(getobjdata(newVal.endHectometer)/1000)) - (getobjdata(newVal.startKm)+(getobjdata(newVal.startHectometer)/1000));

        if(len>2.5){
          this.showlenfthmsg = '总长不得超过2.5公里';
          this.showlengthover = true;
        }else{
          if(len<0){
            this.showlenfthmsg = '起始桩不得大于终止桩';
            this.showlengthover = true;
          }else{
            this.showlengthover = false;
          }

        }

      },
      deep: true  // 深度监听
    }
  },
  mounted: function () {
    this.getList();
    var queryd = localStorage.getItem("currentreport");
    if(queryd){
      queryd = JSON.parse(queryd);
    }else{
      this.$modal.msgError("发生错误");
      this.$router.back();
      return;
    }
    console.log(queryd);
    this.$route.query.params = null;
    this.form = queryd;
    this.name = queryd.routerName;
    if(this.form.planId){
      this.form.planId= parseInt(this.form.planId);
    }


    this.activities = JSON.parse(queryd.ext1 ?? "[]") ?? [];
    //根据时间排序
    this.activities = this.activities.sort((a, b)=>{ return  moment(a.timestamp).unix()-moment(b.timestamp).unix()})



    if(queryd.status==undefined || queryd.status==null || queryd.status==""){
      queryd.status="1";
    }
    if(this.name === '详情' || queryd.status!=="1" ){
      this.readonly = true;
    }else{
      this.readonly=false;
    }
    if(this.name === '修改'&& queryd.status=="4"){
      this.readonly=false;
    }



    this.form.lane = queryd.lane;
    this.roadlan = this.form.lane?this.form.lane.split(","):[]
    // console.log(this.roadlan)

    listDept({ parentId: 101 }).then((res) => {
      //  console.log(res)
      this.deptlist = res.data;
    });


    listDept({}).then(res=>{
      this.alldept = res.data;
    });
    getConfigKey("spflow").then(res=>{
      res = JSON.parse(res.msg);
      this.spl = res;
    })



    // console.log(this.$route.query.status);
  },
  methods: {
    planChange() {

      for (var index in this.planList) {
        if (this.planList[index].id == this.form.planId) {


          this.form = {...cloneDeep(this.planList[index])};
          this.form.planId = this.planList[index].id;
          delete  this.form.id;
          this.form.startTime +=" 00:00:00";
          this.form.endTime +=" 00:00:00";
          this.form.ext1 = this.planList[index].ext1;

          // this.form.section = this.planList[index].section;
          // this.form.direction = this.planList[index].direction;
          // this.form.startKm = this.planList[index].startKm;
          // this.form.startHectometer = this.planList[index].startHectometer;
          // this.form.endKm = this.planList[index].endKm;
          // this.form.endHectometer = this.planList[index].endHectometer;
          // this.form.contentOne = this.planList[index].contentOne;
          // this.form.contentTwo =  this.planList[index].contentTwo;

        }
      }
    },
    getList() {
      listPlan().then((response) => {
        this.planList = response.rows;
        console.log(this.planList);
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    save(status) {
      this.form.status = status;
      if (status == 2) {
        this.form.auditDept = this.audioDept;
        // this.form.ext1 = JSON.parse(this.form.ext1==undefined?"[]":this.form.ext1) ?? [];
        // var timedate =  moment().format("YYYY-MM-DD HH:mm:ss");
        // this.form.ext1.push({"content": "提交审核", "deptname": this.$store.state.user.dept.deptName, "timestamp": timedate})
        // this.form.ext1 = JSON.stringify(this.form.ext1);
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            console.log(this.form)
            updateReport(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$router.push({ path: "/report" });
            });
          } else {
            addReport(this.form).then((response) => {
              console.log(this.response);
              this.$modal.msgSuccess("新增成功");
              this.$router.push({ path: "/report" });
            });
          }
        }
      });
    },
    cancle() {
      this.$router.push({ path: "/report" });
    },
    submit() {
      this.dialogVisible = true;
    },
  },
};

function getobjdata(val){
  return val?parseInt(val):0;
}
</script>

<style scoped lang="scss">
.addPlan {
  background-color: #ffffff;
  overflow-y: auto;
}

</style>