zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

修改数据重置无效问题

pull/13/head
zq 3 weeks ago
parent
cd4e8105f4
commit
70c352e97f
3 changed files with 89 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 21
      src/components/GuipInput.vue
  2. 10
      src/components/GuipSelect.vue
  3. 145
      src/views/super/Ranking/Purchase.vue

21
src/components/GuipInput.vue
View File

@ -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
View File

@ -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() {
// 默认值赋值

145
src/views/super/Ranking/Purchase.vue
View File

@ -5,34 +5,35 @@
<el-button type="primary" @click="openDialog">新增</el-button>
<GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false"
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
@close="handleClose"
@dialogVisibleChange="dialogVisibleChange">
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
@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"
style="width: 100%;">
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
style="width: 100%;">
</el-date-picker>
</el-form-item>
</template>
@ -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,22 +101,16 @@
<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>
style="color: #006aff;margin-left: 20px;cursor: pointer;">同步</a>
</template>
</el-table-column>
</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', {
@ -401,6 +400,6 @@ export default {
</script>
<style scoped lang="scss">
.custom-select {
width: 200px;
width: 200px;
}
</style>
Write Preview
Loading…
Cancel
Save