* Fix add Interpreter error

ui/src/layouts/MainLayout/components/FormInterpreter.vue

@@ -3,7 +3,8 @@
     :showModal="showModalRef"
     @onCancel="cancel"
     @onOk="submit"
-    :title="info == undefined ? t('create_interpreter') : t('edit_interpreter')"
+    :title="info == undefined ? t('create_interpreter') : t('edit_interpreter')" 
+    :contentStyle="{width: '500px'}"
   >
     <Form class="form-interpreter" labelCol="6" wrapperCol="16">
       <FormItem
@@ -57,49 +58,14 @@
             {{ t("find_to_select", { num: interpreterInfos.length }) }}
           </option>
           <option
-            v-for="item in languages"
-            :key="item.value"
-            :value="item.value"
+            v-for="item in interpreterInfos"
+            :key="item.path"
+            :value="item.path"
           >
-            {{ languageMap[item.value].name }}
+            {{ item.info }}
           </option>
         </select>
       </FormItem>
-
-    <a-form-item :wrapper-col="{ span: wrapperCol.span, offset: labelCol.span }">
-      <a-select v-if="interpreterInfos.length > 0" v-model:value="selectedInterpreter" @change="selectInterpreter">
-        <a-select-option value="">{{ t('find_to_select', {num: interpreterInfos.length})}}</a-select-option>
-        <a-select-option v-for="item in interpreterInfos" :key="item.path" :value="item.path">
-          {{ item.info }}
-        </a-select-option>
-      </a-select>
-    </a-form-item>
-
-    <a-form-item :wrapper-col="{ span: wrapperCol.span, offset: labelCol.span }"
-                 :class="{'t-dir-right': !isWin}" class="t-right">
-      <a-button type="primary" @click.prevent="save" class="t-btn-gap">{{ t('save') }}</a-button> &nbsp;
-      <a-button @click="reset" class="t-btn-gap">{{ t('reset') }}</a-button>
-    </a-form-item>
-      <FormItem name="name" :label="t('name')" :info="validateInfos.name">
-        <input v-model="modelRef.name" class="form-control" />
-      </FormItem>
-      <FormItem name="url" :label="t('zentao_url')" :info="validateInfos.url">
-        <input v-model="modelRef.url" class="form-control" />
-      </FormItem>
-      <FormItem
-        name="username"
-        :label="t('username')"
-        :info="validateInfos.username"
-      >
-        <input v-model="modelRef.username" class="form-control" />
-      </FormItem>
-      <FormItem
-        name="password"
-        :label="t('password')"
-        :info="validateInfos.password"
-      >
-        <input v-model="modelRef.password" class="form-control" />
-      </FormItem>
     </Form>
   </ZModal>
 </template>
@@ -107,13 +73,9 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
-import { ZentaoData } from "@/store/zentao";
-import { ScriptData } from "@/views/script/store";
-import { unitTestTypesDef, ztfTestTypesDef } from "@/utils/const";
 import {
   computed,
   defineExpose,
-  onMounted,
   withDefaults,
   ref,
   defineProps,
@@ -124,60 +86,88 @@ import { useForm } from "@/utils/form";
 import Form from "./Form.vue";
 import FormItem from "./FormItem.vue";
 import { StateType } from "@/views/site/store";
-import {getLangSettings} from "@/views/interpreter/service";
+import { getLangSettings } from "@/views/interpreter/service";
+import { getLangInterpreter } from "@/views/interpreter/service";
+import { getElectron } from "@/utils/comm";
 
 export interface FormSiteProps {
   show?: boolean;
-  id?: number;
+  info?: any;
 }
 const { t } = useI18n();
-
-const languages = ref<any>({})
-    const languageMap = ref<any>({})
-
-    const getInterpretersA = async () => {
-      const data = await getLangSettings()
-      languages.value = data.languages
-      languageMap.value = data.languageMap
-    }
+const isElectron = ref(getElectron());
 
 const props = withDefaults(defineProps<FormSiteProps>(), {
   show: false,
-  id: 0
+  info: {},
 });
 
 const showModalRef = computed(() => {
   return props.show;
 });
+
+const languages = ref<any>({})
+const languageMap = ref<any>({})
+const interpreterInfos = ref([]);
+
+const getInterpretersA = async () => {
+    const data = await getLangSettings();
+    languages.value = data.languages;
+    languageMap.value = data.languageMap;
+};
+getInterpretersA();
+
 const store = useStore<{ Site: StateType }>();
-const get = async (id: number): Promise<void> => {
-  await store.dispatch("Site/get", id);
+
+const selectedInterpreter = ref("");
+const selectInterpreter = async () => {
+  console.log("selectInterpreter", selectedInterpreter.value);
+  modelRef.value.path = selectedInterpreter.value;
+};
+
+const selectLang = async (item) => {
+  console.log("selectLang", modelRef.value.lang);
+
+  modelRef.value.path = "";
+  selectedInterpreter.value = "";
+
+  if (modelRef.value.lang === "") {
+    interpreterInfos.value = [];
+    return;
+  }
+
+  interpreterInfos.value = await getLangInterpreter(modelRef.value.lang);
+  if (interpreterInfos.value == null) interpreterInfos.value = [];
+  console.log(interpreterInfos.value);
 };
 
 watch(props, () => {
-        get(props.id);
-})
-get(props.id);
+  console.log("watch formInterpreter", props);
+  if (props.info.value == undefined) {
+    modelRef.value = {
+      id: 0,
+      lang: "",
+      path: "",
+    };
+  } else {
+    modelRef.value.id = props.info.value.id;
+    modelRef.value.path = props.info.value.path;
+    modelRef.value.lang = props.info.value.lang;
+  }
+});
+
 const cancel = () => {
   emit("cancel", {});
 };
 
