You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
528 lines
25 KiB
528 lines
25 KiB
<?php
|
|
include("../header.php");
|
|
require_once("./conn.php");
|
|
include_once("./api/getFacilityNo.php");
|
|
$accounttype = "B";
|
|
$sql_str = "SELECT accountid, name FROM account WHERE accounttype = :accounttype";
|
|
$stmt = $conn->prepare($sql_str);
|
|
$stmt->bindParam(':accounttype',$accounttype);
|
|
$stmt->execute();
|
|
$workers = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
$accounttype = "M";
|
|
$sql_str = "SELECT id,accountid, name FROM account WHERE accounttype = :accounttype";
|
|
$stmt = $conn->prepare($sql_str);
|
|
$stmt->bindParam(':accounttype',$accounttype);
|
|
$stmt->execute();
|
|
$contractpersons = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
|
|
$createFacilityNo = new CreateFacilityNo();
|
|
$facilityno = $createFacilityNo->makeTFacilityNo("T", 'X', 5);
|
|
?>
|
|
<link rel="stylesheet" href="./styles/style.css">
|
|
<link rel="stylesheet" href="semantic/dist/semantic.min.css">
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/axios.min.js" integrity="sha512-aoTNnqZcT8B4AmeCFmiSnDlc4Nj/KPaZyB5G7JnOnUEkdNpCZs1LCankiYi01sLTyWy+m2P+W4XM+BuQ3Q4/Dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
<div class="contract-input-component" x-data="{
|
|
init(){
|
|
$('.contract-input-component .form .dropdown').dropdown();
|
|
|
|
axios.get('./twzip.json').then(res=>{
|
|
this.cities = res.data.cities
|
|
})
|
|
},
|
|
cities:[],
|
|
data:{
|
|
contractno:'Q23080026',
|
|
total_price:'', //合約總價
|
|
vat:'', //統一編號
|
|
mtype:'A', //維修型態
|
|
opendoor:'', //開門方式
|
|
phone:'', //客戶電話
|
|
email:'', //Email
|
|
mworker:'', //保養員
|
|
mcycle:'', //保養頻率
|
|
salesman:'', //營業員
|
|
contract_begin_date:'', //合約開始時間
|
|
contract_end_date:'', //合約終止時間
|
|
area:'', //區域
|
|
zip:'', //郵遞區號
|
|
address:'', //地址
|
|
customer:'', //立約人
|
|
partyA:'', //業務聯繫人
|
|
partyAaddress:'', //業務聯繫人地址
|
|
partyAphone:'', //業務聯繫人電話
|
|
partyAemail:'', //業務聯繫人email
|
|
files:[], //附件檔案
|
|
spec:'', //機種
|
|
brand:'', //廠牌
|
|
weight: '', //載重
|
|
numberofpassenger: '', //人乘
|
|
numberofstop:'', //樓停
|
|
numberoffloor:'', //樓層
|
|
speed:'', //速度
|
|
maintainance:'', //保養別
|
|
takecertificatedate:'', //交車日、竣檢日
|
|
licensedate:'', //許可證有效日期
|
|
num:'', //電梯數量
|
|
latitude:'', //緯度
|
|
longitude:'', //經度
|
|
},
|
|
customize:false,
|
|
step:1,
|
|
isLoading:false,
|
|
fail_arr:[],
|
|
nextStepFn(){
|
|
if(this.step==1){
|
|
if(this.data.contractno == '') return alert('請輸入合約號');
|
|
this.isLoading = true
|
|
this.getContractDate();
|
|
}else if(this.step == 2){
|
|
this.step = 3
|
|
}
|
|
},
|
|
nextStepKeyupFn(e){
|
|
if(e.keyCode !== 13) return
|
|
if(this.step==1){
|
|
if(this.data.contractno == '') return alert('請輸入合約號');
|
|
this.isLoading = true
|
|
this.getContractDate();
|
|
}else if(this.step == 2){
|
|
this.step = 3
|
|
}
|
|
},
|
|
getContractDate(){
|
|
axios.get('./api/getContractData.php?contractno=' + this.data.contractno).then(res=>{
|
|
if(!this.customize){
|
|
console.log(res.data);
|
|
this.data.total_price = res.data.sold_price
|
|
this.data.salesman = res.data.salesman
|
|
this.data.contract_begin_date = res.data.contract_begin_date
|
|
this.data.contract_end_date = res.data.contract_end_date
|
|
this.data.address = res.data.address
|
|
this.data.customer = res.data.customer
|
|
this.data.partyA = res.data.customer
|
|
this.data.partyAaddress = res.data.address
|
|
this.data.spec = res.data.spec
|
|
this.data.weight = res.data.weight
|
|
this.data.numberofpassenger = res.data.persons
|
|
this.data.numberofstop = res.data.stop
|
|
this.data.numberoffloor = res.data.floors
|
|
this.data.speed = res.data.speed
|
|
this.data.takecertificatedate = res.data.contract_begin_date
|
|
let cityIndex = this.data.address.indexOf('市');
|
|
if (cityIndex > 1) {
|
|
// 獲取''市''前面的兩個字
|
|
let city = this.data.address.substring(cityIndex - 2, cityIndex + 1);
|
|
this.data.area = city;
|
|
} else {
|
|
this.data.area = ''
|
|
}
|
|
}
|
|
this.step = 2
|
|
this.isLoading = false
|
|
}).catch(err=>{
|
|
console.error(err)
|
|
this.isLoading = false
|
|
})
|
|
},
|
|
preStepFn(){
|
|
if(this.step==2){
|
|
if(confirm('回到上一頁會將本頁資料清空，確定返回嗎？')){
|
|
this.step = 1
|
|
this.data.total_price = ''
|
|
this.data.salesman = ''
|
|
this.data.contract_begin_date = ''
|
|
this.data.contract_end_date = ''
|
|
this.data.address = ''
|
|
this.data.customer = ''
|
|
this.data.partyA = ''
|
|
this.data.partyAaddress = ''
|
|
this.data.spec = ''
|
|
this.data.weight = ''
|
|
this.data.numberofpassenger = ''
|
|
this.data.numberofstop = ''
|
|
this.data.numberoffloor = ''
|
|
this.data.speed = ''
|
|
this.data.takecertificatedate = ''
|
|
this.step = 1
|
|
return;
|
|
}
|
|
}else if(this.step == 3){
|
|
this.step = 2
|
|
}
|
|
},
|
|
save(){
|
|
this.isLoading = true
|
|
const form = new FormData();
|
|
form.append('contractno', this.data.contractno);
|
|
form.append('total_price', this.data.total_price);
|
|
form.append('vat', this.data.vat);
|
|
form.append('mtype', this.data.mtype);
|
|
form.append('opendoor', this.data.opendoor);
|
|
form.append('phone', this.data.phone);
|
|
form.append('email', this.data.email);
|
|
form.append('mworker', this.data.mworker);
|
|
form.append('mcycle', this.data.mcycle);
|
|
form.append('salesman', this.data.salesman);
|
|
form.append('contract_begin_date', this.data.contract_begin_date);
|
|
form.append('contract_end_date', this.data.contract_end_date);
|
|
form.append('address', this.data.address);
|
|
form.append('area', this.data.area);
|
|
form.append('customer', this.data.customer);
|
|
form.append('partyA', this.data.partyA);
|
|
form.append('partyAaddress', this.data.partyAaddress);
|
|
form.append('partyAphone', this.data.partyAphone);
|
|
form.append('partyAemail', this.data.partyAemail);
|
|
form.append('spec', this.data.spec);
|
|
form.append('weight', this.data.weight);
|
|
form.append('numberofpassenger', this.data.numberofpassenger);
|
|
form.append('numberofstop', this.data.numberofstop);
|
|
form.append('numberoffloor', this.data.numberoffloor);
|
|
form.append('speed', this.data.speed);
|
|
form.append('takecertificatedate', this.data.takecertificatedate);
|
|
form.append('maintainance', this.data.maintainance);
|
|
form.append('licensedate', this.data.licensedate);
|
|
form.append('latitude', this.data.latitude);
|
|
form.append('longitude', this.data.longitude);
|
|
form.append('user_id', '<?php echo $user_id; ?>');
|
|
form.append('user_name', '<?php echo $user_name; ?>');
|
|
form.append('num', this.data.num);
|
|
|
|
// 如果有附件檔案，可以逐一加入
|
|
for (var i = 0; i < this.data.files.length; i++) {
|
|
form.append('files[]', this.data.files[i]);
|
|
}
|
|
axios.post('./api/postContractData.php', form).then(res=>{
|
|
console.log(res);
|
|
this.isLoading = false
|
|
}).catch(error=>{
|
|
let code = error.response.status;
|
|
if(code == 422){
|
|
this.fail_arr = error.response.data
|
|
this.errorFn();
|
|
}
|
|
|
|
this.isLoading = false
|
|
})
|
|
},
|
|
errorFn(){
|
|
let msg = ''
|
|
for(let i = 0; i < this.fail_arr.length; i++){
|
|
msg += this.fail_arr[i] + '、'
|
|
}
|
|
alert(msg)
|
|
},
|
|
uploadFiles(e){
|
|
this.data.files = e.target.files
|
|
},
|
|
}">
|
|
<div class="form" method="post" id="form" enctype="multipart/form-data" >
|
|
<input type="hidden" name='form_name' value="main_form" />
|
|
<div>
|
|
<table class="table table-bordered query-table table-striped table-bordered display compact" style="width:99%;margin-left:.5%">
|
|
<thead>
|
|
<tr>
|
|
<td colspan="9">
|
|
<h3 style='text-align:center'>合約入力(保養)</h3>
|
|
</td>
|
|
</tr>
|
|
</thead>
|
|
<template x-if="step==1">
|
|
<tbody style="font-weight: bolder;margin-bottom: 20px" x-show="step==1">
|
|
<tr>
|
|
<td style="vertical-align: middle">合約號</td>
|
|
<td>
|
|
<input class="form-control" @keyup="nextStepKeyupFn($event)" type="text" name="contractno" x-model="data.contractno" >
|
|
|
|
</td>
|
|
<td style="vertical-align: middle">
|
|
<label for="customize">
|
|
<input type="checkbox" x-model="customize" id="customize" />自定義欄位
|
|
</label>
|
|
</td>
|
|
|
|
</tr>
|
|
</tbody>
|
|
</template>
|
|
<template x-if="step==2">
|
|
<tbody style="font-weight: bolder;margin-bottom: 20px" x-show="step==2">
|
|
<tr>
|
|
<td colspan="7" style='vertical-align: middle;border-right:0px;'>
|
|
<h4>業務確認項</h4>
|
|
</td>
|
|
<td class="text-right" style='border-left:0px;'>
|
|
<button type="button" id="btn_close" class="btn btn-default" onclick="window.history.back();">返回</button>
|
|
<button type="button" id="btn_close" class="btn btn-default" onclick="window.close();">關閉分頁</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: middle">立約人</td>
|
|
<td>
|
|
<input type="text" x-model="data.customer" />
|
|
<p class="alerttext" x-show="data.customer==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">營業員</td>
|
|
<td>
|
|
<select class="ui fluid search dropdown" name="promiser" x-model="data.salesman">
|
|
<option value="">選擇營業員</option>
|
|
<?php foreach($contractpersons as $person){ ?>
|
|
<option value="<?php echo $person['accountid'] ?>"><?php echo $person['name'] ?></option>
|
|
<?php } ?>
|
|
</select>
|
|
<p class="alerttext" x-show="data.salesman==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">合約開始時間</td>
|
|
<td>
|
|
<input class="form-control disabled_select" type="date" name="start_date" x-model="data.contract_begin_date" >
|
|
<p class="alerttext" x-show="data.contract_begin_date==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">合約終止時間</td>
|
|
<td>
|
|
<input class="form-control disabled_select" type="date" name="end_date" x-model="data.contract_end_date" >
|
|
<p class="alerttext" x-show="data.contract_end_date==''">未填寫</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: middle">電梯台數</td>
|
|
<td>
|
|
<input class="form-control disabled_select" type="number" x-model="data.num">
|
|
<p class="alerttext" x-show="data.num==''">未填寫</p>
|
|
</td>
|
|
|
|
<td style="vertical-align: middle">統一編號/身分證</td>
|
|
<td>
|
|
<input class="form-control disabled_select" type="text" name="uscc" x-model="data.vat" >
|
|
<p class="alerttext" x-show="data.vat==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">維修型態</td>
|
|
<td style="vertical-align: middle">
|
|
<select class="ui search dropdown" name="repairtype" x-model="data.mtype">
|
|
<option value="" >選擇維修型態</option>
|
|
<option value="A">定期保養</option>
|
|
</select>
|
|
<p class="alerttext" x-show="data.mtype==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">
|
|
開門方式
|
|
</td>
|
|
<td style="vertical-align: middle">
|
|
<select class="ui search dropdown" name="repairtype" x-model="data.opendoor">
|
|
<option value="">選擇開門方式</option>
|
|
<option value="2PCO">2PCO</option>
|
|
<option value="2S">2S</option>
|
|
<option value="2SL">2SL</option>
|
|
<option value="2SR">2SR</option>
|
|
<option value="2U">2U</option>
|
|
<option value="3S">3S</option>
|
|
<option value="4PCO">4PCO</option>
|
|
<option value="6PCO">6PCO</option>
|
|
<option value="CO">CO</option>
|
|
</select>
|
|
<p class="alerttext" x-show="data.opendoor==''">未填寫</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: middle">客戶電話</td>
|
|
<td>
|
|
<input class="form-control disabled_select" type="text" name="tel" x-model="data.phone" >
|
|
<p class="alerttext" x-show="data.phone==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">Email</td>
|
|
<td style="vertical-align: middle">
|
|
<input class="form-control disabled_select" type="text" name="email" x-model="data.email" >
|
|
<p class="alerttext" x-show="data.email==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">保養員</td>
|
|
<td>
|
|
<select class="ui search dropdown" name="repairer_name" x-model="data.mworker">
|
|
<option value="">選擇保養員</option>
|
|
<?php foreach($workers as $worker){ ?>
|
|
<option value="<?php echo $worker['accountid']; ?>"><?php echo $worker['name'] ?></option>
|
|
<?php } ?>
|
|
</select>
|
|
<p class="alerttext" x-show="data.mworker==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">保養頻率</td>
|
|
<td>
|
|
<select class="ui search dropdown" name="repairer_name" x-model="data.mcycle">
|
|
<option value="">選擇保養頻率</option>
|
|
<option value="bw">雙週保</option>
|
|
<option value="em">月保</option>
|
|
</select>
|
|
<p class="alerttext" x-show="data.mcycle==''">未填寫</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: middle">業務聯繫人</td>
|
|
<td>
|
|
<input type="text" x-model="data.partyA" name="partyA" />
|
|
<p class="alerttext" x-show="data.partyA==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">業務聯繫人地址</td>
|
|
<td>
|
|
<input class="form-control disabled_select" x-model="data.partyAaddress" type="text" name="contractaddress" value="" >
|
|
<p class="alerttext" x-show="data.partyAaddress==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">業務聯繫人電話</td>
|
|
<td>
|
|
<input class="form-control disabled_select" type="text" name="contracttel" x-model="data.partyAphone" >
|
|
<p class="alerttext" x-show="data.partyAphone==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">業務聯繫人Email</td>
|
|
<td>
|
|
<input class="form-control disabled_select" type="text" name="contracttel" x-model="data.partyAemail" >
|
|
<p class="alerttext" x-show="data.partyAemail==''">未填寫</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: middle">廠牌</td>
|
|
<td>
|
|
<input type="text" x-model="data.brand" class="form-control" />
|
|
<p class="alerttext" x-show="data.brand==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">區域</td>
|
|
<td>
|
|
<select class="ui search dropdown" x-model="data.area">
|
|
<option value="">選擇區域</option>
|
|
<template x-for="city in cities" :key="city.code">
|
|
<option x-bind:selected="city.name === data.area" x-text="city.name" :value="city.name"></option>
|
|
</template>
|
|
</select>
|
|
<p class="alerttext" x-show="data.area==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">詳細地址</td>
|
|
<td colspan="3">
|
|
<input type="text" x-model="data.address" />
|
|
<p class="alerttext" x-show="data.address==''">未填寫</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: middle">保養別</td>
|
|
<td>
|
|
<select class="ui search dropdown" x-model="data.maintainance">
|
|
<option value="">選擇保養別</option>
|
|
<option value="A">全包</option>
|
|
<option value="B">半包</option>
|
|
<option value="C">清包</option>
|
|
</select>
|
|
<p class="alerttext" x-show="data.maintainance==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">竣檢日</td>
|
|
<td>
|
|
<input class="form-control disabled_select" type="date" x-model="data.takecertificatedate">
|
|
<p class="alerttext" x-show="data.takecertificatedate==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">許可證有效時間</td>
|
|
<td>
|
|
<input class="form-control disabled_select" type="date" x-model="data.licensedate">
|
|
<p class="alerttext" x-show="data.licensedate==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">附件</td>
|
|
<td >
|
|
<input type="file" name="file[]" multiple draggable="true" @change="uploadFiles($event)" />
|
|
<p class="alerttext" x-show="data.files==''">未填寫</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
|
|
</tr>
|
|
</tbody>
|
|
</template>
|
|
<template x-if="step==3">
|
|
<tbody style="font-weight: bolder;margin-bottom: 20px" x-show="step==3">
|
|
<tr>
|
|
<td style="vertical-align: middle">機種</td>
|
|
<td>
|
|
<select class="ui search dropdown" name="spec" x-model="data.spec">
|
|
<option value="">選擇規格</option>
|
|
<option value="MAE100">MAE100</option>
|
|
<option value="MAM200">MAM200</option>
|
|
<option value="MAH100">MAH100</option>
|
|
<option value="MAQ100">MAQ100</option>
|
|
<option value="MAF100">MAF100</option>
|
|
<option value="MAZ100">MAZ100</option>
|
|
</select>
|
|
<p class="alerttext" x-show="data.spec==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">載重</td>
|
|
<td>
|
|
<input type="text" x-model="data.weight" />
|
|
<p class="alerttext" x-show="data.weight==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">速度</td>
|
|
<td>
|
|
<input type="text" x-model="data.speed" />
|
|
<p class="alerttext" x-show="data.speed==''">未填寫</p>
|
|
</td>
|
|
|
|
<td style="vertical-align: middle">人乘</td>
|
|
<td>
|
|
<input type="text" x-model="data.numberofpassenger" />
|
|
<p class="alerttext" x-show="data.numberofpassenger==''">未填寫</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: middle">樓停</td>
|
|
<td>
|
|
<input type="number" class="form-control" x-model="data.numberofstop" />
|
|
<p class="alerttext" x-show="data.numberofstop==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">樓層</td>
|
|
<td>
|
|
<input type="text" x-model="data.numberoffloor" />
|
|
<p class="alerttext" x-show="data.numberoffloor==''">未填寫</p>
|
|
</td>
|
|
<td style="vertical-align: middle">緯度</td>
|
|
<td>
|
|
<input type="text" x-model="data.latitude" />
|
|
<p class="alerttext" x-show="data.latitude==''">未填寫</p>
|
|
</td>
|
|
|
|
<td style="vertical-align: middle">經度</td>
|
|
<td>
|
|
<input type="text" x-model="data.longitude" />
|
|
<p class="alerttext" x-show="data.longitude==''">未填寫</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</template>
|
|
</table>
|
|
|
|
|
|
<button x-show="step==3" @click="save()" :disabled="isLoading" type="button" class="btn btn-primary btn-lg pull-right savebtn">
|
|
<template x-if="!isLoading">
|
|
<span>存檔</span>
|
|
</template>
|
|
<template x-if="isLoading">
|
|
<div class="loader"></div>
|
|
</template>
|
|
</button>
|
|
<button x-show="step<=2" @click="nextStepFn()" type="button" class="btn btn-primary btn-lg pull-right savebtn" :disabled="isLoading">
|
|
<template x-if="!isLoading">
|
|
<span>下一步</span>
|
|
</template>
|
|
<template x-if="isLoading">
|
|
<div class="loader"></div>
|
|
</template>
|
|
</button>
|
|
<button x-show="step>1" @click="preStepFn()" :disabled="isLoading" type="button" class="btn btn-primary btn-lg pull-right savebtn">
|
|
<template x-if="!isLoading">
|
|
<span>上一步</span>
|
|
</template>
|
|
<template x-if="isLoading">
|
|
<div class="loader"></div>
|
|
</template>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script
|
|
src="https://code.jquery.com/jquery-3.1.1.min.js"
|
|
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
|
|
crossorigin="anonymous"></script>
|
|
<script src="semantic/dist/semantic.min.js" ></script>
|
|
<script>
|
|
|
|
</script>
|