yixing_zc_wx/pages/subPackages/companyreport/components/reportDetails.vue

<template>
  <div class="goreport">
    <div class="form gaisideshurukuang">
      <uni-forms
        ref="baseForm"
        style="font-size: 26rpx"
        :modelValue="form"
        label-width="150rpx"
      >
        <uni-forms-item
          label="走访公司"
          class="mt42rpx pd42rpx border_bottom_ccc"
        >
          <div
            @click="chosseAboutCompany()"
            style="height: 73rpx; line-height: 73rpx"
          >
            <span>
              {{ !form.companyName ? "请选择走访公司" : form.companyName }}
            </span>
          </div>
        </uni-forms-item>
        <uni-forms-item
          label="走访时间："
          class="mt42rpx pd42rpx border_bottom_ccc"
        >
          <div style="height: 73rpx; line-height: 73rpx">
            <picker
              style="float: left; width: 100%; height: 40rpx; color: #777"
              mode="date"
              :value="form.interviewTime"
              @change="getInterviewTime"
            >
              {{ !form.interviewTime ? "请选择走访时间" : form.interviewTime }}
            </picker>
          </div>
        </uni-forms-item>
        <uni-forms-item
          label="同行人"
          class="mt42rpx pd42rpx border_bottom_ccc"
        >
          <div style="display: flex; justify-content: space-between">
            <div style="margin-top: 15rpx">
              <div v-for="(item, index) in isSelectPeers" class="isSelectPeers">
                {{ item.name }}
                <icon type="clear" size="18" @click="deletePeer(index)" />
              </div>
            </div>
            <picker
              style="margin-top: 20rpx"
              @change="selectPeers"
              :value="index"
              range-key="truename"
              :range="peersList"
            >
              <span style="color: #1d18bc">添加</span>
            </picker>
          </div>
        </uni-forms-item>
        <uni-forms-item
          v-if="form.interviewType == '上市进展'"
          label="估值："
          class="mt42rpx pd42rpx border_bottom_ccc"
        >
          <div style="height: 73rpx; display: flex; align-items: center">
            <input
              type="number"
              v-model="form.valuation"
              placeholder="请输入估值"
            />
          </div>
        </uni-forms-item>
        <uni-forms-item
          v-if="form.interviewType == '上市进展'"
          label="融资情况"
          class="mt42rpx pd42rpx border_bottom_ccc"
        >
          <div style="height: 73rpx; display: flex; align-items: center">
            <input
              type="text"
              v-model="form.financingSituation"
              placeholder="请输入融资情况"
            />
          </div>
        </uni-forms-item>
      </uni-forms>
    </div>

    <div class="form zoufangjilu" style="margin-bottom: 146rpx">
      <van-row>
        <van-col :span="24"> 走访记录 </van-col>
      </van-row>
      <div class="margint16rpx">
        <textarea
          type="textarea"
          inputBorder
          maxlength="5000"
          autoHeight
          class="textarea_info 666"
          style="
            margin-top: 16rpx;
            border: 1px solid #cccccc;
            border-radius: 4px;
            padding: 10rpx;
            min-height: 500rpx;
            height: auto;
            width: 97%;
          "
          v-model="form.interviewRecord"
          placeholder="请输入"
        >
        </textarea>
      </div>
      <uni-forms
        v-if="form.isStatus != 1"
        ref="baseForm"
        style="font-size: 26rpx"
        :modelValue="form"
        label-width="170rpx"
      >
      </uni-forms>
    </div>
    <!-- <multiple-select
        v-model="show"
        model="false"
        :all-show="false"
        :data="companyAllList"
        :default-selected="defaultSelected"
        @confirm="confirm"
      ></multiple-select> -->
    <view class="btn-view">
      <div class="btn" @click="dialogInputConfirm()" style="margin-left: 10rpx">
        编辑完成
      </div>
    </view>
    <van-popup :show="show" bind:close="onClose" round position="bottom">
      <div style="display: flex; justify-content: space-between">
        <div style="margin: 32rpx" @click="closePopup()">取消</div>
        <div style="margin: 32rpx" @click="getSelectValue()">确认</div>
      </div>
      <uni-easyinput
        v-model="companyName"
        @input="filtedCompanyAllList"
        placeholder="请输入内容"
      ></uni-easyinput>
      <picker-view
        indicator-style="height: 50px;"
        style="width: 100%; height: 300px"
        @change="getRowValue"
        :value="value"
      >
        <picker-view-column>
          <view
            v-for="(item, index) in companyAllList"
            :key="index"
            style="line-height: 50px; text-align: center"
            >{{ item.label }}</view
          >
        </picker-view-column>
      </picker-view>
    </van-popup>
  </div>
</template>
    
    <script>
import multipleSelect from "../../../subPackages/components/momo-multipleSelect/momo-multipleSelect";

import {
  getByCodes,
  addInterview,
  getBySaveStatus,
  editInterview,
  getCompanyAll,
  getInterviewDetails,
  getQyList,
} from "@/js_sdk/http.js";
import vanRow from "../../../../wxcomponents/weapp/dist/row";
import vanCol from "../../../../wxcomponents/weapp/dist/col";

