crm_front_v3/src/views/custom_manage/custom/applyTurn.vue

<script setup>
import { computed, onMounted, ref, watch,nextTick } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'
import { useRoute,useRouter } from 'vue-router'
import { customInterence } from '@/api/api.js'
import $ from 'jquery'
import imgPreview from '@/components/imgPreview.vue'
// import pdf from 'vue-pdf'
import {CalculationDate} from '@/utils/CalculationDate'
import raiPermissionbox from './components/raiPermissionbox.vue'

const $route = useRoute();
const $router = useRouter();

const	formRule = {
  amount:[
    { required: true, message: '合同金额不能为空', trigger: 'blur' },
    { type: 'number', message: '合同金额必须为数字'}
  ],
  payway:[
    { required: true, message: '付款方式不能为空', trigger: 'blur' },
  ],
  payfrom:[
    { required: true, message: '付款渠道不能为空', trigger: 'blur' },
  ],
  imglist:[
    { required: true, message: '合同附件不能为空', trigger: 'blur' },
  ]
}

const isXClassCustom = computed(() =>{
  return companyInfo.value.Status.includes('永续') || companyInfo.value.Status.includes('X类试用')
})
const isRoleType = computed(() => {
  return localStorage.getItem('RoleType') || ''
})


const companyInfo = ref(JSON.parse(sessionStorage.getItem('companyInfo')) || {})//客户基本信息
const selectedQuarters = ref([])
const hasNoChild = ref(false) // 医药、消费、科技、智造是否没有主客观
const authList = ref([])
const formData = ref({
  contract_type:'',
  term:'',
  amount:'',
  payway:'',
  payfrom:'',
  imglist:[],//合同列表图片
  setmeal:'',
  qyBigServeCheck:0,
})
/* 重新申请获取上次申请的合同信息并回显 */
function getLastContract() {
  customInterence.reapplyDetail({
    CompanyApprovalId:parseInt(companyInfo.value.CompanyApprovalId)
  }).then(res => {
    if(res.Ret === 200) {
      /* 处理日期 */
      let date_arr = [];
      date_arr.push(res.Data.Item.StartDate);
      date_arr.push(res.Data.Item.EndDate);
      formData.value = {
        contract_type:res.Data.Item.ContractType,
        term:date_arr,
        amount:res.Data.Item.Money,
        payway:res.Data.Item.PayMethod,
        payfrom:res.Data.Item.PayChannel,
        imglist:res.Data.Item.ImgUrl.split('#'),//合同列表图片
        setmeal:res.Data.Item.PackageType,
        qyBigServeCheck:res.Data.Item.RaiPackageType
      }
      selectedQuarters.value = res.Data.Item.Quarter.split(',')
      let newArr = [];

      /* 处理权限列表 */
      if((companyInfo.value.CompanyType == '权益' || isRoleType.value== '权益') && !isXClassCustom.value ) {
        res.Data.Item.PermissionList[0].Items.map(item => {
          item.disabled=item.isIndeterminate=false								
          if(item.ChartPermissionId==22 && (!item.Child)) hasNoChild.value=true
        })
        /* 处理数据把复选框 拆分成三个*/
        res.Data.Item.PermissionList.length&&res.Data.Item.PermissionList.forEach(item => {
        let arr = item.Items.filter(key=> [22,21,20,19,23,30].includes(key.ChartPermissionId))
        let ItemsPrivate = item.Items.filter(key=> [29,31,20031,20032,52,53,54,138,62].includes(key.ChartPermissionId))
        let ItemsUp = item.Items.filter(key=> key.PermissionName.includes('升级'))
        let ItemsBig = item.Items.filter(key=> key.ChartPermissionId==0)
          let obj = {
            ...item,
            Items:arr,
            ItemsPrivate,
            ItemsUp,
            ItemsBig
          }
          newArr.push(obj)
        })
      } else {
        res.Data.Item.PermissionList.forEach(item => {
          item.CheckList=item.CheckList||[]
          item.Items=item.Items||[]
          let obj = {
            checkAll:item.CheckList&&item.CheckList.length===item.Items.length?true:false,
            isIndeterminate:item.CheckList&&item.CheckList.length>0 && item.CheckList.length<item.Items.length,
            ...item,
          }
          newArr.push(obj)
        })
      }
      authList.value = newArr;
      formData.value.setmeal == '1' && setmealChange()
    }
  })
}
//套餐的选择
function setmealChange(){
  if(formData.value.setmeal == '1'){
    authList.value.forEach(item => {
      if(item.ClassifyName != '市场策略') {
        item.Items.forEach(key => {
          item.CheckList.push(key.ChartPermissionId)
          key.Checked = true
          key.disabled = true
        })
        item.isIndeterminate = false
        item.checkAll = true
        item.disabled = true	
      }
    })
  } else {
      authList.value.forEach(item => {
      if(item.Items.some(_e=>_e.IsPublic==1)){
        item.CheckList = []
        item.Items.forEach(_e=>{
          if(_e.IsPublic==1){
            item.CheckList.push(_e.ChartPermissionId)
          }
          _e.disabled=false
        })
        item.isIndeterminate = true
        }else {
          item.Items.forEach(key => {		
          key.Checked = false
          key.disabled = false
        })
        item.CheckList = []
        item.isIndeterminate = false
        item.checkAll = false
        item.disabled = false	
        }
        
    })
    ElMessage.warning('请勾选品种')
  }
}

