label-add-dialog.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <script>
  2. import { add, type } from "@/api/material/label";
  3. export default {
  4. name: "AddDialog",
  5. data() {
  6. const initDict = {
  7. labelType: [
  8. { label: "类别", value: 1 },
  9. { label: "标签", value: 2 },
  10. ],
  11. parentId: [],
  12. };
  13. const initColumns = [
  14. {
  15. type: "select",
  16. prop: "labelType",
  17. label: "标签类别",
  18. required: true,
  19. },
  20. {
  21. type: "select",
  22. prop: "parentId",
  23. label: "上级类别",
  24. required: false,
  25. },
  26. {
  27. type: "text",
  28. prop: "name",
  29. label: "名称",
  30. required: true,
  31. },
  32. {
  33. type: "textarea",
  34. prop: "description",
  35. label: "说明",
  36. required: false,
  37. },
  38. ];
  39. const initForm = () => {
  40. let form = {};
  41. initColumns.forEach((item) => (form[item.prop] = ""));
  42. return form;
  43. };
  44. return {
  45. loading: false,
  46. dialogFormVisible: false,
  47. form: initForm(),
  48. columns: initColumns,
  49. dict: initDict,
  50. };
  51. },
  52. methods: {
  53. fetchType() {
  54. this.loading = true;
  55. type()
  56. .then((res) => {
  57. this.dict.parentId = res.map((item) => ({
  58. value: item.id,
  59. label: item.name,
  60. }));
  61. })
  62. .finally(() => {
  63. this.loading = false;
  64. });
  65. },
  66. fetchItem() {
  67. this.dialogFormVisible = true;
  68. this.fetchType();
  69. },
  70. onSubmit(formName) {
  71. this.$refs[formName].validate((valid) => {
  72. if (valid) {
  73. this.loading = true;
  74. if (this.form.labelType === 1) this.form.parentId = 0;
  75. add(this.form)
  76. .then((res) => {
  77. let { code } = res;
  78. if (code === 200) {
  79. this.dialogFormVisible = false;
  80. this.$message.success("success");
  81. this.$parent.$children[0].fetchList();
  82. this.form = {};
  83. }
  84. })
  85. .finally(() => {
  86. this.loading = false;
  87. });
  88. } else {
  89. console.log("error submit!!");
  90. return false;
  91. }
  92. });
  93. },
  94. },
  95. created() {
  96. },
  97. };
  98. </script>
  99. <template>
  100. <el-dialog destroy-on-close title="新增" :visible.sync="dialogFormVisible">
  101. <el-form :model="form" ref="addForm" label-position="top">
  102. <el-form-item prop="labelType" label="标签类别" required>
  103. <el-select v-model="form.labelType">
  104. <el-option
  105. v-for="item in dict.labelType"
  106. :key="item.value"
  107. :label="item.label"
  108. :value="item.value"
  109. ></el-option>
  110. </el-select>
  111. </el-form-item>
  112. <el-form-item
  113. v-if="form.labelType === 2"
  114. prop="parentId"
  115. label="上级类别"
  116. :required="form.labelType === 2"
  117. >
  118. <el-select v-model="form.parentId">
  119. <el-option
  120. v-for="item in dict.parentId"
  121. :key="item.value"
  122. :label="item.label"
  123. :value="item.value"
  124. ></el-option>
  125. </el-select>
  126. </el-form-item>
  127. <el-form-item prop="name" label="名称" required>
  128. <el-input v-model="form.name"></el-input>
  129. </el-form-item>
  130. <el-form-item prop="description" label="说明">
  131. <el-input
  132. v-model="form.description"
  133. type="textarea"
  134. autosize
  135. ></el-input>
  136. </el-form-item>
  137. </el-form>
  138. <div slot="footer">
  139. <el-button :disabled="loading" @click="dialogFormVisible = false"
  140. >取 消</el-button
  141. >
  142. <el-button type="primary" :disabled="loading" @click="onSubmit('addForm')"
  143. >确 定</el-button
  144. >
  145. </div>
  146. </el-dialog>
  147. </template>
  148. <style scoped></style>