bocai_supplyChain_pc/src/components/FirstJob/recordBill.vue

<template>
	<div class="recordBill-container w">
		<!-- 面包屑 -->
		<a-breadcrumb class="w">
			<a-breadcrumb-item href="">
				<router-link to="/main"><a-icon type="home" /></router-link>
			</a-breadcrumb-item>
			<a-breadcrumb-item href="">
				<router-link to="/list" @click.native="toList">
					<span>一手职位</span>
				</router-link>
			</a-breadcrumb-item>
			<a-breadcrumb-item>
				<router-link :to="'/detail/' + firminfo.id">
					<!-- <span @click="$router.back(-1)">企业详情</span> -->
					<span>企业详情</span>
				</router-link>
			</a-breadcrumb-item>
			<a-breadcrumb-item href="">
				<span>报名</span>
			</a-breadcrumb-item>
		</a-breadcrumb>
		<div class="content">
			<a-form-model ref="ruleForm" :model="form" :colon="true" :rules="rules">
				<a-form-model-item ref="proxy" label="代理" prop="" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }" style="height: 30px; margin-bottom: 18px">
					<!-- <a-input
            :value="
              proxyinfo.userName !== '' &&
              proxyinfo.userName !== null &&
              proxyinfo.userName !== undefined
                ? proxyinfo.userName
                : proxyinfo.tel
            "
            :disabled="true"
          /> -->
					<div class="pzbox" style="width: 100%">
						<span v-if="proxyStatus === ''"> {{ proxyinfo.userName !== "" && proxyinfo.userName !== null && proxyinfo.userName !== undefined ? proxyinfo.userName : proxyinfo.tel }}</span>
						<a-select v-if="proxyStatus === 'proxy'" mode="combobox" auto-focus style="width: calc(100% - 200px)" placeholder="请选择代理" @blur="proxyStatus = ''">
							<a-select-option v-for="i in proxyList" :key="i.userName" @click="proxyChange(i)">
								{{ i.userName }}
							</a-select-option>
						</a-select>
						<span
							@click="proxyStatus = 'proxy'"
							:style="{
								color: '#ff6a00',
								marginLeft: '10px',
								cursor: 'pointer',
							}"
							v-if="isMaster && proxyStatus !== 'proxy'"
							>修改</span
						>
					</div>
				</a-form-model-item>
				<a-form-model-item ref="username" label="报名企业" prop="username" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }" style="height: 30px; margin-bottom: 18px">
					<!-- <a-input :value="firminfo.aliasName" :disabled="true" /> -->
					<div class="pzbox" style="width: 100%">
						<span v-if="storeStatus === ''">{{ firminfo.aliasName }}</span>
						<a-select v-if="storeStatus === 'store'" show-search auto-focus mode="combobox" placeholder="请选择企业" style="width: calc(100% - 200px)" :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null" @search="storeSearch" @blur="storeStatus = ''">
							<a-select-option v-for="i in storeList" :key="i.id + ''" @click="storeChange(i)">
								{{ i.aliasName }}
							</a-select-option>
						</a-select>
						<span
							@click="storeStatus = 'store'"
							:style="{
								color: '#ff6a00',
								marginLeft: '10px',
								cursor: 'pointer',
							}"
							v-if="isMaster && storeStatus !== 'store'"
							>修改</span
						>
					</div>
				</a-form-model-item>
				<a-form-model-item ref="username" label="岗位" prop="username" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }" style="height: 30px">
					<!-- <a-input :value="firminfo.jobName" :disabled="true" /> -->
					<div class="pzbox" style="width: 100%">
						<span v-if="jobnameStatus === ''">{{ firminfo.jobName }}</span>
						<a-select v-if="jobnameStatus === 'jobname'" show-search auto-focus placeholder="请选择岗位" option-filter-prop="children" style="width: 200px" @blur="jobnameStatus = ''">
							<a-select-option v-for="i in storeJobList" :key="i.id" @click="storeJobChange(i)">
								{{ i.aliasName }}
							</a-select-option>
						</a-select>
						<span
							@click="selected"
							:style="{
								color: '#ff6a00',
								marginLeft: '10px',
								cursor: 'pointer',
							}"
							v-if="isMaster && jobnameStatus !== 'jobname'"
							>修改</span
						>
					</div>
				</a-form-model-item>

				<a-form-model-item ref="interviewTime" label="面试时间" prop="interviewTime" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }">
					<timepicker :isShow.sync="isShow" :datetime.sync="form.interviewTime"></timepicker>
					<a-input v-model="form.interviewTime" placeholder="请选择面试时间" @input="verify" @click="getDateinfo"><i class="iconfont icon-rili" slot="suffix" @click="getDateinfo"></i></a-input>
					<!-- <a-date-picker
            :showToday="false"
            format="YYYY-MM-DD HH:mm"
            :disabledDate="interviewTimeDisabledDate"
            :disabledTime="interviewTimeDisabledDateTime"
            :showTime="{
              hideDisabledOptions: true,
              defaultValue: moment('12:00', 'HH:mm'),
              format: 'HH:mm',
            }"
            v-decorator="[
              'interviewTime',
              { rules: [{ required: true, message: '请选择面试时间' }] },
            ]"
            placeholder="请选择面试时间"
            style="width: 100%"
            @click="isShow = true"
          /> -->
				</a-form-model-item>
				<a-row>
					<a-col :span="20">
						<a-form-model-item ref="idCard" label="身份证号" prop="idCard" :wrapperCol="{ span: 16 }" :labelCol="{ span: 5 }">
							<a-input v-model="form.idCard" @change="getIdInfo($event)" placeholder="请输入老乡身份证号" :max-length="18" />
						</a-form-model-item>
					</a-col>
					<a-col :span="4" class="idCardUpload"
						><a-upload :customRequest="customRequestFun" list-type="picture-card" :file-list="fileList" @change="handleChange" @preview="handlePreview" style="margin-left: -50px" :beforeUpload="beforeUpload" :data="dataObj">
							<!-- <div
                v-if="fileList.length < 1"
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <a-icon type="upload" />
                <div class="ant-upload-text">上传证件</div>
              </div> -->
							<!-- <img
                v-if="form.idCardImageUrl"
                :src="form.idCardImageUrl"
                alt="avatar"
              /> -->
							<div v-if="fileList.length == 0" style="display: flex; justify-content: center; align-items: center" class="nloding">
								<a-icon type="plus" />
								<div class="ant-upload-text">上传证件</div>
							</div>
						</a-upload>
						<div v-if="loading" style="display: flex; justify-content: center; align-items: center" class="uploading">
							<a-icon :type="loading ? 'loading' : 'plus'" style="margin-right: 10px" />
							<div class="ant-upload-text">上传中</div>
						</div>
						<i class="iconfont icon-guanbi" v-if="fileList.length !== 0 && !loading" @click="fileList = []"></i
					></a-col>
				</a-row>
				<a-row class="specialbox">
					<a-col :span="12">
						<a-form-model-item ref="userName" label="姓名" prop="userName" :wrapperCol="{ span: 15 }" :labelCol="{ span: 8 }">
							<a-input v-model="form.userName" placeholder="请输入老乡姓名" class="special-input" />
						</a-form-model-item>
					</a-col>
					<a-col :span="12">
						<a-form-model-item ref="sex" label="性别" prop="sex" :wrapperCol="{ span: 18 }" :labelCol="{ span: 5 }">
							<a-radio-group v-model="form.sex" defaultValue="nan" class="radiobox">
								<a-radio value="1"> 男 </a-radio>
								<a-radio value="2"> 女 </a-radio>
							</a-radio-group>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="12">
						<!-- :offset="2" -->
						<a-form-model-item ref="age" label="年龄" prop="age" :wrapperCol="{ span: 15 }" :labelCol="{ span: 8 }">
							<a-input v-model="form.age" placeholder="请输入年龄" class="special-input" />
						</a-form-model-item>
					</a-col>
					<a-col :span="12">
						<a-form-model-item ref="peoplecard" label="民族" prop="peoplecard" :wrapperCol="{ span: 15 }" :labelCol="{ span: 5 }">
							<a-select v-model="form.nation" placeholder="请选择民族" class="special-input">
								<a-select-option v-for="item in nationlist" :key="item.id" :value="item.name">{{ item.name }}</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-form-model-item ref="tel" label="电话" prop="tel" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }" style="margin-bottom: 18px">
					<a-input v-model="form.tel" placeholder="请输入电话号" :max-length="11" />
				</a-form-model-item>

				<a-form-model-item ref="peoplecard" label="家庭住址" prop="peoplecard" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }">
					<a-input v-model="form.address" placeholder="请输入家庭住址" />
				</a-form-model-item>

				<!-- <a-form-model-item ref="username" label="模式" prop="username">
          <a-select v-model="form.pattern" placeholder="请选择民族">
            <a-select-option :value="apply.id">{{ apply.id }}</a-select-option>
          </a-select>
        </a-form-model-item> -->
				<a-form-model-item ref="policy" label="政策" prop="policy" class="policyContainer" :wrapperCol="{ span: 18 }" :labelCol="{ span: 4 }">
					<!-- <a-input v-model="form.policy" type='textarea'/> -->
					<div class="policy" style="">
						{{form.policy}}
					</div>
          <div class="openContral"><span v-if="isFold" @click="toFold(1)">展开</span><span v-else @click="toFold(2)">收起</span></div>
				</a-form-model-item>
			</a-form-model>

			<div class="upline">
				<div>
					<a-button
						type="primary"
						@click="onClose"
						:style="{
							color: '#666',
							backgroundColor: '#fafafa',
							borderColor: '#ddd',
							boxShadow: 'none',
							textShadow: 'none',
						}"
					>
						取消
					</a-button>
					<a-button style="margin-left: 10px; color: #fff; background-color: #ff6a00; border-color: #ff6a00" @click="handleOk" :loading="confirmLoading"> 提交 </a-button>
				</div>
			</div>
		</div>
		<a-modal title="预览" :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
			<img alt="example" :src="form.idCardImageUrl" />
		</a-modal>
	</div>
