index.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. <template>
  2. <div class="pageIndexClass">
  3. <div class="content">
  4. <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" :selectConfig="selectConfig"
  5. highlight-current-row :action-list="[
  6. {
  7. text: '添加模板',
  8. action: () => openModal(),
  9. },
  10. ]" @get-list="getList">
  11. </byTable>
  12. </div>
  13. <el-dialog :title="modalType == 'add' ? '新增' : '编辑'" v-if="dialogVisible" v-model="dialogVisible" width="800" v-loading="loadingOperation">
  14. <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
  15. <template #templateContent>
  16. <div style="width: 100%">
  17. <Editor :value="formData.data.templateContent" @updateValue="updateContent" />
  18. </div>
  19. </template>
  20. </byForm>
  21. <template #footer>
  22. <el-button @click="dialogVisible = false" size="default">取 消</el-button>
  23. <el-button type="primary" @click="submitForm()" size="default">确 定</el-button>
  24. </template>
  25. </el-dialog>
  26. </div>
  27. </template>
  28. <script setup>
  29. import { ElMessage, ElMessageBox } from "element-plus";
  30. import byTable from "@/components/byTable/index";
  31. import byForm from "@/components/byForm/index";
  32. import { computed, ref } from "vue";
  33. import Editor from "@/components/Editor/index.vue";
  34. const { proxy } = getCurrentInstance();
  35. const loading = ref(false);
  36. const companyList = ref({});
  37. const sourceList = ref({
  38. data: [],
  39. pagination: {
  40. total: 0,
  41. pageNum: 1,
  42. pageSize: 10,
  43. corporationId: "",
  44. keyword: "",
  45. },
  46. });
  47. const selectConfig = computed(() => {
  48. return [
  49. {
  50. label: "公司名称",
  51. prop: "corporationId",
  52. data: companyList.value,
  53. },
  54. ];
  55. });
  56. const config = computed(() => {
  57. return [
  58. {
  59. attrs: {
  60. label: "公司名称",
  61. prop: "corporationName",
  62. },
  63. },
  64. {
  65. attrs: {
  66. label: "模板名称",
  67. prop: "templateName",
  68. },
  69. },
  70. {
  71. attrs: {
  72. label: "联系人",
  73. prop: "contactName",
  74. },
  75. },
  76. {
  77. attrs: {
  78. label: "联系电话",
  79. prop: "contactNumber",
  80. },
  81. },
  82. {
  83. attrs: {
  84. label: "操作",
  85. width: "120",
  86. align: "center",
  87. },
  88. renderHTML(row) {
  89. return [
  90. {
  91. attrs: {
  92. label: "修改",
  93. type: "primary",
  94. text: true,
  95. },
  96. el: "button",
  97. click() {
  98. update(row);
  99. },
  100. },
  101. {
  102. attrs: {
  103. label: "删除",
  104. type: "primary",
  105. text: true,
  106. },
  107. el: "button",
  108. click() {
  109. ElMessageBox.confirm(
  110. "此操作将永久删除该数据, 是否继续?",
  111. "提示",
  112. {
  113. confirmButtonText: "确定",
  114. cancelButtonText: "取消",
  115. type: "warning",
  116. }
  117. ).then(() => {
  118. proxy
  119. .post("/contractTemplate/delete", {
  120. id: row.id,
  121. })
  122. .then(() => {
  123. ElMessage({
  124. message: "删除成功",
  125. type: "success",
  126. });
  127. getList();
  128. });
  129. });
  130. },
  131. },
  132. ];
  133. },
  134. },
  135. ];
  136. });
  137. const getDict = () => {
  138. proxy.post("/corporation/page", { pageNum: 1, pageSize: 999 }).then((res) => {
  139. companyList.value = res.rows.map((item) => {
  140. return {
  141. label: item.name,
  142. value: item.id,
  143. };
  144. });
  145. });
  146. };
  147. const getList = async (req) => {
  148. sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  149. loading.value = true;
  150. proxy
  151. .post("/contractTemplate/page", sourceList.value.pagination)
  152. .then((res) => {
  153. sourceList.value.data = res.rows;
  154. sourceList.value.pagination.total = res.total;
  155. setTimeout(() => {
  156. loading.value = false;
  157. }, 200);
  158. });
  159. };
  160. getDict();
  161. getList();
  162. const modalType = ref("add");
  163. const dialogVisible = ref(false);
  164. const loadingOperation = ref(false);
  165. const submit = ref(null);
  166. const formData = reactive({
  167. data: {
  168. countryId: "44",
  169. },
  170. });
  171. const formOption = reactive({
  172. inline: true,
  173. labelWidth: 100,
  174. itemWidth: 100,
  175. rules: [],
  176. });
  177. const formConfig = computed(() => {
  178. return [
  179. {
  180. label: "基础信息",
  181. },
  182. {
  183. type: "input",
  184. prop: "templateName",
  185. label: "模板名称",
  186. itemType: "text",
  187. placeholder: "请输入模板名称",
  188. },
  189. {
  190. type: "select",
  191. label: "公司名称",
  192. prop: "corporationId",
  193. data: companyList.value,
  194. },
  195. {
  196. label: "联系信息",
  197. },
  198. {
  199. type: "input",
  200. prop: "contactName",
  201. label: "业务联系人",
  202. itemType: "text",
  203. placeholder: "请输入联系人",
  204. itemWidth: 30,
  205. },
  206. {
  207. type: "input",
  208. prop: "contactNumber",
  209. label: " ",
  210. itemType: "text",
  211. placeholder: "请输入联系电话",
  212. itemWidth: 70,
  213. },
  214. {
  215. type: "slot",
  216. slotName: "templateContent",
  217. label: "合同模板",
  218. },
  219. ];
  220. });
  221. let rules = ref({
  222. templateName: [
  223. { required: true, message: "请输入模板名称", trigger: "blur" },
  224. ],
  225. corporationId: [{ required: true, message: "请选择公司", trigger: "change" }],
  226. });
  227. const openModal = () => {
  228. modalType.value = "add";
  229. formData.data = {
  230. templateContent: "",
  231. };
  232. loadingOperation.value = false;
  233. dialogVisible.value = true;
  234. };
  235. const submitForm = () => {
  236. submit.value.handleSubmit(() => {
  237. loadingOperation.value = true;
  238. proxy.post("/contractTemplate/" + modalType.value, formData.data).then(
  239. () => {
  240. ElMessage({
  241. message: modalType.value == "add" ? "添加成功" : "编辑成功",
  242. type: "success",
  243. });
  244. dialogVisible.value = false;
  245. getList();
  246. },
  247. (err) => {
  248. console.log(err);
  249. loadingOperation.value = false;
  250. }
  251. );
  252. });
  253. };
  254. const update = (row) => {
  255. modalType.value = "edit";
  256. loadingOperation.value = true;
  257. proxy.post("/contractTemplate/detail", { id: row.id }).then((res) => {
  258. formData.data = res;
  259. loadingOperation.value = false;
  260. dialogVisible.value = true;
  261. });
  262. };
  263. const updateContent = (val) => {
  264. formData.data.templateContent = val;
  265. };
  266. </script>
  267. <style lang="scss" scoped>
  268. .tenant {
  269. padding: 20px;
  270. }
  271. </style>