/* 获取基本权限信息 */
function getAuthBasic() {
  customInterence.authList({
    IsShowYanXuanKouDian:true,
    CompanyStatus:companyInfo.value.Status 
  }).then(res => {
    let newArr = [];
    if(res.Ret === 200) {
      if((companyInfo.value.CompanyType == '权益' || isRoleType.value== '权益') && !isXClassCustom.value) {
        res.Data.List[0].Items.map(item => {
          item.disabled=item.isIndeterminate=false								
          if(item.ChartPermissionId==22 && (!item.Child)) hasNoChild.value=true
        })
        /* 处理数据把复选框 拆分成三个*/
        res.Data.List.length&&res.Data.List.forEach(item => {
        let arr = item.Items.filter(key=> [22,21,20,19,23,30].includes(key.ChartPermissionId))
        let ItemsPrivate = item.Items.filter(key=> [29,31,20031,20032,52,53,54,138,62].includes(key.ChartPermissionId))
        let ItemsUp = item.Items.filter(key=> key.PermissionName.includes('升级'))
        let ItemsBig = item.Items.filter(key=> key.ChartPermissionId==0)
          let obj = {
            ...item,
            Items:arr,
            ItemsPrivate,
            ItemsUp,
            ItemsBig
          }
          newArr.push(obj)
        })
      }else {
        res.Data.List.length&&res.Data.List.forEach(item => {
          item.CheckList=item.CheckList||[]
          item.Items=item.Items||[]
            let obj = {
              checkAll:item.CheckList&&item.CheckList.length===item.Items.length?true:false,
              isIndeterminate:item.CheckList&&item.CheckList.length>0 && item.CheckList.length<item.Items.length,
              ...item,
            }
            newArr.push(obj)
        })
      }
      authList.value = newArr;
    }
  })
}

//获取客户申请转正的合同类型接口
function getConstractType(){
  customInterence.applyTurnContractType({CompanyId:Number(companyInfo.value.CompanyId)}).then(res=>{
    if(res.Ret===200){
      formData.value.contract_type=res.Data.ContractType
    }
  })
}


onMounted(() => {
  if($route.query.isReapply) {
			getLastContract();
		}else {
			getAuthBasic();	

			//修改为直接获取接口中数据
			getConstractType()
		}
})