</template>

<script>
import { nationlist } from "../../utils/datalist";
// import recordbill from "@/components/FirstJob/components/recordbill.vue";
import moment from "moment";
import { isEmptyCheck, getAgeFromBirthday } from "../../utils/commonUtil";
import timepicker from "./components/timepicker.vue";
import { recordBillApi, getProxyInfoApi, getStoreAliasApi, getStoreJobApi, getPolicyByJobIdApi } from "@/api/job";
import request from "@/utils/request";
// import axios from "axios";
import $ from "jquery";
// import axiosUpload from "axios";
export default {
	inject: ["reload"],
	// 组件名称
	name: "recordBill",
	// 局部注册的组件
	components: {
		// recordbill,
		timepicker,
	},
	// 组件参数 接收来自父组件的数据
	props: {},
	// 组件状态值
	data() {
		return {
			// facetimedate: "",
			previewVisible: false,
			proxyStatus: "", // 代理选择的控制
			storeStatus: "", // 企业选择的控制
			jobnameStatus: "", // 岗位选择的控制
      isContainerShow:false, // 政策展示控制按钮是否显示
      isFold:false,
			previewImage: "",
			isMaster: true,
			isShow: false,
			nationlist,
			moment,
			loading: false,
			confirmLoading: false,
			fetching: false,
			proxyList: [],
			storeList: [],
			storeJobList: [],
			userinfo: {},
			fileList: [],
			dataObj: {
				policy: "",
				signature: "",
				key: "",
				ossaccessKeyId: "",
				dir: "",
				host: "",
				// callback:'',
			},
			rules: {
				// 录单校验规则
				interviewTime: [
					{
						required: true,
						message: "请选择面试时间",
						trigger: "blur",
					},
				],
				userName: [
					{
						required: true,
						message: "请输入姓名",
						trigger: "blur",
					},
					{
						pattern:
							// /^((?![\u3000-\u303F])[\u2E80-\uFE4F]|·)*(?![\u3000-\u303F])[\u2E80-\uFE4F](·)*$/, // 姓名校验规则
							/^(((?![\u3000-\u303F])[\u2E80-\uFE4F]|·)*(?![\u3000-\u303F])[\u2E80-\uFE4F][^·]{1,12})$/, // 姓名校验规则
						message: "请输入正确的姓名",
						trigger: "blur",
					},
				],
				sex: [
					{
						required: true,
						message: "请选择性别",
						trigger: "change",
					},
				],
				age: [
					{
						required: true,
						message: "请输入年龄",
						trigger: "blur",
					},
					{
						pattern: /^\d{2}$/,
						message: "请输入正确的年龄",
						trigger: "blur",
					},
				],
				idCard: [
					// {
					//   required: true,
					//   message: "请输入年龄",
					//   trigger: "blur",
					// },
					{
						min: 18,
						max: 18,
						message: "请输入正确的身份证号",
						trigger: "blur",
					},
				],
				tel: [
					//   {
					//   required: true,
					//   message: "请输入年龄",
					//   trigger: "blur",
					// },
					{
						pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						message: "请输入正确的手机号",
						trigger: "blur",
					},
				],
				// tel: [{ required: true, message: "请输入手机号", trigger: "submit" }],
			},
			form: {
				// 录单数据
				userName: "",
				idCard: "",
				sex: "", // 性别
				age: "", // 年龄
				agencyId: "", // 代理id
				storeJobId: "", // 职位id
				qiyeId: "", // 企业id
				nation: undefined, // 民族
				address: "", // 家庭住址
				policy: "", // 代理政策
				interviewTime: "", // 面试时间
				idCardImageUrl: "",
			},
			proxyinfo: {},

			firminfo: {},
		};
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {
		facetimedate() {
			console.log(this.facetimedate);
		},
	},
	// 生命周期钩子   注：没用到的钩子请自行删除
	/**
	 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
	 */
	created() {
		if (JSON.stringify(this.$route.params) == "{}") {
			this.firminfo = JSON.parse(sessionStorage.getItem("CURRENT_FIRM"));
		} else {
			this.firminfo = this.$route.params;
		}

		// this.userinfo = JSON.parse(userinfo);
		this.proxyinfo = JSON.parse(sessionStorage.getItem("LOGIN_DATA"));
		if (this.proxyinfo.roleOfPmd) {
			this.isMaster = true;
		}
		this.getProxyInfo(this.proxyinfo.id);
		this.getJob(this.firminfo);
		this.getPolicyByJobId(this.firminfo.id);
		console.log(this.proxyinfo);
		// sessionStorage.setItem("CURRENT_FIRM", JSON.stringify(userinfo));
		console.log(this.firminfo);
	},
	/**
	 * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
	 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
	 */
	mounted() {
    let that = this
		const policy = document.querySelector(".policy");
		// this.$nextTick(()=>{
		setTimeout(() => {
			console.log(policy.offsetHeight);
			if (policy.offsetHeight >= 230) {
				policy.style.maxHeight = "230px";
        	policy.style.marginBottom = '24px'
          that.isContainerShow = true
          that.isFold = true
			} else {
				policy.style.minHeight = "230px";
          that.isContainerShow = false
          that.isFold = false
			}
		}, 200);
		// })
	},
	// 组件方法
	methods: {
		async getJob(value) {
			try {
				const { data } = await getStoreJobApi(value.id);
				console.log(data);
				if (data.status === 200) {
					this.storeJobList = data.data;
				}
			} catch (error) {
				console.log(error);
			}
		},
		async getPolicyByJobId(value) {
			try {
				const { data } = await getPolicyByJobIdApi(value);
				console.log(data);
				if (data.status === 200) {
					this.form.policy = data.data;
				}
			} catch (error) {
				console.log(error);
			}
		},
		onClose() {
			this.form = {
				// 录单数据
				userName: "",
				idCard: "",
				sex: "", // 性别
				age: "", // 年龄
				nation: undefined, // 民族
				address: "", // 家庭住址
				policy: "", // 代理政策
				interviewTime: "", // 面试时间
				idCardImageUrl: "",
			};
			this.$router.push("/detail/" + this.firminfo.id);
		},
		handleOk() {
			this.$refs.ruleForm.validate(async (ispass, no) => {
				console.log(this.form);
				console.log(ispass);
				console.log(no);
				this.confirmLoading = true;

				if (ispass) {
					console.log(this.form);
					const { data } = await recordBillApi({
						...this.form,
						storeJobId: this.firminfo.id,
					});
					console.log(data);
					if (data.status === 200) {
						console.log(data);
						// this.$message.success("提交成功");
						setTimeout(() => {
							this.confirmLoading = false;

							this.$router.push("/recordsuccess");
						}, 1000);
					} else {
						this.$message.error(data.msg);
					}
					// setTimeout(() => {
					//   this.confirmLoading = false;
					//   this.form = {
					//     // 录单数据置空
					//     name: "",
					//     tel: "",
					//     peoplecard: "",
					//     username: "",
					//   };
					//   this.visible = false;
					// }, 2000);
				} else {
					this.confirmLoading = false;
					this.$message.error(no);

					console.log(123);
				}
				console.log(no);
			});
		},
		// interviewTimeDisabledDate(current) {
		//   // Can not select days before today and today
		//   return (
		//     current < moment().startOf("day") || current > moment().add(100, "days")
		//   );
		// },
		// interviewTimeDisabledDateTime() {
		//   return {
		//     disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 22, 23],
		//     disabledMinutes: () =>
		//       this.range(0, 60)
		//         .splice(1, 29)
		//         .concat(this.range(0, 60).splice(31, 59)),
		//     disabledSeconds: () => this.range(1, 60),
		//   };
		// },
		range(start, end) {
			const result = [];
			for (let i = start; i < end; i++) {
				result.push(i);
			}
			return result;
		},

		getDom() {
			console.log(1);
		},
		getDateinfo() {
			this.isShow = true;
			console.log(this.form.interviewTime);
		},
		verify() {
			if (this.form.interviewTime !== "") {
				this.form.interviewTime = "";
			}
		},
		handleChange({ fileList }) {
			console.log(fileList);
			console.log(fileList[0]);
			this.fileList = fileList;

			// try {
			//   const { data } = await getIdCardInfoApi(formData);
			//   console.log(data);
			// } catch (error) {
			//   console.log(error);
			// }
		},
		// getBase64(file) {
		//   return new Promise((resolve, reject) => {
		//     const reader = new FileReader();
		//     console.log(reader);
		//     reader.readAsDataURL(file);
		//     reader.onload = () => resolve(reader.result);
		//     reader.onerror = (error) => reject(error);
		//   });
		// },
		beforeUpload(e, data) {
			let that = this;
			console.log(e);
			console.log(data);
			//resolve()
			return new Promise((resolve, reject) => {
				//resolve()
				new Promise((resolve) => {
					request({
						url: "/oss/policy",
						method: "get",
					})
						.then(({ data }) => {
							console.log(data);
							// console.log(data.msg);
							resolve(data.data);
						})
						.catch((err) => {
							console.log(err);
						});
				})
					.then((response) => {
						console.log("响应的数据", response);
						that.dataObj.policy = response.data.policy;
						that.dataObj.signature = response.data.signature;
						that.dataObj.ossaccessKeyId = response.data.accessid;
						that.dataObj.key = response.data.dir + that.getUUID() + "_${filename}";
						that.dataObj.dir = response.data.dir;
						that.dataObj.host = response.data.host;
						console.log("响应的数据222。。。", that.dataObj);
						resolve(true);
					})
					.catch((err) => {
						console.log(err);
						reject(false);
					});
			});
		},
		getUUID() {
			return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
				return (c === "x" ? (Math.random() * 16) | 0 : "r&0x3" | "0x8").toString(16);
			});
		},
		async customRequestFun(file) {
			console.dir(file.onSuccess);
			let _self = this;
			this.loading = true;
			var formData = new FormData();

			//注意formData里append添加的键的大小写
			formData.append("key", _self.dataObj.key); //存储在oss的文件路径
			formData.append("OSSAccessKeyId", _self.dataObj.ossaccessKeyId); //accessKeyId
			formData.append("policy", _self.dataObj.policy); //policy
			formData.append("Signature", _self.dataObj.signature); //签名
			formData.append("success_action_status", "200"); // 上传成功返回的状态码，不设置则是204
			formData.append("file", file.file); // 一定在最后
			console.log(formData);
			let formData1 = new FormData();
			console.log(file.file);
			console.log(formData1);
			formData1.append("uploadFile", file.file); // 一定在最后
			// try {
			//   const { data } = await getIdCardInfoApi(formData1);
			//   console.log(data);
			// } catch (err) {
			//   console.log(err);
			// }
			request({
				method: "post",
				url: "/yishoudan/commons/idCardOcrRecognize",
				data: formData1,
				withCredentials: true,
				// headers: {'Content-Type': 'application/x-www-form-urlencoded'}

				headers: {
					"Content-Type": "multipart/form-data;boundary = " + new Date().getTime(),
				},
			})
				.then(({ data }) => {
					this.loading = false;

					console.log(data);
					if (data.status === 200) {
						// console.log(this.$message);
						if (data.data.success) {
							if (!isEmptyCheck(data.data.num)) {
								this.form.idCard = data.data.num;
								this.form.age = data.data.age;
								if (data.data.sex === "男") {
									this.form.sex = "1";
								} else {
									this.form.sex = "2";
								}
								console.log(this.form.sex);
								this.form.nation = data.data.nationality + "族";
								this.form.userName = data.data.name;
								this.form.address = data.data.address;
							}
						} else {
							this.$message.error("身份证识别失败,请重新上传图片");
						}
					} else {
						this.$message.error("上传失败,请重新上传");
					}
					console.log(data);
				})
				.catch((err) => {
					console.log(err);
				});
			file.onProgress();

			$.ajax({
				type: "post",
				url: "http://matripe-cms.oss-cn-beijing.aliyuncs.com",
				data: formData,
				contentType: false, // 不设置Content-Type请求头
				processData: false,
				success: function (data) {
					file.onSuccess();

					console.log(document.querySelector(".ant-upload-list-item-info"));

					_self.uploadFileFlag = true;
					console.log(data);
					var img = _self.dataObj.host + "/" + _self.dataObj.key.replace("${filename}", file.file.name);
					_self.form.idCardImageUrl = img;
					console.log(_self.form.idCardImageUrl);
				},
				fail: function (err) {
					console.log(err);
				},
			});
		},
		async handlePreview(file) {
			console.log(file);
			if (!file.url && !file.preview) {
				file.preview = await this.getBase64(file.originFileObj);
			}
			this.previewImage = file.url || file.preview;
			this.previewVisible = true;
		},
		getBase64(file) {
			return new Promise((resolve, reject) => {
				const reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = () => resolve(reader.result);
				reader.onerror = (error) => reject(error);
			});
		},
		async getProxyInfo(id) {
			const { data } = await getProxyInfoApi(id);
			// console.log(data);
			if (data.status === 200) {
				this.proxyList = data.data;
				this.proxyList.forEach((item) => {
					// console.log(item);
					let data1 = item.agencyName;
					if (!isEmptyCheck(item.userName)) {
						item.userName = data1 + "/" + item.userName;
					}
					if (!isEmptyCheck(item.tel)) {
						item.userName = item.userName + item.tel.slice(7, 12);
					}
				});
				console.log(this.proxyList);
			}
			console.log(data);
		},
		proxyChange(value) {
			console.log(value);
			this.form.agencyId = value.id;
			this.proxyinfo.userName = value.userName;
			this.proxyStatus = "";
			console.log(this.form);
		},
		async storeSearch(value) {
			// 企业名称搜索
			console.log(value);
			const { data } = await getStoreAliasApi(value);
			if (data.status === 200) {
				this.storeList = data.data;
			}
			console.log(data);
		},
		async storeChange(value) {
			console.log(value);
			this.storeList = [];
			this.firminfo.aliasName = value.aliasName;
			this.form.qiyeId = value.id;
			this.storeStatus = "";
			try {
				const { data } = await getStoreJobApi(value.id);
				console.log(data);
				if (data.status === 200) {
					this.storeJobList = data.data;
				}
			} catch (error) {
				console.log(error);
			}
			console.log(this.form);
			console.log(value);
		},
		selected() {
			// if (!isEmptyCheck(this.form.qiyeId)) {
			this.jobnameStatus = "jobname";
			// } else {
			// this.$message.warning("请先选择企业");
			// }
		},
		storeJobChange(value) {
			console.log(value);
			// this.storeJobList = [];
			// if(!isEmptyCheck(this.form.qiyeId)){
			this.getPolicyByJobId(value.id);
			this.form.storeJobId = value.id;
			this.jobnameStatus = "";
			this.firminfo.jobName = value.jobName;
			console.log(this.form);
			// } else {

			// }
		},
		toList() {
			// this.$router.go(0);
			// window.location.reload();
			this.reload();
		},
		getIdInfo(e) {
			if (e.target.value.length == 18) {
				let bir = getAgeFromBirthday(e.target.value);
				if (!isEmptyCheck(bir.gender)) {
					this.form.sex = bir.gender;
				}
				if (!isEmptyCheck(bir.age)) {
					this.form.age = bir.age;
				}
			}
		},
    toFold(value){
      let policy = document.querySelector('.policy')
      if(value == 1){
        this.isFold = false
        policy.style.maxHeight = 'unset'
      } else {
        this.isFold = true
        policy.style.maxHeight = '230px'

      }
    }
	},
};
</script>

