修改数据重置无效问题 #13

Merged
zhangqi merged 1 commits from zq-popup into master 3 weeks ago
  1. 21
      src/components/GuipInput.vue
  2. 10
      src/components/GuipSelect.vue
  3. 137
      src/views/super/Ranking/Purchase.vue

21
src/components/GuipInput.vue

@ -14,9 +14,9 @@
:show-word-limit="showWordLimit"
@input="$emit('input', $event)"
@change="$emit('change', $event)"
@blur="$emit('blur', value)"
@focus="$emit('focus', value)"
v-model="value">
@blur="$emit('blur', inputValue)"
@focus="$emit('focus', inputValue)"
v-model="inputValue">
<!-- 自定义前面小图标 -->
<template v-slot:prepend>
<slot name="prependshow"></slot>
@ -46,12 +46,12 @@
<script>
export default {
name: 'GuipInput',
props:['styleObject','disabled','defaultValue','placeholder',
props:['value','styleObject','disabled','defaultValue','placeholder',
'maxlength','minLength','clear','width','height','showWordLimit',
'label','type','prop','rules','column','addClass','desc','unit'],
data() {
return {
value: '',
inputValue: '',
maxlength1: '',
minLength1: 0,
style:{
@ -62,15 +62,18 @@
}
},
watch: { // value prop 便 inputValue
defaultValue(newVal) {
console.log(newVal,'newVal');
this.value = newVal;
// defaultValue(newVal) {
// console.log(newVal,'newVal');
// this.inputValue = newVal;
// },
value(newVal){
this.inputValue = newVal;
}
},
created(){
//
if(this.defaultValue != null){
this.value = this.defaultValue;
this.inputValue = this.defaultValue;
}
//
if(this.placeholder){

10
src/components/GuipSelect.vue

@ -16,22 +16,22 @@
<script>
export default {
name: 'GuipTextarea',
props: ['options', 'styleObject', 'disabled', 'defaultValue', 'placeholder',
props: ['value','options', 'styleObject', 'disabled', 'defaultValue', 'placeholder',
'width', 'height', 'label', 'type', 'prop', 'rules', 'column', 'addClass', 'desc'],
data() {
return {
selectedValue: '',
style: {},
placeholder1: '请选择'
placeholder1: '请选择',
}
},
watch: {
value(newVal) {
this.selectedValue = newVal;
},
defaultValue(newVal) {
this.selectedValue = newVal;
}
// defaultValue(newVal) {
// this.selectedValue = newVal;
// }
},
mounted() {
//

137
src/views/super/Ranking/Purchase.vue

@ -6,32 +6,33 @@
<GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false"
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
@close="handleClose"
@dialogVisibleChange="dialogVisibleChange">
@close="handleClose" @dialogVisibleChange="dialogVisibleChange">
<el-form :model="form" class="el-row demo-ruleForm" ref="formRef">
<el-form-item label="检测类型" prop="type">
<GuipSelect v-model="form.type" :options="type2nameOptions"/>
</el-form-item>
<el-form-item label="采购单价" prop="type" label-width="73px">
<!-- 组件已经封装了 el-form-item 没有特殊需求直接在组件上传prop label 就可以实现效果-->
<GuipSelect v-model="form.type" prop="type" label="检测类型" :options="type2nameOptions" />
<el-form-item label="采购单价" label-width="73px">
<div style="display: flex; align-items: center; gap: 8px; width: 100%;">
<GuipInput v-model="form.unit_price" style="flex: 1;"/>
<GuipInput v-model="form.unit_price" prop="unit_price" />
<span> /</span>
<GuipInput v-model="form.unit_num" style="flex: 1;"/>
<GuipInput v-model="form.unit_num" prop="unit_num" style="flex: 1;" />
<span>/</span>
</div>
</el-form-item>
<!-- <div class="flex-between" style="gap: 8px;">
<GuipInput label="采购单价" v-model="form.unit_price" prop="unit_price" unit="元"/>
<GuipInput v-model="form.unit_num" prop="unit_num" style="flex: 1;" unit="字(篇/页)"/>
</div> -->
<template v-if="type != 'purchase'">
<el-form-item label="阶段成本" prop="type" label-width="73px">
<el-form-item label="阶段成本" prop="cost" label-width="73px">
<div style="display: flex; align-items: center; gap: 8px; width: 100%;">
<GuipInput v-model="form.cost" style="flex: 1;"/>
<GuipInput v-model="form.cost" style="flex: 1;" />
<span></span>
</div>
</el-form-item>
<el-form-item label="起止日期" prop="date" label-width="73px">
<el-date-picker v-model="form.date" type="daterange" range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期" value-format="yyyy-MM-dd"
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
style="width: 100%;">
</el-date-picker>
</el-form-item>
@ -46,7 +47,7 @@
<el-table-column prop="type">
<template slot="header">
<GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions"
defaultValue="全部检测类型" @change="changeSelectType"/>
defaultValue="全部检测类型" @change="changeSelectType" />
</template>
<template slot-scope="scope">
@ -72,7 +73,7 @@
<el-table-column prop="type">
<template slot="header">
<GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions"
defaultValue="全部检测类型" @change="changeSelectType"/>
defaultValue="全部检测类型" @change="changeSelectType" />
</template>
<template slot-scope="scope">
@ -82,7 +83,7 @@
<el-table-column label="采购价">
<template slot-scope="scope">
<template v-if="scope.row.unit_price>0">
<template v-if="scope.row.unit_price > 0">
单价{{ scope.row.unit_price }} / {{
scope.row.unit_num == 1 ? '篇' : scope.row.unit_num + '字' }}
</template>
@ -100,8 +101,7 @@
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<a @click="editStagePurchase(scope.row)"
style="color: #006aff;cursor: pointer;">编辑</a>
<a @click="editStagePurchase(scope.row)" style="color: #006aff;cursor: pointer;">编辑</a>
<a v-if="scope.row.is_sync == 0" @click="syncStagePurchase(scope.row)"
style="color: #006aff;margin-left: 20px;cursor: pointer;">同步</a>
</template>
@ -109,13 +109,8 @@
</template>
</el-table>
<el-pagination background
@size-change='handleSizeChange'
@current-change='handleCurrentChange'
:current-page="currentPage"
:page-size=pageSize
layout="prev, pager, next,jumper"
:total="total">
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" :total="total">
</el-pagination>
</el-form>
</div>
@ -150,8 +145,9 @@ export default {
},
data() {
return {
test: '00000',
id: 0,
chktype: 0,
chktype: '0',
currentPage: 1, //
pageSize: 20, //
total: 0, //
@ -178,22 +174,22 @@ export default {
},
computed: {
type2nameOptions() {
if(this.type2name.length == 0) return true
if (this.type2name.length == 0) return true
return Object.entries(this.type2name).map(([value, label]) => ({
label,
value: Number(value) // value
value: String(value) // value
}));
},
type2filterOptions() {
if(this.type2name.length == 0) return true
if (this.type2name.length == 0) return true
let options = Object.entries(this.type2name).map(([value, label]) => ({
label,
value: Number(value) // value
value: String(value) // value
}));
return [{ label: '全部检测类型', value: '' }, ...options];
return [{ label: '全部检测类型', value: '0' }, ...options];
}
},
watch: {
@ -266,45 +262,41 @@ export default {
this.init()
},
openDialog() {
this.form = {
id: '',
type: '',
unit_price: '',
unit_num: '',
cost: '',
date: '',
start_date: '',
end_date: '',
}
this.dialogVisible = true;
//
this.$nextTick(() => {
this.$refs.formRef.resetFields();
});
}, //
handleConfirm() {
const that = this
if (!that.form.type) {
//
let form = JSON.parse(JSON.stringify(that.form))
if (!form.type) {
this.$message.warning('请选择检测类型');
return
}
if (that.type == 'purchase') {
if (!that.form.unit_price || !that.form.unit_num) {
if (!form.unit_price || !form.unit_num) {
this.$message.warning('请输入采购单价');
return
}
this.$http('POST', '/supernew/ajax_save_purchase', {
id: that.form.id,
type: that.form.type,
unit_price: that.form.unit_price,
unit_num: that.form.unit_num,
id: form.id,
type: form.type,
unit_price: form.unit_price,
unit_num: form.unit_num,
}).then(response => {
this.$nextTick(() => {
if (!response.status) {
this.$message.warning(response.info);
} else {
if(that.form.id > 0){
that.$set(this.tableData, this.tableData.findIndex(item => item.id === that.form.id), {...that.form});
}else{
that.form.id = response.data
that.tableData.unshift(that.form);
if (form.id > 0) {
that.$set(this.tableData, this.tableData.findIndex(item => item.id === form.id), { ...form });
} else {
form.id = response.data
that.tableData.unshift(form);
}
}
this.dialogVisible = false;
@ -314,35 +306,35 @@ export default {
this.dialogVisible = false;
})
} else {
if ((!that.form.unit_price || !that.form.unit_num) && !that.form.cost) {
if ((!form.unit_price || !form.unit_num) && !form.cost) {
this.$message.warning('请输入采购单价或阶段成本');
return
}
if (!that.form.start_date || !that.form.end_date) {
if (!form.start_date || !form.end_date) {
this.$message.warning('请选择起止日期');
return
}
this.$http('POST', '/supernew/ajax_save_stage_purchase', {
id: that.form.id,
type: that.form.type,
unit_price: that.form.unit_price,
unit_num: that.form.unit_num,
cost: that.form.cost,
sdate: that.form.start_date,
edate: that.form.end_date,
id: form.id,
type: form.type,
unit_price: form.unit_price,
unit_num: form.unit_num,
cost: form.cost,
sdate: form.start_date,
edate: form.end_date,
}).then(response => {
this.$nextTick(() => {
if (!response.status) {
this.$message.warning(response.info);
} else {
if(that.form.id > 0){
that.$set(this.tableData, this.tableData.findIndex(item => item.id === that.form.id), {...that.form});
}else{
that.form.id = response.data
that.form.is_sync = 0
that.tableData.unshift(that.form);
if (form.id > 0) {
that.$set(this.tableData, this.tableData.findIndex(item => item.id === form.id), { ...form });
} else {
form.id = response.data
form.is_sync = 0
that.tableData.unshift(form);
}
}
this.dialogVisible = false;
@ -374,13 +366,20 @@ export default {
return `${Y}-${M}-${D}`;
},
editPurchase(row) {
this.form = {...row};
this.dialogVisible = true;
this.$nextTick(() => {
this.form = { ...row };
//
this.$forceUpdate();
})
},
editStagePurchase(row) {
this.form = {...row};
this.form.date = [row.start_date, row.end_date]
this.dialogVisible = true;
this.$nextTick(()=>{
this.form = { ...row };
this.form.date = [row.start_date, row.end_date]
this.$forceUpdate();
})
},
syncStagePurchase(row) {
this.$http('POST', '/supernew/ajax_sync_order_cost', {

Loading…
Cancel
Save