Merge pull request #1718 from visuddhinanda/agile

system channel 禁止编辑

dashboard/src/components/api/Channel.ts

@@ -31,6 +31,7 @@ export interface IApiResponseChannelData {
   studio: IStudio;
   lang: string;
   status: number;
+  is_system: boolean;
   created_at: string;
   updated_at: string;
   role?: TRole;

dashboard/src/components/channel/ChannelTypeSelect.tsx

@@ -1,7 +1,11 @@
 import { useIntl } from "react-intl";
 import { ProFormSelect } from "@ant-design/pro-components";
 
-const ChannelTypeSelectWidget = () => {
+interface IWidget {
+  readonly?: boolean;
+}
+
+const ChannelTypeSelectWidget = ({ readonly }: IWidget) => {
   const intl = useIntl();
 
   const channelTypeOptions = [
@@ -32,6 +36,7 @@ const ChannelTypeSelectWidget = () => {
       initialValue="translation"
       width="xs"
       name="type"
+      readonly={readonly}
       allowClear={false}
       label={intl.formatMessage({ id: "channel.type" })}
       rules={[

dashboard/src/components/channel/Edit.tsx

@@ -4,13 +4,14 @@ import {
   ProFormText,
   ProFormTextArea,
 } from "@ant-design/pro-components";
-import { message } from "antd";
+import { Alert, message } from "antd";
 
 import { IApiResponseChannel } from "../../components/api/Channel";
 import { get, put } from "../../request";
 import ChannelTypeSelect from "../../components/channel/ChannelTypeSelect";
 import LangSelect from "../../components/general/LangSelect";
 import PublicitySelect from "../../components/studio/PublicitySelect";
+import { useState } from "react";
 
 interface IFormData {
   name: string;
@@ -19,6 +20,7 @@ interface IFormData {
   summary: string;
   status: number;
   studio: string;
+  isSystem: boolean;
 }
 interface IWidget {
   studioName?: string;
@@ -27,57 +29,78 @@ interface IWidget {
 }
 const EditWidget = ({ studioName, channelId, onLoad }: IWidget) => {
   const intl = useIntl();
-
+  const [isSystem, setIsSystem] = useState<Boolean>();
   return (
-    <ProForm<IFormData>
-      onFinish={async (values: IFormData) => {
-        console.log(values);
-        const res = await put(`/v2/channel/${channelId}`, values);
-        console.log(res);
-        message.success(intl.formatMessage({ id: "flashes.success" }));
-      }}
-      formKey="channel_edit"
-      request={async () => {
-        const res = await get<IApiResponseChannel>(`/v2/channel/${channelId}`);
-        if (typeof onLoad !== "undefined") {
-          onLoad(res.data);
-        }
-        return {
-          name: res.data.name,
-          type: res.data.type,
-          lang: res.data.lang,
-          summary: res.data.summary,
-          status: res.data.status,
-          studio: studioName ? studioName : "",
-        };
-      }}
-    >
-      <ProForm.Group>
-        <ProFormText
-          width="md"
-          name="name"
-          required
-          label={intl.formatMessage({ id: "channel.name" })}
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        />
-      </ProForm.Group>
+    <>
+      {isSystem ? (
+        <Alert type="warning" message={"此版本为系统建立。不能修改，删除。"} />
+      ) : (
+        <></>
+      )}
+      <ProForm<IFormData>
+        submitter={{
+          resetButtonProps: { disabled: isSystem ? true : false },
+          submitButtonProps: { disabled: isSystem ? true : false },
+        }}
+        onFinish={async (values: IFormData) => {
+          console.log(values);
+          const res = await put(`/v2/channel/${channelId}`, values);
+          console.log(res);
+          message.success(intl.formatMessage({ id: "flashes.success" }));
+        }}
+        formKey="channel_edit"
+        request={async () => {
+          const res = await get<IApiResponseChannel>(
+            `/v2/channel/${channelId}`
+          );
+          if (typeof onLoad !== "undefined") {
+            onLoad(res.data);
+          }
+          setIsSystem(res.data.is_system);
+          return {
+            name: res.data.name,
+            type: res.data.type,
+            lang: res.data.lang,
+            summary: res.data.summary,
+            status: res.data.status,
+            studio: studioName ? studioName : "",
+            isSystem: res.data.is_system,
+          };
+        }}
+      >
+        <ProForm.Group>
+          <ProFormText
+            width="md"
+            name="name"
+            readonly={isSystem ? true : false}
+            required
+            label={intl.formatMessage({ id: "channel.name" })}
+            rules={[
+              {
+                required: true,
+              },
+            ]}
+          />
+        </ProForm.Group>
 
-      <ProForm.Group>
-        <ChannelTypeSelect />
-        <LangSelect />
-      </ProForm.Group>
-      <ProForm.Group>
-        <PublicitySelect />
-      </ProForm.Group>
+        <ProForm.Group>
+          <ChannelTypeSelect readonly={isSystem ? true : false} />
+          <LangSelect readonly={isSystem ? true : false} />
+        </ProForm.Group>
+        <ProForm.Group>
+          <PublicitySelect readonly={isSystem ? true : false} />
+        </ProForm.Group>
 
-      <ProForm.Group>
-        <ProFormTextArea width="md" name="summary" label="简介" />
-      </ProForm.Group>
-    </ProForm>
+        <ProForm.Group>
+          <ProFormTextArea
+            readonly={isSystem ? true : false}
+            width="md"
+            name="summary"
+            label="简介"
+          />
+        </ProForm.Group>
+      </ProForm>
+    </>
   );
 };
 

dashboard/src/components/general/LangSelect.tsx

@@ -29,6 +29,7 @@ interface IWidget {
   disabled?: boolean;
   required?: boolean;
   name?: string;
+  readonly?: boolean;
 }
 const LangSelectWidget = ({
   width,
@@ -36,6 +37,7 @@ const LangSelectWidget = ({
   disabled = false,
   required = true,
   name = "lang",
+  readonly,
 }: IWidget) => {
   const intl = useIntl();
 
@@ -62,6 +64,7 @@ const LangSelectWidget = ({
       options={langOptions}
       width={width}
       name={name}
+      readonly={readonly}
       showSearch
       debounceTime={300}
       allowClear={false}

dashboard/src/components/general/NissayaCard.tsx

@@ -1,5 +1,6 @@
-import { CSSProperties, useEffect, useState } from "react";
-import { message, Modal, Popover, Skeleton, Typography } from "antd";
+import { useEffect, useState } from "react";
+import { Button, message, Modal, Popover, Skeleton, Typography } from "antd";
+import { EditOutlined } from "@ant-design/icons";
 
 import { get } from "../../request";
 import { get as getLang } from "../../locales";
@@ -117,7 +118,10 @@ const NissayaCardWidget = ({ text, cache = false }: IWidget) => {
   ) : (
     <div style={{ maxWidth: 750 }}>
       <div style={{ display: "flex", justifyContent: "space-between" }}>
-        <Title level={4}>{term?.word}</Title>
+        <Title level={4}>
+          {term?.word}
+          <Button type="link" icon={<EditOutlined />} />
+        </Title>
         <Link to={`/nissaya/ending/${term?.word}`}>在新窗口打开</Link>
       </div>
       <Paragraph>{term?.meaning}</Paragraph>

dashboard/src/components/studio/PublicitySelect.tsx

@@ -2,8 +2,9 @@ import { ProFormSelect } from "@ant-design/pro-components";
 import { useIntl } from "react-intl";
 interface IWidget {
   width?: number | "md" | "sm" | "xl" | "xs" | "lg";
+  readonly?: boolean;
 }
-const PublicitySelectWidget = ({ width }: IWidget) => {
+const PublicitySelectWidget = ({ width, readonly }: IWidget) => {
   const intl = useIntl();
 
   const options = [
@@ -29,6 +30,7 @@ const PublicitySelectWidget = ({ width }: IWidget) => {
   return (
     <ProFormSelect
       options={options}
+      readonly={readonly}
       width={width}
       name="status"
       allowClear={false}

dashboard/src/pages/library/nissaya/show.tsx

@@ -1,6 +1,6 @@
 import { Col, Row } from "antd";
 import { useParams } from "react-router-dom";
-import NissayaCardWidget from "../../../components/general/NissayaCard";
+import NissayaCard from "../../../components/general/NissayaCard";
 
 const Widget = () => {
   const { ending } = useParams(); //url 参数
@@ -8,7 +8,7 @@ const Widget = () => {
     <Row>
       <Col flex={"auto"}></Col>
       <Col flex={"960px"}>
-        <NissayaCardWidget text={ending} cache={false} />
+        <NissayaCard text={ending} cache={false} />
       </Col>
       <Col flex={"auto"}></Col>
     </Row>