<style scoped lang="less">
.recordBill-container {
	// height: 100%;

	box-sizing: border-box;
	.content {
		margin-top: 12px;
		padding: 30px 0 20px 300px;
		position: relative;
		background-color: #fff;
		text-align: left;
		.ant-form {
			width: 640px;
		}
		
	}
	.upline {
		position: relative !important;
		box-shadow: none;
		// transform: translateX(-10px);
		margin-top: 12px;
		> div {
			margin-left: 107px;
			display: flex;
			justify-content: start;
			button {
				transition: none;
			}
			button:first-child {
				&:hover {
					border-color: #ff6a00 !important;
					color: #ff6a00 !important;
				}
			}
			button:last-child {
				&:hover {
					background-color: #ff7c1f !important;
					border-color: #ff7c1f !important;
				}
			}
			// button::after {
			//   // display: none;
			// }
		}
	}
}
/deep/ .ant-radio-wrapper {
	margin-right: 16px;
	span:last-child {
		padding: 0 2px;
	}
}
/deep/ .ant-radio {
	border-color: #d9d9d9;
	box-shadow: none;
	&:after {
		display: none;
	}
	&:hover .ant-radio-inner {
		border-color: #ff6a00 !important;
		box-shadow: none;
	}
}
/deep/ .ant-radio-checked {
	.ant-radio-input:focus {
		box-shadow: none;
	}
	.ant-radio-inner {
		border-color: #ff6a00;
		box-shadow: none;
		&::after {
			background-color: #ff6a00 !important;
		}
	}
}
.ant-col {
	.ant-form-item {
		margin-top: 0;
		margin-bottom: 16px !important;
	}
}
.idCardUpload {
	// 上传身份证关闭按钮的样式
	position: relative;
	.icon-guanbi {
		position: absolute;
		top: -3px;
		right: 52px;
		height: 16px;
		width: 16px;
		text-align: center;
		line-height: 16px;
		font-size: 12px;
		font-weight: 900;
		border-radius: 50%;
		background-color: #999;
		color: #fff;
		z-index: 99;
		&::before {
			display: inline-block;
			transform: scale(0.6);
		}
	}
}
.specialbox {
	margin-top: -8px;
}
/deep/ .ant-upload-picture-card-wrapper {
	width: 100px !important;
	height: 40px !important;
	// border: 1px solid #ddd !important;
	// box-sizing: border-box;
	.ant-upload.ant-upload-select-picture-card,
	.ant-upload-list-item,
	.ant-upload-list-picture-card-container {
		width: 100px !important;
		height: 40px !important;
		min-width: 100px !important;
		min-height: 40px !important;
		font-size: 12px;
		padding: 0;
		border-color: #dddddd !important;
		box-sizing: border-box;
		border-radius: 2px;
		&:hover {
			border-color: #ff6a00 !important;
		}

		.ant-upload {
			padding: 0;
		}
		.ant-upload-list-item-progress {
			display: none;
		}
		// .ant-upload-list-item-uploading {
		//   display: none;
		// }
		.ant-upload-select {
			background-color: #f5f5f5 !important;
		}
		.ant-upload-text {
			font-size: 12px;
			margin: 0 0 0 6px;
		}
		.ant-upload-list-item-uploading-text {
			// display: none;
			text-align: center !important;
			line-height: 40px !important;
			width: 100px !important;
			height: 40px !important;
			margin-top: 0;
			// overflow: hidden;
		}
		.ant-upload-list-item-actions {
			> i {
				display: none;
			}
			> a {
				text-align: center;
			}
		}
	}
	// .ant-upload-select {
	// display: none !important;
	// }
}
.uploading {
	position: absolute;
	width: 98px !important;
	height: 38px !important;
	top: 1px;
	left: -49px;
	background-color: #f5f5f5;
}
/deep/ .ant-form-item {
	// margin-bottom: 0;
	margin-top: -8px;
	.ant-col-5 {
		width: 20%;
	}

	.ant-form-item-label {
		// line-height: 22px;
		> label {
			font-weight: 400;
			color: #333;
		}
	}
	.ant-input-affix-wrapper {
		&:hover .ant-input {
			border-color: #d9d9d9;
		}
	}
	.radiobox {
		height: 40px;
		display: flex;
		align-items: center;
	}

	.ant-form-item-children {
		.pzbox {
			// display: flex !important;
			color: #666;
			span {
				display: inline-block;
				&:first-child {
					min-width: 50px;
				}
				// &:last-child {
				//   cursor: pointer;
				//   margin-left: 10px;
				//   color: #ff6a00;
				// }
			}
			// &::before {
			//   content: "";
			//   display: block;
			//   position: absolute;
			//   height: 1px;
			//   width: 588px;
			//   left: -428px;
			//   top: -20px;
			//   background-color: #d5d5d5;
			// }
		}
	}

	.ant-input {
		// width: 430px;
		height: 38px;
		// color: rgba(77, 87, 94, 0.7);
		color: #666;
		// border: none;
		border: 1px solid #dddddd;
		box-shadow: none !important;
		// background-color: #f6f6f6;
		&::placeholder {
			color: #cdcdcd;
		}
	}
	.ant-select-selection__rendered,
	.ant-select-selection--single,
	.ant-select {
		height: 38px;
		line-height: 38px;
		// border: none;
		// border: 1px solid #dddddd;
		box-shadow: none !important;
		border-color: #d9d9d9;
		.ant-select-selection__placeholder {
			line-height: 17px;
			color: #cdcdcd;
		}
		.ant-select-selection-selected-value {
			line-height: 37px;
			color: #666;
		}
		&:hover {
			border-color: #d9d9d9;
		}
		// &:focus {
		//   border-color: #d9d9d9;
		// }
		// &:active {
		//   border-color: #d9d9d9;
		// }
	}
}
/deep/ .ant-modal-content {
	.ant-modal-header {
		border-bottom: 1px solid transparent;
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.ant-modal-body {
		padding: 24px;
		padding-top: 0;
		img {
			display: block;
			width: 100%;
		}
	}
	.ant-modal-close-x {
		height: 50px;
		line-height: 50px;
		// .anticon-close {
		//   vertical-align: 10px;
		//   margin-right: -4px;
		// }
	}
}
/deep/ .policyContainer {
  position: relative;
  .ant-form-item-children{
    position: unset;
 .policy {
			padding: 0 16px;
      // padding-bottom: 24px;
			white-space: pre-wrap;
			// border: 1px solid #ddd;
			border-radius: 4px;
      overflow: hidden;
     line-height: 2;
		}
    .openContral{
      position: absolute;
      height: 20px;
      line-height: 20px;
      bottom: 0;
      right: 10px;
      cursor: pointer;
      &:hover {
        color: #ff6a00;
      }
    }
  }
 
  // background-color: #ff6a00;
}
</style>