lc_garage/frontend/src/view/parking/carOwner.vue

<template>
  <div>
    <el-form inline>
      <el-form-item>
        <el-input
          v-model="obtainData.owner_phone"
          :placeholder="$t.value.inputPhone"
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="obtainData.owner_name"
          :placeholder="$t.value.inputOwnerName"
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="obtainData.is_vip"
          clearable
          @change="changeVip"
        >
          <el-option
            :label="$t.value.noVip"
            :value="false"
          />
          <el-option
            :label="$t.value.isVip"
            :value="true"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="Search"
          @click="getCarOwnerList"
        >{{ $t.value.Search }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="Plus"
          @click="openCarOwner($t.value.AddCarOwner,'')"
        >{{ $t.value.new }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="carOwnerList"
      height="605"
    >
      <el-table-column
        :label="$t.value.Name"
        align="center"
        width="180"
        prop="owner_name"
      />
      <el-table-column
        :label="$t.value.Surname"
        align="center"
        width="180"
        prop="owner_surname"
      />
      <el-table-column
        :label="$t.value.Mobile_Phone"
        align="center"
        prop="owner_phone"
      />
      <el-table-column
        :label="$t.value.Email"
        align="center"
      />
      <el-table-column
        label="vip"
        align="center"
      >
        <template #default="scope">
          <el-button
            :type="scope.row.is_vip ? 'success' : 'danger'"
            plain
          >
            {{ scope.row.is_vip ? $t.value.isVip : $t.value.noVip }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t.value.Action"
        align="center"
      >
        <template #default="scope">
          <!--          <el-tooltip content="Bottom center" placement="bottom" effect="light">-->
          <!--            <el-button text type="primary" icon="MessageBox">备注</el-button>-->
          <!--          </el-tooltip>-->
          <el-button
            text
            type="primary"
            icon="MessageBox"
          >{{ $t.value.Remarks }}</el-button>
          <el-button
            icon="edit"
            text
            type="primary"
            @click="openCarOwner($t.value.editOwner, scope.row)"
          >{{ $t.value.modify }}</el-button>
          <el-button
            icon="delete"
            text
            type="primary"
            @click="deleteCarOwner(scope.row)"
          >{{ $t.value.remove }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%;display: flex;justify-content: end">
      <el-pagination
        :current-page="obtainData.page"
        :page-size="obtainData.pageSize"
        :page-sizes="[10, 30, 50, 100]"
        :total="carOwnerTotal"
        layout="total, sizes, prev, pager, next, jumper"
        style="padding-right: 10px"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <el-dialog
      v-model="carOwnerShow"
      :title="carOwnerTitle"
      width="650"
    >
      <el-form
        label-width="120"
        size="large"
      >
        <el-form-item :label="$t.value.Name + '：'">
          <el-input v-model="carOwnerData.owner_name" />
        </el-form-item>
        <el-form-item :label="$t.value.Surname + '：'">
          <el-input v-model="carOwnerData.owner_surname" />
        </el-form-item>
        <el-form-item :label="$t.value.Mobile_Phone + '：'">
          <el-input v-model="carOwnerData.owner_phone" />
        </el-form-item>
        <el-form-item label="vip：">
          <el-radio-group
            v-model="carOwnerData.is_vip"
            size="large"
            fill="#409eff"
          >
            <el-radio-button
              :label="$t.value.no"
              :value="false"
            />
            <el-radio-button
              :label="$t.value.yes"
              :value="true"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="'vip' + $t.value.Expire_Time + '：'">
          <el-date-picker
            v-model="carOwnerData.vip_expire_time"
            type="date"
            :placeholder="$t.value.currentDate"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          size="large"
          @click="carOwnerShow = false"
        >{{$t.value.Cancel}}</el-button>
        <el-button
          type="primary"
          size="large"
          @click="carOwnerOperation"
        >{{$t.value.Confirm}}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { obtainCarOwnerList, addCarOwner, editCarOwner, removeCarOwner } from '@/api/carOwner'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { t } from '@/lang/index.js'
const carOwnerList = reactive([1])
const carOwnerShow = ref(false)
const carOwnerTitle = ref('')
const carOwnerData = reactive({
  id: 0,
  owner_name: '',
  owner_surname: '',
  owner_phone: '',
  is_vip: false,
  vip_expire_time: ''
})
const changeVip = (val) => {
  obtainData.is_vip = val
  getCarOwnerList()
}
const obtainData = reactive({
  owner_name: '',
  owner_phone: '',
  is_vip: true,
  page: 1,
  pageSize: 10
})

const carOwnerTotal = ref(0)

const handleCurrentChange = (val) => {
  obtainData.page = val
  getCarOwnerList()
}

const handleSizeChange = (val) => {
  obtainData.pageSize = val
  obtainData.page = 1
  getCarOwnerList()
}
const getCarOwnerList = () => {
  obtainCarOwnerList(obtainData).then(res => {
    if (res.code === 0) {
      carOwnerList.length = 0
      carOwnerList.push(...res.data.list)
      carOwnerTotal.value = res.data.total
    }
  })
}

const deleteCarOwner = (data) => {
  ElMessageBox.confirm(
    t.value.delOwnerTip,
    t.value.tip,
    {
      confirmButtonText: t.value.Confirm,
      cancelButtonText: t.value.Cancel,
      type: 'warning',
    }
  )
    .then(() => {
      removeCarOwner(data.ID).then(res => {
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: t.value.deleteSuccess,
          })
          getCarOwnerList()
        } else {
          ElMessage({
            type: 'error',
            message: t.value.deleteFailed,
          })
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: t.value.cancelDelete,
      })
    })
}

const openCarOwner = (head, data) => {
  carOwnerShow.value = true
  carOwnerTitle.value = head
  if (head === t.value.AddCarOwner) {
    carOwnerData.is_vip = false
    carOwnerData.owner_surname = ''
    carOwnerData.owner_name = ''
    carOwnerData.owner_phone = ''
    carOwnerData.vip_expire_time = ''
  } else {
    carOwnerData.id = data.ID
    carOwnerData.is_vip = data.is_vip
    carOwnerData.owner_surname = data.owner_surname
    carOwnerData.owner_phone = data.owner_phone
    carOwnerData.owner_name = data.owner_name
    carOwnerData.vip_expire_time = data.vip_expire_time
  }
}

const carOwnerOperation = async() => {
  if (carOwnerTitle.value === t.value.AddCarOwner) {
    await addCarOwner(carOwnerData).then(res => {
      if (res.code === 0) {
        ElMessage.success(t.value.addSuccess)
        carOwnerShow.value = false
        getCarOwnerList()
      } else {
        ElMessage.error(t.value.addFail)
      }
    })
  } else {
    await editCarOwner(carOwnerData).then(res => {
      if (res.code === 0) {
        ElMessage.success(t.value.editSuccess)
        carOwnerShow.value = false
        getCarOwnerList()
      } else {
        ElMessage.error(t.value.editFailed)
      }
    })
  }
}

onMounted(() => {
  getCarOwnerList()
})
</script>

<style scoped lang="scss">

</style>