// import { findYuanQuList } from "@/js_sdk/http.js";
const form = {
  id: null,
  isStatus: null,
  interviewTime: null,
  interviewType: null,
  interviewTypeIndex: null,
  companyId: null,
  companyIndex: null,
  projectType: "",
  interviewRecord: "",
  associationCompanyString: [],
};
export default {
  components: {
    vanRow,
    vanCol,
    multipleSelect,
  },
  data() {
    return {
      id: "",
      isSelectPeers: [],
      isStatus: 2,
      range: [
        { value: 2, text: "是" },
        { value: 1, text: "否" },
      ],
      defaultSelected: [],
      dic_key: ["interviewType"],
      dic_SelectList: {},
      companyIndex: null,
      companyAllList: [],
      defaultSelected: [],
      show: false,
      active: 0,
      form: { ...form },
      index: 0,
      companyName: "",
      value: 0,
      peersList: [],
      companyAllList: [],
    };
  },
  onLoad: function (option) {
    this.getCompanyAll();
    this.id = option.id; //打印出上个页面传递的参数。\
    this.getByCodes();
    this.getQyList();
  },
  methods: {
    getRowValue(e) {
      console.log(e);
      this.isSelectedIndex = e.detail.value[0];
    },
    closePopup() {
      this.show = false;
      this.form.companyIndex = null;
      this.form.companyId = null;
    },
    getSelectValue() {
      console.log(this.value, "this.value");
      console.log("this.isSelectedIndex", this.isSelectedIndex);
      if (this.isSelectedIndex == null) {
        this.form.companyIndex = 0;
        this.form.companyId = this.companyAllList[this.value].value;
        this.form.companyName = this.companyAllList[this.value].label;
        console.log("11111111", this.form.companyName);
      } else {
        let index = this.companyAllList.findIndex(
          (e) => e.value == this.companyAllList[this.isSelectedIndex].value
        );
        this.form.companyIndex = index;
        this.form.companyId = this.companyAllList[index].value;
        this.form.companyName = this.companyAllList[index].label;
        console.log("企业名称", this.form.companyName);
        console.log("企业id", this.form.companyId);
        console.log();
      }

      this.show = false;
    },
    async filtedCompanyAllList() {
      // this.value = 0;
      // this.isSelectedIndex = 0;

      let companyAllList = await getCompanyAll(this.companyName);
      this.companyAllList = companyAllList.map((e) => {
        return {
          label: e.qymc,
          value: e.id,
        };
      });

      console.log("当前的value", this.value);
      console.log("companyAllList", this.companyAllList);
      // if (this.companyName && this.companyName.length > 0) {
      //   // companyAllList = this.companyAllList.filter((e) =>
      //   //   e.label.includes(this.companyName)
      //   // );

      //   if (companyAllList.length > 0 && companyAllList[0].value) {
      //     let index = this.companyAllList.findIndex(
      //       (e) => e.value == companyAllList[0].value
      //     );
      //     this.form.companyIndex = index;
      //   } else {
      //     this.form.companyIndex = null;
      //     this.form.companyId = null;
      //   }
      // } else {
      //   companyAllList = this.companyAllList;
      // }
      return companyAllList;
    },
    async getQyList() {
      let data = await getQyList();
      this.peersList = data;
      console.log("dataadataasfdsagd", data);
    },
    deletePeer(i) {
      this.isSelectPeers.splice(i, 1);
    },
    selectPeers(e) {
      console.log(this.peersList[e.detail.value]);
      let data = this.peersList[e.detail.value];
      console.log(e.detail.value);
      for (let i = 0; i < this.isSelectPeers.length; i++) {
        if (data.truename == this.isSelectPeers[i].name) {
          this.$showToast("请勿重复添加");
          return;
        }
      }
      this.isSelectPeers.push({ name: data.truename, id: data.id });
    },
    async dialogInputConfirm() {
      for (const key in this.form) {
        console.log(this.form[key]);
        if (!this.form[key]) {
          delete this.form[key];
        }
      }
      console.log("this.isSelectPeers", this.isSelectPeers);
      let companionsUserName = this.isSelectPeers
        .map((e) => {
          return e.name;
        })
        .join();
      let companionsUserId = this.isSelectPeers
        .map((e) => {
          return e.id;
        })
        .join();
      console.log(companionsUserId);
      let data = await editInterview({
        ...this.form,
        companionsUserName: companionsUserName,
        companionsUserId: companionsUserId,
      });
      if (data.code == 200) {
        this.$showToast("修改成功");
        uni.navigateBack({});
      }
    },
    async getInterviewDetails() {
      let detail = await getInterviewDetails(this.id);
      this.form = detail;
      this.getCompanyIdByApiList({ companyId: detail.companyId });
      this.getInterviewLableByApiList({
        interviewType: this.form.interviewType,
      });
      this.form.isStatus = detail.isStatus;
      console.log(
        "detail.companionsUserName.split()",
        detail.companionsUserName.split()
      );
      if (detail.companionsUserName.length > 0) {
        let isSelectPeers = detail.companionsUserName.split(",").map((e) => {
          return { name: e };
        });
        console.log("isSelectPeers", isSelectPeers);
        for (let i = 0; i < detail.companionsUserId.split(",").length; i++) {
          isSelectPeers[i].id = detail.companionsUserId.split(",")[i];
        }
        console.log(this.isSelectPeers);
        this.isSelectPeers = isSelectPeers;
      } else {
        this.isSelectPeers = [];
      }
    },

    getCompanyIdByApiList(params) {
      this.form.companyId = params.companyId;

      let companyIndex = this.companyAllList.findIndex(
        (e) => e.value == params.companyId
      );
      this.form.companyIndex = companyIndex;
    },
    getInterviewLableByApiList(params) {
      let interviewTypeIndex = this.dic_SelectList.interviewType.findIndex(
        (e) => e.value == params.interviewType
      );
      this.form.interviewType =
        this.dic_SelectList.interviewType[interviewTypeIndex].value;
      this.form.interviewTypeIndex = interviewTypeIndex;
    },
    getInterviewTime(e) {
      this.form.interviewTime = e.detail.value;
    },
    async takeParamsGoBack(e) {
      const token = uni.getStorageSync("laocui_user_info");
      let data;
      if (this.form.id) {
        data = await editInterview({
          ...this.form,
          status: e,
          createdBy: JSON.parse(token).user.id,
        });
      } else {
        if (this.form.companyId == null) {
          return this.$showToast("请选择走访公司");
        }
        if (this.form.interviewTime == null || this.form.interviewTime == "") {
          return this.$showToast("请选择走访时间");
        }

        data = await addInterview({
          ...this.form,
          status: e,
          createdBy: JSON.parse(token).user.id,
        });
      }

      if (data.code == 200) {
        if (e == 1) {
          this.$emit("changeActive");
          this.$showToast("提交成功");
          this.form = { ...form };
        }
        if (e == 0) {
          this.$showToast("保存成功");
        }
      }
    },
    getCompany(e) {
      this.form.companyIndex = e.detail.value;
      this.form.companyId = this.companyAllList[e.detail.value].value;
    },
    chosseAboutCompany() {
      this.show = true;
    },
    async getCompanyAll() {
      let companyAllList = await getCompanyAll();
      this.getInterviewDetails();
      this.companyAllList = companyAllList.map((e) => {
        return {
          label: e.qymc,
          value: e.id,
        };
      });
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
    },
    confirm(e) {
      let associationCompanyString = [];
      let associationCompany = [];
      for (var p in e) {
        associationCompanyString.push(e[p].label);
        associationCompany.push(e[p].value);
      }
      this.form.associationCompanyString = associationCompanyString.join(",");
      this.form.associationCompany = associationCompany.join(",");
    },
    bindPickerChange(e) {
      this.form.interviewTypeIndex = e.detail.value;
      this.form.interviewType =
        this.dic_SelectList.interviewType[e.detail.value].value;
    },
  },
  // onLoad: function (){
  // 	this.$refs.findYuanQuList()
  // },
};
</script>
    
    <style lang="scss">
