kuailelunwen_new_houtai/src/components/site/serviceSetting/syncPrice.vue

<template>
    <GuipButton type="ignore" @click="syncPriceClick" size="medium">
        同步价格
        <GuipDialog width="800px" :dialogVisible="dialogSyncPrice" :title="'同步价格_'+type_name" confirmText="保存价格"
                    @confirm="handleSavePrice" @close="handleSyncPriceClose"
                    :show-cancel-button="priceDesc!==''" :cancelText="priceDesc" @cancel="handleSyncPrice">
            <GuipTable :tableData="siteList" ref="multipleTable" autoColumn="true" :loading="tableLoading">
                <el-table-column prop="site_name" label="站点"></el-table-column>
                <el-table-column prop="price" label="当前价格">
                    <template slot-scope="scope">
                        {{scope.row.price}}元/{{scope.row.unit_format}}
                    </template>
                </el-table-column>
                <el-table-column prop="price_set" label="设置价格">
                    <template slot-scope="scope">
                        <div class="flex mr12">
                            <GuipInput v-if="scope.row.unit_num === '1'" v-model="scope.row.price"
                                        ref="GuipInput" :unit="'元/'+scope.row.unit_name"></GuipInput>
                            <template v-else>
                                <GuipInput v-model="scope.row.price" ref="GuipInput" unit="元">
                                </GuipInput>
                                <GuipInput v-model="scope.row.unit_num" ref="GuipInput" :unit="scope.row.unit_name">
                                </GuipInput>
                            </template>
                        </div>
                    </template>
                </el-table-column>
            </GuipTable>
        </GuipDialog>
    </GuipButton>
</template>
<script>

import GuipButton from "@/components/GuipButton.vue";
import GuipDialog from "@/components/GuipDialog.vue";
import GuipTable from "@/components/GuipTable.vue";
import GuipInput from "@/components/GuipInput.vue";

export default {
  name: 'syncPrice',
  props: ['type', 'type_name', 'price', 'unit_num', 'unit_name'],
  components: {
      GuipInput,
      GuipTable,
      GuipDialog,
      GuipButton
  },
  data(){
    return {
        dialogSyncPrice: false,
        tableLoading: false,
        siteList:[] ,
    }
  },
  computed:{
      priceDesc(){
          if(this.price) {
              let priceDesc = '同步为'+this.price+'元/'+this.unit_num+this.unit_name;
              if(this.unit_num === '1') priceDesc = '同步为'+this.price+'元/'+this.unit_name;
              return priceDesc
          }
          return "";
      }
  },
  mounted() {
      this.getSiteList()
  },
  methods:{
      getSiteList(){
          this.tableLoading = true
          const that = this
          that.serviceList = []
          this.$http('POST', '/agentnew/ajax_get_service_sites', {
              type: that.type,
          }).then(response => {
              that.tableLoading = false
              if(response.status){
                  that.$nextTick(() => {
                      that.siteList = response.data
                  })
              }
          }).catch(error => {
              console.error(error, 'error')
          })
      },
      syncPriceClick(){
          this.dialogSyncPrice = true
      },
      handleSyncPriceClose(){
          this.dialogSyncPrice = false
      },
      handleSavePrice(){
          this.dialogSyncPrice = false
          console.log(this.siteList)
          this.savePrice(0)
      },
      handleSyncPrice(){
          this.dialogSyncPrice = false
          console.log(this.siteList)
          this.savePrice(1)
      },
      savePrice(sync){
          let price_config = []
          this.siteList.forEach((item)=>{
              let config = {
                  'id' : item.id,
                  'price' : sync === 1 ? this.price : item.price,
                  'unit_num' : sync === 1 ? this.unit_num : item.unit_num
              }
              price_config.push(config)
          })
          const that = this
          this.$http('POST', "/agentnew/ajax_update_services_price", {
              type: that.type,
              price_config: price_config,
              is_sync: sync
          }).then(response => {
              if (response.status) {
                  that.$message.success('保存成功');
                  if(sync === 1){
                      that.$nextTick(() => {
                          that.siteList.forEach((item)=>{
                              item.price = this.price
                              item.unit_num = this.unit_num
                          })
                      })
                  }
                  return true;
              }
              that.$message.error(response.info);
          }).catch(error => {
              console.error(error, 'error')
          })
      }
  }
}
</script>
<style lang="scss" scoped>
.mr12{
  margin-right: 12px;
}
::v-deep .el-table__body-wrapper{
  height: 300px;
  overflow-y: auto;
}
</style>