-const modelRef = computed(() => store.state.Site.detailResult);
+const modelRef = ref<any>({
+  id: 0,
+  lang: "",
+  path: "",
+});
 const rulesRef = ref({
-  name: [{ required: true, msg: t("pls_name") }],
-  url: [
-    {
-      required: true,
-      msg: t("pls_zentao_url"),
-    },
-    {
-      regex:
-        /(http?|https):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/i,
-      msg: t("pls_zentao_url"),
-    },
-  ],
-  username: [{ required: true, msg: t("pls_username") }],
-  password: [{ required: true, msg: t("pls_password") }],
+  lang: [{ required: true, msg: t("pls_lang") }],
+  path: [{ required: true, msg: t("pls_input_interpreter_path") }],
 });
 const { validate, reset, validateInfos } = useForm(modelRef, rulesRef);
 
@@ -194,16 +184,14 @@ const submit = () => {
 };
 
 const clearFormData = () => {
-  modelRef.value = {};
+  console.log("clear");
+  modelRef.value.path = "";
+  modelRef.value.lang = "";
+  selectedInterpreter.value = "";
+  interpreterInfos.value = [];
 };
 
 defineExpose({
   clearFormData,
 });
 </script>
-
-<style lang="less" scoped>
-.form-interpreter {
-  min-width: 500px;
-}
-</style>

ui/src/layouts/MainLayout/components/FormNode.vue

@@ -4,6 +4,7 @@
     @onCancel="cancel"
     @onOk="submit"
     :title="t('create')"
+    :contentStyle="{width: '300px'}"
   >
     <Form labelCol="6" wrapperCol="16">
       <FormItem name="name" :label="t('name')" :info="validateInfos.name">

ui/src/layouts/MainLayout/components/FormWorkspace.vue

@@ -4,6 +4,7 @@
     @onCancel="cancel"
     @onOk="submit"
     :title="t('create_workspace')"
+    :contentStyle="{width: '500px'}"
   >
     <Form labelCol="6" wrapperCol="16">
       <FormItem name="name" :label="t('name')" :info="validateInfos.name">

ui/src/layouts/MainLayout/components/Modal.vue