.gaisideshurukuang {
  .textheighet {
    height: auto;
  }
  .isSelectPeers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10rpx;
    width: 372rpx;
  }
  .btn-view {
    width: 100%;
    height: 100rpx;

    padding: 20rpx 10%;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  .btn {
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    width: 80%;
    height: 90rpx;
    text-align: center;
    // border-radius: 50rpx 50rpx 50rpx 50rpx;
    background: #1d18bc;
    line-height: 90rpx;
    color: white;
  }
  font-size: 26rpx !important;
  .is-input-border {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border: none;
    border-radius: 0 !important;
  }
  .uni-forms-item {
    margin-bottom: 0px;
    border-bottom: 2rpx solid #cccccc !important;
  }
}
.btn-view {
  width: 100%;
  height: 100rpx;
  padding: 20rpx 10%;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
}
.btn {
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  width: 80%;
  height: 90rpx;
  text-align: center;
  // border-radius: 50rpx 50rpx 50rpx 50rpx;
  background: #1d18bc;
  line-height: 90rpx;
  color: white;
}
.goreport {
  .uni-forms-item {
    margin-bottom: 0px;
    border-bottom: 2rpx solid #cccccc !important;
  }
  .textarea_info {
    textarea {
      background: #f9f9f9;
    }
  }
  .is-disabled {
    background: white !important;
    color: #777;
  }
  .form {
    width: calc(100% - 128rpx);
    margin: 32rpx;
    background: #ffffff;
    padding: 32rpx;

    .label {
      height: 53rpx;
      line-height: 53rpx;
    }
    .is-input-border {
    }
    .uni-forms-item {
      border-bottom: 2rpx solid #cccccc !important;
    }
  }
}
</style>