ys-app/src/pages/business/CRM/marketActivity/components/lyVisistComponent.vue

<template>
  <uni-forms ref="formRef" :model="formData" label-width="100px" label-position="top">
    <uni-forms-item label="客户人员" name="customerUserList" class="f-c-right">
      <uni-easyinput v-model="formData.customerUserList" placeholder="请选择客户人员" name="input"
                     :disabled="isDisabled"
                     @focus="chooseClientUser"></uni-easyinput>
    </uni-forms-item>
    <uni-forms-item label="我方参与人" name="myUserList" class="f-c-right">
      <uni-easyinput v-model="formData.myUserList" placeholder="请选择我方参与人" name="input"
                     :disabled="isDisabled"
                     @focus="chooseMyUser"></uni-easyinput>
    </uni-forms-item>

    <uni-forms-item label="住宿天数" name="stayDays">
      <picker
          @change="handlePickerChange"
          :value="stayDaysIndex"
          :range="stayDaysOptions"
          :disabled="isDisabled"
      >
        <view class="picker-container">
          <view class="picker-display">
            {{ stayDaysOptions[stayDaysIndex] }}
          </view>
          <uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
        </view>
      </picker>
    </uni-forms-item>

    <uni-forms-item label="活动文字" name="activeTxt" class="uni-forms-item is-direction-top is-top">
      <uni-easyinput type="textarea" autoHeight v-model="formData.activeTxt" placeholder="请输入" 活动文字
                     class="form-texarea"/>
    </uni-forms-item>
  </uni-forms>
  <view class="footer-con">
    <button class="btn-default" type="default" @click="handleDeleteVisistDetailItem" size="mini">删 除</button>
    <button class="btn-primary" type="primary" @click="submitForm" size="mini">保存/修改</button>
  </view>
</template>

<script setup name="lyVisitComponent">
import {ref, reactive} from 'vue'
import cache from '../../../../../utils/cache'
import {onShow, onUnload} from '@dcloudio/uni-app';
import {addVisistDetail, deleVisistDetailItem, getVisistDetailItem} from '../../../../../api/crm/activity/activity';

let customerUserList = ref([])
let myUserList = ref([])
let activeTxt = ref('')
let isDisabled = ref(false)
const props = defineProps({
  cusName: String, //客户单位名称
  cusId: Number,//客户ID
  visistId: Number,//活动ID
  status: String //状态
})


// 表单数据
const formData = ref({
  customerUserList,
  myUserList,
  activeTxt
});

// 表单ref
const formRef = ref(null);

//删除明细项的内容
let lyDeleteForm = reactive({})

function handleDeleteVisistDetailItem() {
  lyDeleteForm.treeName = '联谊活动'
  lyDeleteForm.visistId = props.visistId
  deleVisistDetailItem(lyDeleteForm).then(res => {
    if (res.code == 200) {
      uni.showToast({
        title: '删除成功',
        duration: 2000
      });
      //响应成功，删除缓存记录
      handleDelete()
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
      });
    }
  })
}

// 删除内容
let handleDelete = () => {
  formData.value.customerUserList = null
  formData.value.myUserList = null
  formData.value.activeTxt = null
  stayDaysIndex.value = 0
  if (cache.get('checkedLYClientList') != null) {
    cache.remove('checkedYWClientList');
  }
  if (cache.get('checkedLYMyUserList') != null) {
    cache.remove('checkedLYMyUserList');
  }
}

//删除缓存
let handleDeleteLocal = () => {
  cache.remove('checkedLYClientList');
  cache.remove('checkedLYMyUserList');
}

