view.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <template>
  2. <el-dialog
  3. title="公积金信息"
  4. v-model="visible"
  5. :width="width"
  6. append-to-body
  7. draggable
  8. @close="close"
  9. class="dialog-form"
  10. :close-on-click-modal = "false"
  11. >
  12. <!-- 功能按钮 -->
  13. <div style="padding: 8px 24px 16px 24px">
  14. <el-form size="small" label-width="120px" v-model="form">
  15. <el-row :gutter="30">
  16. <el-col :span="12">
  17. <el-form-item label="客户名称">
  18. <div>{{ form.companyName }}</div>
  19. </el-form-item>
  20. </el-col>
  21. <el-col :span="12">
  22. <el-form-item label="服务状态">
  23. <el-select
  24. v-model="form.status"
  25. :disabled="isDisabled"
  26. placeholder="请选择"
  27. >
  28. <el-option
  29. v-for="item in selectStatus"
  30. :key="item.value"
  31. :value="item.value"
  32. :label="item.label"
  33. />
  34. </el-select>
  35. </el-form-item>
  36. </el-col>
  37. </el-row>
  38. </el-form>
  39. </div>
  40. <div class="form-btns-container" style="height: 40px">
  41. <el-button size="small" style="float: right" icon="close" @click="close">
  42. 取消</el-button
  43. >
  44. </div>
  45. <el-image-viewer
  46. v-if="showViewer"
  47. :url-list="currentFileList"
  48. @close="closeImages"
  49. :initial-index="showIndex"
  50. />
  51. </el-dialog>
  52. </template>
  53. <script setup>
  54. import {
  55. getOnceDetail,
  56. saveOnceDetail,
  57. updateDetail,
  58. } from "@/api/business/crm/serviceWorkOrder";
  59. import { ref } from "vue";
  60. const { proxy } = getCurrentInstance();
  61. const visible = ref(false);
  62. const width = ref(800);
  63. const selections = ref([]);
  64. const currentSource = ref(null);
  65. const showViewer = ref(false);
  66. const props = defineProps({
  67. getList: {
  68. type: Function,
  69. default: () => {},
  70. },
  71. });
  72. const selectStatus = ref([
  73. {
  74. label: "未开始",
  75. value: 0,
  76. color: "#fff",
  77. },
  78. {
  79. label: "进行中",
  80. value: 1,
  81. color: "#FFB836",
  82. },
  83. {
  84. label: "已完成",
  85. value: 3,
  86. color: "#2FCB81",
  87. },
  88. ]);
  89. const { getList } = toRefs(props);
  90. const total = ref(0);
  91. const employeeEmptyData = {
  92. id: null,
  93. title: "",
  94. remark: "",
  95. employeeName: "",
  96. departmentName: "",
  97. idCardImage: "",
  98. idCardImageBack: "",
  99. idiograph: "",
  100. details: [],
  101. editStatus: true,
  102. };
  103. const form = ref({});
  104. const emptyForm = {
  105. housingFundConfirm: {},
  106. housingFundDeclare: {},
  107. };
  108. function isDisabled() {
  109. return form.value.status === 3;
  110. }
  111. function open(detail) {
  112. visible.value = true;
  113. form.value = { ...emptyForm, ...detail };
  114. loadData();
  115. }
  116. function loadData() {
  117. getOnceDetail(form.value).then((res) => {
  118. form.value = { ...proxy.deepClone(emptyForm), ...res.data };
  119. });
  120. }
  121. function close() {
  122. visible.value = false;
  123. reset();
  124. }
  125. function reset() {
  126. form.value = proxy.deepClone(emptyForm);
  127. }
  128. function handleSave() {
  129. proxy.$modal
  130. .confirm("确认保存么?")
  131. .then(() => {
  132. const saveValue = proxy.deepClone(form.value);
  133. saveOnceDetail(saveValue).then((res) => {
  134. proxy.$modal.msgSuccess("保存成功");
  135. reset();
  136. close();
  137. getList.value();
  138. });
  139. })
  140. .catch((err) => {
  141. proxy.$modal.msg("取消保存");
  142. });
  143. }
  144. // 暴露给父组件的方法
  145. defineExpose({
  146. open,
  147. });
  148. </script>