const formDataRef = ref(null)
const raiPermissionboxRef = ref(null)
/* 提交 */
function saveHandle() {
  formDataRef.value.validate((valid) => {
    if (valid) {
      /* 处理权限列表 */
      let checkArr = [];
      let checkArrName = [];
      let hasMinusSignVal = 0
      if((companyInfo.value.CompanyType==='权益' || isRoleType.value== '权益') && !isXClassCustom.value){
        hasMinusSignVal = raiPermissionboxRef.value[0].minus_sign_val;		
        authList.value.forEach(item => {
            if(item.CheckList.length) {
              checkArr.push(item.CheckList)
              item.ItemsUp.forEach(key=>{
                if(item.CheckList.includes(key.ChartPermissionId)) {
                  checkArrName.push(key.PermissionName)
                }
              })
            }
          })
        }else {
          authList.value.forEach(item => {
            if(item.CheckList.length) {
              checkArr.push(item.CheckList)
            }
          })
      }
      const hasFiftyTwo = checkArr.flat(2).includes(52);
      if(hasFiftyTwo && !hasMinusSignVal) return ElMessage.error('请输入研选扣点数')

      if(!checkArr.length && companyInfo.value.CompanyType === '权益') {
        ElMessage.warning('请选择权限！');
        return
      }else {
        
        let PermissionIds = [... new Set(checkArr.flat(2))].join(',');
        let params = {
          CompanyId:Number(companyInfo.value.CompanyId),
          CompanyApprovalId:companyInfo.value.CompanyApprovalId?parseInt(companyInfo.value.CompanyApprovalId):0,
          ContractType:formData.value.contract_type,
          StartDate:formData.value.term[0],
          EndDate:formData.value.term[1],
          ImgUrl:formData.value.imglist.join('#'),
          Money:Number(formData.value.amount),
          PayChannel:formData.value.payfrom,
          PayMethod:formData.value.payway,
          PermissionIds,
          PackageType:formData.value.setmeal ? formData.value.setmeal : 0,
          PermissionNames:checkArrName.length? checkArrName.join(','):'',
          RaiPackageType:formData.value.qyBigServeCheck||0,
          Points:hasMinusSignVal||0
        }

        customInterence.applyTurn(params).then(res => {
          if(res.Ret === 200) {
            ElMessage.success(res.Msg);

            $router.push({path:`/${$route.meta.pathFrom}`})
          }
        })
      }
    }
  })
}
/* 取消 */
function cancelHandle() {

  $router.push({path:`/${$route.meta.pathFrom}`})
}



/* 选择全选或取消全选 */
function handleCheckAll(item) {
  // 取到所有的子菜单id
  let ids = item.Items.map(item =>{
    return item.ChartPermissionId
  })
  item.CheckList = item.checkAll ? ids : [];
      item.isIndeterminate = false;
}
/* 复选框組选中时 */
function handleChecked(item) {
  let len = item.CheckList.length;
  item.checkAll = len === item.Items.length;
  item.isIndeterminate = len > 0 && len < item.Items.length;	
}


function dateChange(e){
  if(!formData.value) return
  if(parseInt((new Date() - new Date(formData.value.term[1]))/(1000*3600*24)) > 0) {
    ElMessage.error('结束日期不能小于今天！')
    formData.value.term = []
    return
  }
  if(e){
    
    ElMessageBox.alert(`你选择的合同期限是 ${CalculationDate(formData.value.term[0],formData.value.term[1])}`, '', {
      confirmButtonText: '确定'
    });
  }
}


function setSelectVarietyDisabled(item){
  return item.Items.some(_e=>_e.IsPublic==1)||item.disabled
}