let lyForm = reactive({})
// 保存/修改
const submitForm = async () => {
  try {
    // 验证表单
    await formRef.value.validate();
    // 验证通过后的操作
    uni.showToast({
      title: '验证通过',
      icon: 'success'
    });
    lyForm.treeName = '联谊活动'
    lyForm.cusId = props.cusId
    lyForm.visistId = props.visistId

    if (Array.isArray(myUserList.value)) {
      lyForm.ourPersonnel = myUserList.value.join(',')
    } else {
      lyForm.ourPersonnel = myUserList.value
    }

    if (Array.isArray(customerUserList.value)) {
      lyForm.cusPersonnel = customerUserList.value.join(',')
    } else {
      lyForm.cusPersonnel = customerUserList.value
    }

    lyForm.bandResult = activeTxt.value
    lyForm.multiple = stayDaysIndex.value + 1
    // 提交服务器进行新增
    addVisistDetail(lyForm).then(res => {
      if (res.code == 200) {
        uni.showToast({
          title: '提交成功',
          duration: 2000
        });
        //响应成功，删除缓存记录
        handleDeleteLocal()
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
      }
    })
  } catch (err) {
    console.log('表单验证失败:', err);
  }
};

//页面渲染完成后，查询catch的get
onShow(() => {

  if (cache.get('checkedLYClientList') != null && cache.get('checkedLYClientList') != []) {
    customerUserList.value = cache.get('checkedLYClientList')
  }

  if (cache.get('checkedLYMyUserList') != null && cache.get('checkedLYMyUserList') != []) {
    myUserList.value = cache.get('checkedLYMyUserList')
  }

  if (props.status == '完成') {
    isDisabled.value = true
  } else {
    isDisabled.value = false
  }
})

//查询日常走访的内容
let queryLYForm = reactive({})
let getLYVisitReportDetailContent = () => {
  queryLYForm.visistId = props.visistId
  queryLYForm.cusId = props.cusId
  queryLYForm.treeName = '联谊活动'
  getVisistDetailItem(queryLYForm).then(res => {
    if (res.rows[0] != null) {
      customerUserList.value = res.rows[0].customerPersonnel
      myUserList.value = res.rows[0].ourPersonnel
      stayDaysIndex.value = res.rows[0].multiple - 1
      activeTxt.value = res.rows[0].bandResult
    }
  })
}


//页面卸载之后，删除缓存信息
onUnload(() => {
  handleDeleteLocal()
})


//选择客户人员
function chooseClientUser() {
  uni.navigateTo({
    url: '/pages/business/CRM/marketActivity/customerUserList?cusName=' + props.cusName + '&chooseType=联谊活动'
  })
}

//选择我方参与人
function chooseMyUser() {
  uni.navigateTo({
    url: '/pages/business/CRM/marketActivity/myUserList?chooseType=联谊活动'
  })
}

// 住宿天数
const stayDaysOptions = ref(['1天', '2天', '3天', '4天', '5天', '6天', '7天'])
const stayDaysIndex = ref(0) // 默认未选择

const handlePickerChange = (e) => {
  stayDaysIndex.value = e.detail.value
  console.log("天数数字：", stayDaysIndex.value + 1)
}

// 明确暴露给父组件的方法
defineExpose({
  handleDelete,
  getLYVisitReportDetailContent
})

</script>


<style scoped lang="scss">
.all-body {
  /* #ifdef APP-PLUS */
  top: 150rpx;
  height: calc(100vh - 75px);
  /* #endif */
  /* #ifndef APP-PLUS */
  top: 120rpx;
  height: calc(100vh);
  /* #endif */
}

.search {
  display: flex;
}

.search .btn-search {
  border: none;
  background: none;
  line-height: normal;
  color: #fff;
  line-height: 56rpx !important;
  padding: 10rpx 0 0;
  text-align: left;
  cursor: pointer;
}

.search .btn-search::after {
  display: none;
}

.search .custom-search {
  width: 80%;

}

.search .custom-search.uni-searchbar {
  padding-right: 0 !important;
}

.scroll-h {
  /* #ifdef APP-PLUS */
  height: calc(100vh - 120px);
  /* #endif */
  /* #ifndef APP-PLUS */
  height: calc(100vh - 110px);
  /* #endif */
}

.white-bg {
  padding-bottom: 10rpx;
}

.picker-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
}

.picker-display {
  color: #333;
  font-size: 14px;
}

.picker-display:empty::before {
  content: '请选择住宿天数';
  color: #999;
}
</style>