@@ -120,19 +120,12 @@ defineExpose({
 
 :deep(.modal-content) {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  margin: 0 1rem;
   padding: 1rem;
   border-radius: 0.25rem;
   background: #fff;
-  justify-content: space-between;
 }
 
 .modal-title {
-  margin: 0 2rem 0 0;
-  min-width: 300px;
-  justify-content: space-between;
   font-size: 1.1rem;
   font-weight: 700;
 }
@@ -141,8 +134,7 @@ defineExpose({
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
-  border: 0 solid #e2e8f0;
-  margin-left: 10px;
+  border-width: 0;
   background-color: transparent;
   font-size: 1rem;
   cursor: pointer;
@@ -152,24 +144,13 @@ defineExpose({
 .modal-action {
   display: flex;
   justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  padding: 0 0 0;
-}
-
-.dark-mode div::v-deep .modal-content {
-  border-color: #2d3748;
-  background-color: #1a202c;
 }
 
 .btn-modal {
-  border: 0 solid #e2e8f0;
+  border-width: 0;
   margin-left: 10px;
-  text-transform: none;
-  font-size: 100%;
   cursor: pointer;
   padding: 0.25rem 0.5rem;
-  border-width: 1px;
   border-radius: 0.25rem;
 }
 </style>

ui/src/layouts/MainLayout/components/TabPageSettings.vue

@@ -32,10 +32,10 @@
       </template>
     </Table>
 
-    <FormSite
+    <FormInterpreter
       :show="showCreateInterpreterModal"
-      :id="editId"
-      @submit="createSite"
+      :info="editInfo"
+      @submit="createInterpreter"
       @cancel="modalClose"
       ref="formInterpreter"
     />
@@ -61,18 +61,18 @@ import {
 import { useStore } from "vuex";
 import { StateType } from "@/views/site/store";
 import { momentUtcDef } from "@/utils/datetime";
-import { ZentaoData } from "@/store/zentao";
 import Table from "./Table.vue";
 import notification from "@/utils/notification";
 import Modal from "@/utils/modal";
 import Button from "./Button.vue";
-import FormSite from "./FormSite.vue";
 import LanguageSettings from "./LanguageSettings.vue";
-import { getLangSettings } from "@/views/interpreter/service";
+import {getLangInterpreter, saveInterpreter} from "@/views/interpreter/service";
 import {
   listInterpreter,
   removeInterpreter,
 } from "@/views/interpreter/service";
+import FormInterpreter from "./FormInterpreter.vue";
+import { getLangSettings } from "@/views/interpreter/service";
 
 const props = defineProps<{
   tab: PageTab;
@@ -84,7 +84,7 @@ const momentUtc = momentUtcDef;
 let interpreters = ref<any>([]);
 let interpreter = reactive<any>({});
 
-const editId = ref(0);
+const editInfo = ref(0);
 
 onMounted(() => {
   console.log("onMounted");
@@ -132,7 +132,6 @@ const setColumns = () => {
 };
 setColumns();
 
-const zentaoStore = useStore<{ zentao: ZentaoData }>();
 const store = useStore<{ Site: StateType }>();
 const showCreateInterpreterModal = ref(false);
 
@@ -160,12 +159,12 @@ list();
 
 const create = () => {
   console.log("create");
-  editId.value = 0;
+  editInfo.value = {};
   showCreateInterpreterModal.value = true;
 };
-const edit = (id) => {
-  console.log("edit", id);
-  editId.value = id;
+const edit = (item) => {
+  console.log("edit", item.value.id);
+  editInfo.value = item;
   showCreateInterpreterModal.value = true;
 };
 
@@ -173,8 +172,8 @@ const remove = (item) => {
   Modal.confirm({
     title: "",
     content: t("confirm_delete", {
-      name: item.value.name,
-      typ: t("zentao_site"),
+      name: languageMap.value[item.value.lang].name,
+      typ: t("script_lang"),
     }),
     okText: t("confirm"),
     cancelText: t("cancel"),
@@ -189,65 +188,18 @@ const modalClose = () => {
   showCreateInterpreterModal.value = false;
 };
 const formInterpreter = ref(null);
-const createSite = (formData) => {
-  store.dispatch("Site/save", formData).then((response) => {
-    if (response) {
-      formInterpreter.value.clearFormData();
-      notification.success({ message: t("save_success") });
-      showCreateInterpreterModal.value = false;
-    }
-  });
+const createInterpreter = (formData) => {
+    saveInterpreter(formData).then((json) => {
+        if (json.code === 0) {
+        formInterpreter.value.clearFormData();
+        notification.success({ message: t("save_success") });
+        showCreateInterpreterModal.value = false;
+        list();
+        }
+  })
 };
 </script>
 
 <style>
-.site-search {
-  display: flex;
-  justify-content: flex-end;
-}
-.form-control {
-  width: 100%;
-  color: #495057;
-  background-color: #fff;
-  border: 1px solid #ced4da;
-  border-radius: 0.25rem;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-.z-form-item-label {
-  font-weight: 400;
-  color: #212529;
-  text-align: left;
-  box-sizing: border-box;
-  display: inline-block;
-  position: relative;
-  width: 100%;
-  padding-right: 15px;
-  padding-left: 15px;
-  padding-top: calc(0.375rem + 1px);
-  padding-bottom: calc(0.375rem + 1px);
-  margin-bottom: 0;
-  line-height: 1.5;
-}
-.z-form-item {
-  display: flex;
-  align-items: center;
-  word-break: keep-all;
-}
-.form-control:focus {
-  color: #495057;
-  background-color: #fff;
-  border-color: #80bdff;
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 23%);
-}
-.tab-setting-btn {
-  border: none;
-  background: none;
-  color: #1890ff;
-  border-style: hidden !important;
-}
-.t-card-toolbar {
-  display: flex;
-  justify-content: space-between;
-}
+
 </style>
\ No newline at end of file

ui/src/layouts/MainLayout/style/main.css

@@ -60,37 +60,3 @@ button {
 .z-border{
     font-weight: bolder;
 }
-.z-form-control {
-    width: 100%;
-    color: #495057;
-    background-color: #fff;
-    border: 1px solid #ced4da;
-    border-radius: 0.25rem;
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  }
-  .z-form-item-label {
-    font-weight: 400;
-    color: #212529;
-    text-align: left;
-    box-sizing: border-box;
-    display: inline-block;
-    position: relative;
-    width: 100%;
-    padding-right: 15px;
-    padding-left: 15px;
-    padding-top: calc(0.375rem + 1px);
-    padding-bottom: calc(0.375rem + 1px);
-    margin-bottom: 0;
-    line-height: 1.5;
-  }
-  .z-form-item {
-    display: flex;
-    align-items: center;
-  }
-  .z-form-control:focus {
-    color: #495057;
-    background-color: #fff;
-    border-color: #80bdff;
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
-  }
\ No newline at end of file