const img_replace = ref('')//重新上传的img
const	isPreviewimg = ref(false)
const	preAct = ref(0)
const	isShowToggle = ref(false)//是否显示切换
const uploadloading = ref(false)
/* 预览 */
function preview(id,index,img) {
  if(img.indexOf('.pdf') == -1) {
    preAct.value = index;
    /* 是否显示左右切换 */
    let bol = formData.value.imglist.some(item => {
      return item.indexOf('.pdf') != -1
    })
    // 有pdf或图片只有一张
    if(bol || formData.value.imglist.length<=1) {
      isShowToggle.value = false
    }else {
      isShowToggle.value = true
    }
    isPreviewimg.value = true;
  }else {
    window.open(img)
  }
}
function clickinput(index){  //上传模拟点击
  img_replace.value = '';
  if(index) {
    img_replace.value = index;
  }
  $("#file").click();
}
function fileSelected(){  //选择文件上传
  if( document.getElementById('file').files[0] ){
    let hostfile = document.getElementById('file').files[0];
  
    let size = Math.floor(hostfile.size / 1024 / 1024);
    if( size>200 ){
        ElMessage.error('上传文件大小不能大于200M！');
        hostfile = {};
        return false
    }

    if( hostfile.name.toLowerCase().includes('.png') || hostfile.name.toLowerCase().includes('.jpg') || hostfile.name.toLowerCase().includes('.jpeg') || hostfile.name.toLowerCase().includes('.pdf') ){
        let form = new FormData();
        form.append('file',hostfile);  //hostfile.name
        uploadloading.value=true;
        customInterence.upload(form).then((res) => {
          if( res.Ret === 200 ){
                  /* 是替换还是新增 */
                  if(img_replace.value) {
                    formData.value.imglist.splice(img_replace.value-1,1,res.Data.ResourceUrl)
                  }else {
                    if(formData.value.imglist.length >= 4) {
                      ElMessage.warning('最多上传4张')
                    }else {
                      formData.value.imglist.push(res.Data.ResourceUrl)
                    }
                  }
          }
          uploadloading.value=false;
          $("#file").val('');
          hostfile = {};
        });
    }else{
      ElMessage.error('上传文件格式不正确！');
    }
  } 
}
function closePreview() {
  isPreviewimg.value = false;
}
function togglePre(type) {
  if(type==1) {
    preAct.value--;
    if(preAct.value < 0) {
      preAct.value = formData.value.imglist.length-1;
    }
  }else {
    preAct.value++;
    if(preAct.value > formData.value.imglist.length-1) {
      preAct.value = 0;
    }
  }
}


const selectedDateRange = computed(()=> {
  if (selectedQuarters.value.length) {
    const sortedQuarters = [...selectedQuarters.value].sort();
    const startDate = quarterToDateRange(sortedQuarters[0]).split(" ~ ")[0];
    const endDate = quarterToDateRange(sortedQuarters[selectedQuarters.value.length - 1]).split(" ~ ")[1];
    return `${startDate} ~ ${endDate}`;
  }
  return "";
})
function quarterToDateRange(quarterLabel) {
  const [year, q] = quarterLabel.split("Q");

  switch (parseInt(q)) {
    case 1:
      return `${year}-01-01 ~ ${year}-03-31`;
    case 2:
      return `${year}-04-01 ~ ${year}-06-30`;
    case 3:
      return `${year}-07-01 ~ ${year}-09-30`;
    case 4:
      return `${year}-10-01 ~ ${year}-12-31`;
  }
}

const quarters = ref(generateQuarters())
function generateQuarters() {
  const currentDate = new Date();
  const currentYear = currentDate.getFullYear();
  let currentQuarter = Math.floor(currentDate.getMonth() / 3) + 1;

  let quarters = [];

  for (let i = 3; i >= 0; i--) {
    // 包括当前季度和前三个季度
    let year = currentYear;
    let quarter = currentQuarter - i;

    while (quarter <= 0) {
      year--; // 上一年
      quarter += 4; // 季度数增加
    }

    quarters.push({
      label: `${year}Q${quarter}`,
      value: `${year}Q${quarter}`,
    });
  }

  return quarters;
}


