dataDictionary-test-detail.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <style scoped>
  2. .user-panel {
  3. margin: 10px auto;
  4. }
  5. </style>
  6. <template>
  7. <el-dialog
  8. :visible.sync="showDialog"
  9. :title="modalTitle"
  10. :modal-append-to-body="false"
  11. style="text-align:left;"
  12. @close="closeDialog"
  13. >
  14. <div class="user-panel" v-loading="loading">
  15. <el-form ref="form" :model="formModel" :rules="ruleValidate" :label-width="'100px'">
  16. <el-form-item label="名称" prop="name">
  17. <el-input v-model="formModel.name" placeholder="请输入名称" style="width:300px"></el-input>
  18. </el-form-item>
  19. <el-form-item label="数值" prop="value">
  20. <el-input v-model="formModel.value" placeholder="请输入数值" style="width:300px"></el-input>
  21. </el-form-item>
  22. <el-form-item label="显示序号" prop="sortNo">
  23. <el-input v-model="formModel.sortNo" placeholder="请输入显示序号" style="width:300px"></el-input>
  24. </el-form-item>
  25. <el-form-item label="所属目录" prop="parentId">
  26. <el-select
  27. v-model="formModel.parentId"
  28. filterable
  29. remote
  30. placeholder="请输入关键词"
  31. :remote-method="queryMenu"
  32. style="width:300px"
  33. >
  34. <template v-if="formModel.parentId!=null">
  35. <el-option
  36. :key="formModel.parentId"
  37. :label="formModel.parentName"
  38. :value="formModel.parentId"
  39. ></el-option>
  40. </template>
  41. <el-option
  42. v-for="dataDictionary in dataDictionaryListFilter"
  43. :key="dataDictionary.id"
  44. :label="dataDictionary.name"
  45. :value="dataDictionary.id"
  46. ></el-option>
  47. </el-select>
  48. </el-form-item>
  49. <el-form-item label="字典类型" prop="dataType">
  50. <el-select v-model="formModel.dataType">
  51. <el-option label="字典目录" value="1"></el-option>
  52. <el-option label="数据" value="2"></el-option>
  53. </el-select>
  54. </el-form-item>
  55. </el-form>
  56. </div>
  57. <span slot="footer" class="dialog-footer">
  58. <el-button @click="closeDialog">取 消</el-button>
  59. <el-button type="primary" @click="handleSubmit" :loading="submitting">确 定</el-button>
  60. </span>
  61. </el-dialog>
  62. </template>
  63. <script>
  64. import Constant from "@/constant";
  65. import dataDictionaryApi from "@/api/sys/dataDictionary";
  66. export default {
  67. props: ["dictId", "modalTitle"],
  68. data() {
  69. return {
  70. formModel: {},
  71. ruleValidate: {
  72. name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  73. value: [{ required: true, message: "数值不能为空", trigger: "blur" }],
  74. sortNo: [
  75. { required: true, message: "显示序号不能为空", trigger: "blur" }
  76. ],
  77. parentId: [
  78. { required: true, message: "所属目录不能为空", trigger: "blur" }
  79. ],
  80. dataType: [
  81. {
  82. required: true,
  83. message: "1-字典目录,2-数据不能为空",
  84. trigger: "blur"
  85. }
  86. ]
  87. },
  88. dataDictionaryList: [],
  89. showDialog: true,
  90. loading: false,
  91. submitting: false
  92. };
  93. },
  94. computed: {
  95. dataDictionaryListFilter() {
  96. var self = this;
  97. return self.dataDictionaryList.filter(dataDictionary => {
  98. return self.formModel.parentId != dataDictionary.id;
  99. });
  100. }
  101. },
  102. methods: {
  103. closeDialog() {
  104. this.$emit("close", false);
  105. },
  106. handleSubmit() {
  107. var self = this;
  108. this.$refs["form"].validate(valid => {
  109. if (valid) {
  110. (function() {
  111. var id = self.formModel.id;
  112. alert(self.formModel.parentId);
  113. if (id == null || id.length == 0) {
  114. return dataDictionaryApi.add(self.formModel);
  115. } else {
  116. return dataDictionaryApi.update(self.formModel);
  117. }
  118. })().then(function(response) {
  119. var jsonData = response.data;
  120. if (jsonData.result) {
  121. self.$message({
  122. message: "保存成功!",
  123. type: "success"
  124. });
  125. self.$emit("close", true);
  126. } else {
  127. self.$message({
  128. message: jsonData.message + "",
  129. type: "warning"
  130. });
  131. self.$emit("close", false);
  132. }
  133. });
  134. }
  135. });
  136. },
  137. queryMenu(keywords) {
  138. var formData = new FormData();
  139. formData.append("keywords", keywords);
  140. formData.append("dataType", "1");
  141. formData.append("excludeId", this.formModel.id);
  142. formData.append("limit", 10);
  143. return dataDictionaryApi.query(formData).then(response => {
  144. var jsonData = response.data;
  145. if (jsonData.result) {
  146. this.dataDictionaryList = jsonData.data;
  147. } else {
  148. this.$message.error(jsonData.message + "");
  149. }
  150. });
  151. }
  152. },
  153. mounted: function() {
  154. var self = this;
  155. self.loading = true;
  156. (function() {
  157. if (self.dictId.length == 0) {
  158. return dataDictionaryApi.create();
  159. } else {
  160. return dataDictionaryApi.edit(self.dictId);
  161. }
  162. })()
  163. .then(response => {
  164. var jsonData = response.data;
  165. self.loading = false;
  166. if (jsonData.result) {
  167. self.formModel = jsonData.data;
  168. } else {
  169. self.$message.error(jsonData.message + "");
  170. }
  171. })
  172. .catch(error => {
  173. self.$message.error(error + "");
  174. });
  175. }
  176. };
  177. </script>