service.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <template>
  2. <el-dialog title="修改服务时间" :visible.sync="open" width="800px" append-to-body>
  3. <el-form ref="form" :model="form" :rules="rules" label-width="140px">
  4. <el-form-item label="服务时间段" prop="serviceTime">
  5. <el-input @focus="getLayDate" id="inputUI" v-model="form.serviceTime"></el-input>
  6. </el-form-item>
  7. </el-form>
  8. <div slot="footer" class="dialog-footer">
  9. <el-button type="primary" :disabled="disabled" @click="submitForm">确 定</el-button>
  10. <el-button @click="cancel">取 消</el-button>
  11. </div>
  12. </el-dialog>
  13. </template>
  14. <script>
  15. import {auditEntApi,getEntInfoByIdApi,updateServiceTimeApi} from "@/api/admin/ent/ent"
  16. export default {
  17. data () {
  18. return {
  19. open: false,
  20. disabled: false,
  21. type: '',
  22. form: {
  23. serviceTime: "",
  24. endDate: '',
  25. startDate: ''
  26. },
  27. rules: {
  28. serviceTime: [
  29. {required: true, message: '请设置服务时间段', trigger: 'change'}
  30. ]
  31. }
  32. }
  33. },
  34. methods: {
  35. init(id) {
  36. this.open = true;
  37. this.form.id = id;
  38. if(this.form.id) {
  39. this.getData()
  40. }
  41. },
  42. getData() {
  43. getEntInfoByIdApi(this.form.id).then(res => {
  44. this.form = res.data || {}
  45. if(this.form.startDate && this.form.endDate) {
  46. this.form.serviceTime = this.form.startDate + ' 至 ' + this.form.endDate
  47. }else {
  48. this.form.serviceTime = ""
  49. }
  50. })
  51. },
  52. submitForm() {
  53. this.$refs.form.validate(valid => {
  54. if (valid) {
  55. this.disabled = true
  56. if(this.form.serviceTime) {
  57. this.form.startDate = this.form.serviceTime.split('至')[0].trim()
  58. this.form.endDate = this.form.serviceTime.split('至')[1].trim()
  59. }else {
  60. this.form.startDate = ''
  61. this.form.endDate = ''
  62. }
  63. updateServiceTimeApi(this.form).then(res => {
  64. this.disabled = false;
  65. if(res.code == 200) {
  66. this.$message({
  67. message: '服务时间修改成功',
  68. type: 'success'
  69. });
  70. }
  71. this.open = false;
  72. this.$emit('refreshData');
  73. })
  74. }
  75. })
  76. },
  77. cancel() {
  78. this.open = false
  79. },
  80. getLayDate(){
  81. let _self = this
  82. laydate.render({
  83. elem: '#inputUI', // 输入框的id属性,用来绑定到dom
  84. type: 'date',
  85. range: true,
  86. done: (value) => {
  87. _self.form.serviceTime = value; // 将选中的值赋给组件中的变量
  88. }
  89. })
  90. }
  91. },
  92. watch: {
  93. "form.serviceTime"(val) {
  94. if(val) {
  95. let arr = val.split('至')
  96. this.form.startDate = arr[0].trim()
  97. this.form.endDate = arr[1].trim()
  98. }else {
  99. this.form.startDate = ''
  100. this.form.endDate = ''
  101. }
  102. }
  103. }
  104. }
  105. </script>
  106. <style>
  107. </style>