function checkboxInputHandler(){
  formData.value.term = selectedQuarters.value ? [selectedDateRange.value.split(" ~ ")[0],selectedDateRange.value.split(" ~ ")[1]]:[]
}

function isDisabled(quarter) {
  if (selectedQuarters.value.length === 0) return false;
  const sortedSelected = [...selectedQuarters.value].sort();
  const firstIndex = quarters.value.findIndex((q) => q.value === sortedSelected[0]);
  const lastIndex = quarters.value.findIndex((q) => q.value === sortedSelected[sortedSelected.length - 1]);

  const currentIndex = quarters.value.findIndex((q) => q.value === quarter.value);

  return currentIndex < firstIndex - 1 || currentIndex > lastIndex + 1;
}


const showAlert = ref(true)
watch(() => selectedQuarters.value,
  (newValue) => {

      if (!newValue.length) return;
      if (!isConsecutiveSelection() && showAlert.value && isXClassCustom.value) {
        showAlert.value = false;
        selectedQuarters.value.pop();
        ElMessage.error("只能选择相邻的季度");
        nextTick(() => {
          selectedQuarters.value.pop();
          showAlert.value = true;
        });
      }
  }
)
function isConsecutiveSelection() {
  const sortedSelectedIndexes = selectedQuarters.value.map((sq) => quarters.value.findIndex((aq) => aq.value === sq)).sort((a, b) => a - b);
  for (let i = 0; i < sortedSelectedIndexes.length - 1; i++) {
    if (sortedSelectedIndexes[i + 1] - sortedSelectedIndexes[i] !== 1) {
      return false;
    }
  }

  return true;
}

