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
Unified 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" :show-word-limit="showWordLimit"
@input="$emit('input', $event)" @input="$emit('input', $event)"
@change="$emit('change', $event)" @change="$emit('change', $event)"
@blur="$emit('blur', value)" @blur="$emit('blur', inputValue)"
@focus="$emit('focus', value)" @focus="$emit('focus', inputValue)"
v-model="value"> v-model="inputValue">
<!-- 自定义前面小图标 --> <!-- 自定义前面小图标 -->
<template v-slot:prepend> <template v-slot:prepend>
<slot name="prependshow"></slot> <slot name="prependshow"></slot>
@ -46,12 +46,12 @@
<script> <script>
export default { export default {
name: 'GuipInput', name: 'GuipInput',
props:['styleObject','disabled','defaultValue','placeholder', props:['value','styleObject','disabled','defaultValue','placeholder',
'maxlength','minLength','clear','width','height','showWordLimit', 'maxlength','minLength','clear','width','height','showWordLimit',
'label','type','prop','rules','column','addClass','desc','unit'], 'label','type','prop','rules','column','addClass','desc','unit'],
data() { data() {
return { return {
value: '', inputValue: '',
maxlength1: '', maxlength1: '',
minLength1: 0, minLength1: 0,
style:{ style:{
@ -62,15 +62,18 @@
} }
}, },
watch: { // 监听外部传来的 value prop 的变化，以便同步到内部状态 inputValue 上（可选） watch: { // 监听外部传来的 value prop 的变化，以便同步到内部状态 inputValue 上（可选）
defaultValue(newVal) { // defaultValue(newVal) {
console.log(newVal,'newVal'); // console.log(newVal,'newVal');
this.value = newVal; // this.inputValue = newVal;
// },
value(newVal){
this.inputValue = newVal;
} }
}, },
created(){ created(){
// 默认值赋值 // 默认值赋值
if(this.defaultValue != null){ if(this.defaultValue != null){
this.value = this.defaultValue; this.inputValue = this.defaultValue;
} }
// 默认提示语 // 默认提示语
if(this.placeholder){ if(this.placeholder){

10
src/components/GuipSelect.vue
View File

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

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

@ -5,34 +5,35 @@
<el-button type="primary" @click="openDialog">新增</el-button> <el-button type="primary" @click="openDialog">新增</el-button>
<GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false" <GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false"
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
@close="handleClose" @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
@dialogVisibleChange="dialogVisibleChange">
<el-form :model="form" class="el-row demo-ruleForm" ref="formRef"> <el-form :model="form" class="el-row demo-ruleForm" ref="formRef">
<el-form-item label="检测类型" prop="type"> <!-- 组件已经封装了 el-form-item 没有特殊需求，直接在组件上传prop label 就可以实现效果-->
<GuipSelect v-model="form.type" :options="type2nameOptions"/> <GuipSelect v-model="form.type" prop="type" label="检测类型" :options="type2nameOptions" />
</el-form-item> <el-form-item label="采购单价" label-width="73px">
<el-form-item label="采购单价" prop="type" label-width="73px">
<div style="display: flex; align-items: center; gap: 8px; width: 100%;"> <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> <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> <span>字（篇/页）</span>
</div> </div>
</el-form-item> </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'"> <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%;"> <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> <span>元</span>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="起止日期" prop="date" label-width="73px"> <el-form-item label="起止日期" prop="date" label-width="73px">
<el-date-picker v-model="form.date" type="daterange" range-separator="至" <el-date-picker v-model="form.date" type="daterange" range-separator="至"
start-placeholder="开始日期" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 100%;">
style="width: 100%;">
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</template> </template>
@ -46,7 +47,7 @@
<el-table-column prop="type"> <el-table-column prop="type">
<template slot="header"> <template slot="header">
<GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions" <GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions"
defaultValue="全部检测类型" @change="changeSelectType"/> defaultValue="全部检测类型" @change="changeSelectType" />
</template> </template>
<template slot-scope="scope"> <template slot-scope="scope">
@ -72,7 +73,7 @@
<el-table-column prop="type"> <el-table-column prop="type">
<template slot="header"> <template slot="header">
<GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions" <GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions"
defaultValue="全部检测类型" @change="changeSelectType"/> defaultValue="全部检测类型" @change="changeSelectType" />
</template> </template>
<template slot-scope="scope"> <template slot-scope="scope">
@ -82,7 +83,7 @@
<el-table-column label="采购价"> <el-table-column label="采购价">
<template slot-scope="scope"> <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_price }} 元 / {{
scope.row.unit_num == 1 ? '篇' : scope.row.unit_num + '字' }} scope.row.unit_num == 1 ? '篇' : scope.row.unit_num + '字' }}
</template> </template>
@ -100,22 +101,16 @@
<el-table-column label="操作" width="200"> <el-table-column label="操作" width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<a @click="editStagePurchase(scope.row)" <a @click="editStagePurchase(scope.row)" style="color: #006aff;cursor: pointer;">编辑</a>
style="color: #006aff;cursor: pointer;">编辑</a>
<a v-if="scope.row.is_sync == 0" @click="syncStagePurchase(scope.row)" <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> </template>
</el-table-column> </el-table-column>
</template> </template>
</el-table> </el-table>
<el-pagination background <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
@size-change='handleSizeChange' :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" :total="total">
@current-change='handleCurrentChange'
:current-page="currentPage"
:page-size=pageSize
layout="prev, pager, next,jumper"
:total="total">
</el-pagination> </el-pagination>
</el-form> </el-form>
</div> </div>
@ -150,8 +145,9 @@ export default {
}, },
data() { data() {
return { return {
test: '00000',
id: 0, id: 0,
chktype: 0, chktype: '0',
currentPage: 1, //当前页 currentPage: 1, //当前页
pageSize: 20, //每页的容量 pageSize: 20, //每页的容量
total: 0, //列表总数 total: 0, //列表总数
@ -178,22 +174,22 @@ export default {
}, },
computed: { computed: {
type2nameOptions() { type2nameOptions() {
if(this.type2name.length == 0) return true if (this.type2name.length == 0) return true
return Object.entries(this.type2name).map(([value, label]) => ({ return Object.entries(this.type2name).map(([value, label]) => ({
label, label,
value: Number(value) // 如果你需要 value 是数字 value: String(value) // 如果你需要 value 是数字
})); }));
}, },
type2filterOptions() { type2filterOptions() {
if(this.type2name.length == 0) return true if (this.type2name.length == 0) return true
let options = Object.entries(this.type2name).map(([value, label]) => ({ let options = Object.entries(this.type2name).map(([value, label]) => ({
label, label,
value: Number(value) // 如果你需要 value 是数字 value: String(value) // 如果你需要 value 是数字
})); }));
return [{ label: '全部检测类型', value: '' }, ...options]; return [{ label: '全部检测类型', value: '0' }, ...options];
} }
}, },
watch: { watch: {
@ -266,45 +262,41 @@ export default {
this.init() this.init()
}, },
openDialog() { openDialog() {
this.form = {
id: '',
type: '',
unit_price: '',
unit_num: '',
cost: '',
date: '',
start_date: '',
end_date: '',
}
this.dialogVisible = true; this.dialogVisible = true;
// 重置数据
this.$nextTick(() => {
this.$refs.formRef.resetFields();
});
}, // 确认按钮事件 }, // 确认按钮事件
handleConfirm() { handleConfirm() {
const that = this const that = this
if (!that.form.type) { // 避免打开弹框，重置数据时，新添加的数据被清空，重新拷贝一份 或者 添加数据后，拉取新数据
let form = JSON.parse(JSON.stringify(that.form))
if (!form.type) {
this.$message.warning('请选择检测类型'); this.$message.warning('请选择检测类型');
return return
} }
if (that.type == 'purchase') { if (that.type == 'purchase') {
if (!that.form.unit_price || !that.form.unit_num) { if (!form.unit_price || !form.unit_num) {
this.$message.warning('请输入采购单价'); this.$message.warning('请输入采购单价');
return return
} }
this.$http('POST', '/supernew/ajax_save_purchase', { this.$http('POST', '/supernew/ajax_save_purchase', {
id: that.form.id, id: form.id,
type: that.form.type, type: form.type,
unit_price: that.form.unit_price, unit_price: form.unit_price,
unit_num: that.form.unit_num, unit_num: form.unit_num,
}).then(response => { }).then(response => {
this.$nextTick(() => { this.$nextTick(() => {
if (!response.status) { if (!response.status) {
this.$message.warning(response.info); this.$message.warning(response.info);
} else { } else {
if(that.form.id > 0){ if (form.id > 0) {
that.$set(this.tableData, this.tableData.findIndex(item => item.id === that.form.id), {...that.form}); that.$set(this.tableData, this.tableData.findIndex(item => item.id === form.id), { ...form });
}else{ } else {
that.form.id = response.data form.id = response.data
that.tableData.unshift(that.form); that.tableData.unshift(form);
} }
} }
this.dialogVisible = false; this.dialogVisible = false;
@ -314,35 +306,35 @@ export default {
this.dialogVisible = false; this.dialogVisible = false;
}) })
} else { } 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('请输入采购单价或阶段成本'); this.$message.warning('请输入采购单价或阶段成本');
return return
} }
if (!that.form.start_date || !that.form.end_date) { if (!form.start_date || !form.end_date) {
this.$message.warning('请选择起止日期'); this.$message.warning('请选择起止日期');
return return
} }
this.$http('POST', '/supernew/ajax_save_stage_purchase', { this.$http('POST', '/supernew/ajax_save_stage_purchase', {
id: that.form.id, id: form.id,
type: that.form.type, type: form.type,
unit_price: that.form.unit_price, unit_price: form.unit_price,
unit_num: that.form.unit_num, unit_num: form.unit_num,
cost: that.form.cost, cost: form.cost,
sdate: that.form.start_date, sdate: form.start_date,
edate: that.form.end_date, edate: form.end_date,
}).then(response => { }).then(response => {
this.$nextTick(() => { this.$nextTick(() => {
if (!response.status) { if (!response.status) {
this.$message.warning(response.info); this.$message.warning(response.info);
} else { } else {
if(that.form.id > 0){ if (form.id > 0) {
that.$set(this.tableData, this.tableData.findIndex(item => item.id === that.form.id), {...that.form}); that.$set(this.tableData, this.tableData.findIndex(item => item.id === form.id), { ...form });
}else{ } else {
that.form.id = response.data form.id = response.data
that.form.is_sync = 0 form.is_sync = 0
that.tableData.unshift(that.form); that.tableData.unshift(form);
} }
} }
this.dialogVisible = false; this.dialogVisible = false;
@ -374,13 +366,20 @@ export default {
return `${Y}-${M}-${D}`; return `${Y}-${M}-${D}`;
}, },
editPurchase(row) { editPurchase(row) {
this.form = {...row};
this.dialogVisible = true; this.dialogVisible = true;
this.$nextTick(() => {
this.form = { ...row };
// 如果需要强制更新视图
this.$forceUpdate();
})
}, },
editStagePurchase(row) { editStagePurchase(row) {
this.form = {...row};
this.form.date = [row.start_date, row.end_date]
this.dialogVisible = true; this.dialogVisible = true;
this.$nextTick(()=>{
this.form = { ...row };
this.form.date = [row.start_date, row.end_date]
this.$forceUpdate();
})
}, },
syncStagePurchase(row) { syncStagePurchase(row) {
this.$http('POST', '/supernew/ajax_sync_order_cost', { this.$http('POST', '/supernew/ajax_sync_order_cost', {
@ -401,6 +400,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.custom-select { .custom-select {
width: 200px; width: 200px;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save