</script>
<template>
  <div class="applyTurn_container">
		<div class="card_cont">
			<div class="info">
				<h3 class="tit">客户信息</h3>
				<ul class="info_list">
					<li>
						客户名称：{{companyInfo.CompanyName}}
					</li>
					<li>
						社会信用码：{{companyInfo.CreditCode}}
					</li>
					<li>
						地址：{{companyInfo.Address}}
					</li>
					<li>
						客户类型：{{companyInfo.CompanyType}}
					</li>
					<li>
						客户状态：{{companyInfo.Status}}
					</li>
					<li>
						客户来源：{{companyInfo.Source}}
					</li>
					<li>
						行业：{{companyInfo.IndustryName}}
					</li>
					<li>
						所属销售：{{companyInfo.SellerName}}
					</li>
					<li>
						备注：{{companyInfo.Reasons}}
					</li>
				</ul>
			</div>
		</div>
		<!-- 合同列表 -->
		<div class="card_cont">
			<div class="apply_info">
				<h3 style="fontSize:16px;">申请信息</h3>
				<div class="info_cont">
					<span style="display:block;marginBottom:30px;color:#333;paddingLeft:10px;">申请内容：试用转正式</span>
					<el-form 
            @submit.prevent 
            inline 
            :model="formData"
            :rules="formRule"
            hide-required-asterisk
            ref="formDatRef" 
            label-width="100px"
            class="demo-ruleForm"
          >
						<el-form-item label="合同类型" prop="contract_type" style="width:100%" v-if="formData.contract_type">
							<el-radio style="margin-right:5px" v-model="formData.contract_type" :label="formData.contract_type"/>
							<el-tooltip
								style="cursor: pointer;"
								effect="dark"
								placement="top-start"
								v-if="formData.contract_type=='续约合同'||formData.contract_type=='新签合同'">
                <template #content>
									<div v-if="formData.contract_type=='续约合同'">
										1、有正式转试用记录的客户，在申请转正时提交的合同<br>
										2、所有客户在续约申请时提交的合同
									</div>
									<div v-if="formData.contract_type=='新签合同'">
										没有正式转试用记录的客户，在申请转正时提交的合同
									</div>
                </template>
									<i class="el-icon-info"></i>
							</el-tooltip>
						</el-form-item>
						<el-form-item label="合同期限" prop="term" style="marginRight:60px;" :rules="{ required: true, message: '合同期限不能为空', trigger: 'blur' }" v-if="!isXClassCustom">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							<el-date-picker
							v-model="formData.term"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							@change="dateChange"
							value-format="YYYY-MM-DD"
							style="width:400px;">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="合同期限" prop="term" :rules="{ required: true, message: '合同期限不能为空', trigger: 'change' }" style="marginRight:60px;" v-if="isXClassCustom">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							<div class="quarters-content">
								<el-checkbox-group v-model="selectedQuarters" @input="checkboxInputHandler">
									<el-checkbox v-for="quarter in quarters" :key="quarter.value" :label="quarter.label" :disabled="isDisabled(quarter)" >
										{{ quarter.label }}
									</el-checkbox>
								</el-checkbox-group>
								<div v-if="selectedQuarters.length > 0" class="quarters-text">
										{{ selectedDateRange }}
								</div>
							</div>
						</el-form-item>
						<el-form-item label="合同金额" prop="amount" style="marginRight:60px;">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							<el-input 
							v-model.number="formData.amount"
							placeholder="请输入金额"
							style="width:400px"
							clearable></el-input>
							<span style="color:#666;">元</span>
						</el-form-item>
						<el-form-item label="付款方式" prop="payway" style="marginRight:60px;">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							<el-select v-model="formData.payway" placeholder="请选择付款方式" style="width:400px;" clearable>
								<el-option
								v-for="item in ['月付','季付','半年付','年付','两年付','三年付']"
								:key="item"
								:label="item"
								:value="item">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="付款渠道" prop="payfrom">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							<el-input 
							v-model="formData.payfrom"
							placeholder="填写代支付的渠道名称，没有可以填无"
							style="width:400px"
							clearable></el-input>
						</el-form-item>
						<el-form-item label="套餐类型" prop="setmeal" style="display:block;"  :rules="{ required: true, message: '请选择套餐',trigger: 'change' }" v-if="companyInfo.CompanyType=='ficc' || isRoleType== 'ficc'">
							<i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
							 <el-radio-group v-model="formData.setmeal" @change="setmealChange">
								<el-radio :label="1">大套餐</el-radio>
								<el-radio :label="2">小套餐</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item class="textarea_item" style="width:97%;paddingLeft:26px;" prop="CheckList">
							<label style="display:block;marginBottom:10px;fontSize:16px;position:relative;color:#666;">
								<i style="color:#f00;fontSize:20px;position:absolute;left:-15px;top:10%;">*</i>
								权限设置
							</label>
							<template  v-if="(companyInfo.CompanyType=='权益' || isRoleType== '权益') && !isXClassCustom" >
								<raiPermissionbox ref="raiPermissionboxRef" v-for="item in authList" :key="item.ClassifyName" :data="item" :formData="formData"
								:hasNoChild="hasNoChild"></raiPermissionbox>
							</template>
							<ul class="menu_lists" style="width:100%" v-else>
								<li v-for="item in authList" :key="item.ClassifyName" class="menu_item">
									<el-checkbox  :indeterminate="item.isIndeterminate" v-model="item.checkAll" :disabled="setSelectVarietyDisabled(item)" @change="handleCheckAll(item)" style="marginRight:30px;fontWeight:bold;minWidth:90px;">{{item.ClassifyName+':'}}</el-checkbox>
									<el-checkbox-group v-model="item.CheckList" @change="handleChecked(item)">
										<el-checkbox v-for="list in item.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item" :disabled="list.IsPublic==1  || list.disabled">{{list.PermissionName}}</el-checkbox>
									</el-checkbox-group>
								</li>
							</ul>
						</el-form-item>
						<el-form-item prop="imglist" style="width:97%;paddingLeft:26px;" class="textarea_item">
							<label style="display:block;marginBottom:10px;fontSize:16px;position:relative;color:#666;">
								<i style="color:#f00;fontSize:20px;position:absolute;left:-15px;top:10%;">*</i>
								上传合同附件<span style="fontSize:12px;color:#f00;">（建议上传盖章后的合同，支持png、jpg、pdf格式）</span>
								<input type="file" name="file" @change="fileSelected()" id="file" class="true-file" style="display:none;">	
								<el-button type="primary" size="default" @click="clickinput('')" style="marginLeft:20px;" :loading="uploadloading">点击上传</el-button>
							</label>
							<ul class="img_cont">
								<li v-for="(img,index) in formData.imglist" :key="img" class="img_item">
									<!-- <el-image :src="img" alt="" style="background:#aaa;width:240px;height:180px;" :preview-src-list="formData.imglist" :id="'img'+index"/> -->
									<pdf ref="pdf" :src="img" style="width:240px;height:180px;overflow:hidden" v-if="img.indexOf('.pdf')!=-1" @click="preview('img'+index,index,img)"></pdf>
									<el-image :src="img" alt="" style="background:#aaa;width:240px;height:180px;" :id="'img'+index" v-else @click="preview('img'+index,index,img)"/>
									<i class="el-icon-zoom-in" style="position:absolute;right:12px;top:12px;color:#fff;" @click="preview('img'+index,index,img)"></i>
									<span style="position:absolute;right:12px;bottom:12px;color:#409EFF;fontSize:16px;cursor:pointer;" @click.stop="clickinput(index+1)">重新上传</span>
								</li>
							</ul>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="bot_cont">
        
				<div style="display:flex;justify-content:center;margin:80px 0 30px;">
					<el-button type="primary" style="width:80px;marginRight:24px;" @click="saveHandle">提交</el-button>
					<el-button type="primary" plain style="width:80px;" @click="cancelHandle">取消</el-button>
				</div>
			</div>
			<!-- 图片预览 -->
			<imgPreview
        :isShowToggle="isShowToggle"
        :isPreview="isPreviewimg" 
        :arr="formData.imglist" 
        :actIndex="preAct"
        @close="closePreview"
        @togglePre="togglePre"
      ></imgPreview>
		</div>

	</div>
</template>
<style scoped lang="scss">
.applyTurn_container {
	/* min-width: 1570px; */
	*{box-sizing: border-box;}
	/* reset */
	:deep(.el-form-item .el-checkbox-group) {
		height: 40px;
	}
	:deep(.textarea_item .el-form-item__content) {
		width: 100%;
	}
	/*  */
	.card_cont {
		margin-bottom: 20px;
		border: 1px solid #ECECEC;
		padding: 30px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
		.info {
			margin-top: 10px;
			font-size: 16px;
			color: #666;
			.tit {
				color: #333;
				font-size: 16px;
				margin-bottom: 30px;
			}
			.info_list {
				display: flex;
				flex-wrap: wrap;
				padding-left: 50px;
				padding-bottom: 20px;
				li {
					margin-right: 113px;
					margin-bottom: 20px;
					min-width: 250px;
				}
			}
		}
		.apply_info {
			font-size: 16px;
			.info_cont {
				padding-left: 30px;
				margin-top: 30px;
			}
		}
		.menu_lists {
			padding: 40px 18px;
			border: 1px dashed #AAB4CC;
			border-radius: 4px;
			.menu_item {
				display: flex;
				// align-items: center;
				margin-bottom: 40px;
				&:last-child {
					margin-bottom: 0;
				}
				.list_item {
					margin-right: 30px;
					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
		.img_cont {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.img_item {
				position: relative;
				margin-right: 23px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
	.quarters-content {
		position: relative;
		.quarters-text {
			position: absolute;
			left: 0;
			top: 20px;
			color: #f00;
		}
	}
}
</style>